bugbottle

Fejlrapporter inde i din app, der ankommer med beviserne vedhæftet.

Din brugerflade, dit eget endepunkt, nogle få kilobyte.

Fejlovervågning fanger det, der kaster en fejl. Den kan ikke fange det, der bare ser forkert ud, og den fortæller aldrig, hvad brugeren var i gang med, da det skete. »Gem-knappen gør ingenting« er ikke en rapport, nogen kan handle på.

bugbottle samler konteksten i det øjeblik, nogen opdager fejlen — siden, vinduets størrelse, de seneste konsolfejl, det element brugeren peger på og eventuelt et billede af det, vedkommende kiggede på — og sender det som JSON til en rute, du selv ejer.

Prøv panelet Kom i gang Læs dokumentationen

Én rapport, som din rute modtager den. Der bliver ikke sendt noget fra denne side.

Hvad du får

  • Uden brugerflade

    Du bygger selv formularen. Biblioteket står for tilstanden, indsamlingen og afsendelsen — ikke for din HTML.

  • Du modtager rapporterne selv

    Der er intet kontrolpanel og ingen tjeneste, man skal oprette sig hos. En rapport er et JSON-kald til en rute, du selv skriver, og valideringsfunktionerne følger med.

  • Intet i din pakke, du ikke har bedt om

    Nul afhængigheder. Kernen fylder omkring 0,6 kB gzippet; med elementvælgeren og React-hook'et 3,4 kB; det færdige panel 6 kB.

  • Peg på elementet

    pickElement() giver en kort CSS-vælger, elementets tag, den synlige tekst, placeringen og de brugbare attributter — nok til at et menneske eller en kodeagent kan finde den rigtige fil.

  • Dit sprog, dit udtryk

    Otte indbyggede sprog, alle tekster kan skiftes ud, og panelet får sit udseende fra en håndfuld CSS-variabler.

  • Hjælpefunktioner til serveren

    Alt, hvad en browser sender, bliver kontrolleret, før det når din database, for det er dér, de skarpe kanter er.

Kom i gang

Tre veje ind, alt efter hvad projektet allerede har. Alle tre sender den samme JSON til en rute, du selv skriver.

Med en bundler

Installér det, begynd at opsamle konsolfejl, og montér det færdige panel.

terminal
npm install bugbottle
main.js
import { initConsoleBuffer } from "bugbottle";
import { mountBugbottle } from "bugbottle/ui";
import { da } from "bugbottle/locales";

initConsoleBuffer();
mountBugbottle({ endpoint: "/api/feedback", locale: da });

Ét script-tag

Til et websted uden byggetrin — et WordPress-tema, en statisk side, et kundewebsted en anden udruller. Omkring 11 kB gzippet.

index.html
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bugbottle.js"
  data-endpoint="/api/feedback"
  data-locale="da"
  data-brand="Acme"
></script>

WordPress

Et plugin, der monterer det samme panel og modtager rapporterne i installationen selv: en privat indholdstype med en liste i wp-admin, valgfri mail, dansk og engelsk. Én aktivering, intet byggetrin, ingen udvikler ved hånden.

Hent pluginet · Kildekode og indstillinger

Vil du hellere bygge formularen selv? useBugReport fra bugbottle/react giver dig den samme kerne uden en linje færdig HTML. Se dokumentationen (på engelsk).

Panelet, kørende på denne side

Den flydende knap i hjørnet er det rigtige bugbottle/ui-panel med den danske sprogfil. Åbn det, skriv en linje, peg på noget her på siden, og tryk send.

Der er ingen server bag: demoen sender gennem sit eget fetch, gemmer den rapport, der ville være blevet sendt, og viser den ved siden af med toMarkdown fra bugbottle/server — samme funktion, som du ville bruge til teksten i en sag eller til en morgenopsamling. Intet forlader din browser. Skærmbilleder er slået fra her, fordi demoen ikke har noget privat sted at lægge dem.

Rapporten som Markdown

toMarkdown(rapport)

            

          

        

      

    

  


  

    

      

        
Læs lige det her

        

          Et skærmbillede af din applikation indeholder alt, hvad den, der melder
          fejlen, kunne se. I et journalsystem kan det være et billede af en patient;
          i et lønsystem en løn; i dit måske nogens indbakke eller en halvskrevet
          besked, der aldrig blev sendt.
        

        
Tre ting følger heraf, og dem kan biblioteket ikke gøre for dig:

        
    
          
  1. 
            Læg skærmbilleder et privat sted. Hvis din objektlagring
            har offentlig læseadgang — det har mange mediearkiver — kan alt, hvad du
            lægger derind, hentes af enhver, der kender adressen. Brug en separat
            lagerplads uden offentlig adgang.
          
    2. 
          
  2. 
            Vis dem kun gennem en rute, der kræver login. Giv aldrig
            et skærmbillede en offentlig adresse. Slå nøglen op ud fra rækken i
            databasen frem for at tage den fra forespørgslen, så et id ikke kan bruges
            til at gennemsøge hele lageret.
          
    3. 
          
  3. 
            Sig det, før billedet bliver taget. Skriv det i
            formularen ved siden af afkrydsningsfeltet — ikke i en politik, ingen
            åbner.
          
    4. 
        

        

          Det er også værd at overveje at kræve, at folk er logget ind. Et anonymt
          skærmbillede er et, ingen bagefter kan spørges om, og ingen kan få at vide
          er blevet slettet.
          Hele afsnittet i dokumentationen.
        

      

    

  


  

    

      

        
Bygget af Mahope

        

          Jeg hedder Mads Holst Jensen, er freelance web- og AI-udvikler i Danmark og
          arbejder under navnet Mahope. bugbottle er blevet til undervejs i
          kundearbejde: to apps, hvor brugerne blev ved med at melde fejl, jeg ikke
          kunne genskabe. Så byggede jeg den del, der samler beviserne, og pillede
          stykker af den, indtil den var lille nok til at give væk.
        

        

          Jeg bygger den slags værktøj til andres produkter også — vejen en bruger går,
          når noget er galt, det interne værktøj ingen har haft tid til, integrationen
          der skal blive ved med at virke, når jeg er gået igen. Er det dét, du
          mangler, så skriv til mig og fortæl, hvad det drejer sig om.
        

        

          Mads Holst Jensen
          mahope.dk
          [email protected]