Korisnik je kliknuo na dugme, snimio je grešku i poslao mi je bez instaliranja bilo čega

Postoji trenutak u životu svake veb aplikacije gde korisnik naiđe na nešto što je pokvareno. Dugme koje ne radi kada se klikne. Raspored koji se kolabira na određenoj veličini ekrana. Oblik koji guta svoju vlastitu poruku o grešci. Korisnik gleda na ekran, zbunjen, i onda radi jednu od dve stvari. Većina njih jednostavno odlazi i nikada se ne vraća. Retki su oni koji odvoје vreme da napišu poruku poput "nešto nije u redu sa tvojom sajtom." Ta poruka stigne bez konteksta, bez opisa šta se desilo, bez bele od kakvog pregledača ili uređaja je uključen, i sigurno bez snimka ekrana koji pokazuje stvarni problem. Razvijač čita tu poruku, pokušava da reprodukuje problem, ne uspe, i greška ostaje neispravljena dok ne pogodi sledećeg korisnika. Ovaj ciklus se ponavlja beskonačno preko interneta, i prvi uzrok nije korisnikova lenost. Prvi uzrok je trenje.

Snimanje ekrana na računaru zahteva znanje bačnog prečica, koji se razlikuje u zavisnosti od operativnog sistema. Na Vindozu bi moglo biti Tipka za štampu, ili Alt plus tipka za štampu za aktivni prozor, ili tipka Vindoze plus Shift plus S za alat za rezanje. Na Meku je Komanda plus Shift plus 3, ili 4, ili 5, svaka dajući malo drugačije rezultate. Na telefonu žest uključuje istovremeno pritiskanje dva fizička dugmeta, što je polovina vremena slučajno zaključava ekran. Pošto je snimak ekrana pravi, mora biti pronađen u sistemu datoteka, priložen e-mailu ili ulepljen u obrazac za podršku, i poslan. Svaki od tih koraka je još jedna tačka gde korisnik odustane i odluči da greška nije vredna izveštavanja. Rezultat je da razvojni inženjeri prime otprilike jedan izveštaj za svakih sto grešaka koje korisnici zapravo naiđu.

Rešenje koje je izašlo iz ove frustracije je sramežljivo jednostavno. Mali dugme se pojavljuje na stranici. Kada korisnik klikne na njega, server snima ekran tačne stranice koju korisnik vidi i prilaže je izveštaju. Nije potrebno proširenje pregledača. Nema prečica tipki za pamćenje. Nema datoteke za pronalaženje i učitavanje. Jedan klik, jedan snimak ekrana, jedan izveštaj. Korisnik dodaje rečenicu ili dve koje opisuju šta je pošlo po zlu, a razvijač dobija savršeno jasnu sliku pokvarene stranice zajedno sa opisom. To je ceo tok rada, i promenio je način na koji stižu izveštaji o greškama.

Zašto proširenja pregledača nikada nisu rešila ovaj problem

Očigledna prva reakcija je da proširenja pregledača već postoje u tu svrhu. Postoji desетina alata za snimanje ekrana dostupnih kao Chrome proširenja, Firefox dodaci i Safari plugins. Neki od njih su prilično dobri, sa mogućnostima anotiranja, automatskim otpremanjima i integracijom sa platformama za upravljanje projektima. Ali svi dele istu fundamentalnu grešku. Oni zahtevaju od korisnika da instaliram nešto pre nego što se greška dogodi. Niko ne instalira proširenje za izveštavanje grešaka kao profilasku na slučaj da će neki vebsajt koji posetim sutra imati pokvareni raspored. Proširenja rešavaju problem za QA timove i interne testera kojima se može reći da instaliraju određene alate. Oni apsolutno ništa ne rade za opštu javnost koja se po prvi put susreće sa greškom na sajtu koji možda nikada više ne poseti.

Postoji i pitanje poverenja. Traženje od korisnika da instalira proširenje pregledača kako bi izvestio grešku uvodi naglu promenu u interakciji. Korisnik je došao na sajt da nešto uradi, otkrio da je pokvareno, a sada mu se traži da instalira softver treće strane. Taj zahtev će opravdano izazvati sumnju kod mnogih korisnika, čak i oni koji su voljni da se povinuju suočavaju se sa opterećenjem navigacije prodavnica proširenja, dodeljivanja dozvola i shvatanja kako alat funkcioniše. Do vremena kada je proširenje instalirano, originalna greška možda više nije reprodukovati, ili je korisnik jednostavno prešao na konkurente. Prozor za hvataanje greškog izveštaja je uzan, i bilo šta što proširi jaz između "nešto je u redu" i "izveštaj je poslan" znači da se izveštaj nikada ne pošalje.

Biblioteke za snimanje ekrana na strani klijenta kao html2canvas pokušale su rešiti ovo iz drugog ugla. Ove JavaScript biblioteke prikazuju DOM u element kanvasa, efektivno kreirajući snimak ekrana bez ikakvog učešća servera. Funkcioniraju razumno dobro za jednostavne rasporede, ali brzo se suočavaju sa kompleksnim CSS-om, ugnježdenim iframima, slikama sa drugim izvorom, canvas elementima i prilagođenim fontovima. Rezultujuća slika često ne liči ničem na ono što korisnik zapravo vidi, što u potpunosti poništava svrhu. Izveštaj o grešci koji sadrži snimak ekrana koji se ne podudara sa stvarnom stranicom je gori od nimalo snimka ekrana, jer prosljeđuje razvojnog inženjera hvatanju vizuelnog problema koji ne postoji dok pravi problem ostaje skriven.

Snimci ekrana sa servera i kako hvataju ono što korisnik vidi

Pristup iza screenshots.yeb.to ide potpuno drugačijim putem. Umesto da pokušavamo da rekonstruiramo stranicu na strani klijenta, server prima URL i prikazuje ga koristeći pravi motor pregledača koji se pokreće u kontroliranoj sredini. Snimak ekrana uzima stvarna Chromium instanca koja učitava stranicu, izvršava JavaScript, primenjuje CSS, prikazuje fontove i hvata rezultat kao besprekorno točnu sliku. To znači da snimak ekrana izgleda tačno kako pravi pregledač prikazuje, jer je to ono što pravi pregledač prikazuje.

Kada korisnik klikne na dugme za izveštavanje grešaka, trenutni URL stranice se šalje serveru zajedno sa metapodacima o veličini prikaza korisnika, omeru piksela uređaja i svim relevantnim parametrima stanja. Server pokreće bezglavo preglednike seansu konfiguriran da se podudara sa tim parametrima što je moguće bliže. Učitava stranicu, čeka sve sredstva da se završi prikazivanje, i hvata snimak ekrana. Rezultat se čuva i povezuje sa greškom izveštaj, dajući razvojnom inženjeru precizni vizuelni zapis stranice u trenutku kada je korisnik kliknuo dugme. Ceo proces traje nekoliko sekundi, što je dovoljno brzo da korisnik može dodati svoje opisе dok se snimak ekrana generiše u pozadini.

Postoje nijanse koje vredi priznati. Snimak ekrana sa servera hvata stranicu kako se pojavljuje na serveru, ne nužno tačne piksele na ekranu korisnika. Ako je greška uzrokovana specifičnom preglednačku problematika, keširani sadržaj ili lokalno skladišteno stanje, hvataće servera možda neće reprodukuje tačan vizuelni artefakt. Ali u praksi, ogromna većina grešaka koje korisnici izveštavaju su problemi sa rasporedom, pokvarene slike, nedostaje sadržaj ili funkcionalni neuspesi koji su konzistentni bez obzira ko učitava stranicu. Za te slučajeve, snimak ekrana sa servera se ne razlikuje od one sa strane klijenta, a ogromno smanjenje trenja čini kompromis vredan.

Ugradnja dugmeta bez promenije aplikacije

Integracija je namerno minimalna. Mali JavaScript fragment učitava komponentu dugmeta, koja se može stilizovati da bude u skladu sa sistemom dizajna domaćinskog programa. Dugme lebdi u uglu stranice, vidljivo ali neprimetljivo. Kada se klikne, otvara laganu prenosivost gde korisnik može da napište kratko opisе i opciono istaći oblast stranice gde se problem desio. Iza kulisa, fragment šalje trenutni URL na screenshot API, što hvata stranicu i vraća URL slike. Izveštaj, koji sadrži snimak ekrana, opis, URL, i osnovne metapodatke pregledača, se onda prosleđuje kuda god je razvojni inženjer konfigurirao: email adresu, Slack webhook, alat za upravljanje projektima, ili prilagođenu krajnju tačku.

Cela integracija ne zahteva nikakve promene na pozadini aplikacije. Nema SDK-a za instaliranje, nema softvera za konfiguriranje, nema šeme baze podataka za modifikovanje. Fragment deluje nezavisno, komunicirajući samo sa API-jem za snimanje ekrana i konfiguriranom odredištem izveštaja. To znači da se može ubaciti u WordPress blog, React aplikaciju sa jednom stranicom, statički HTML sajt ili nasleđeni PHP program sa jednakom lakoćom. Vreme od odluke da dodam izveštavanje grešaka do životnog okruženja na sajtu se meri u minutama, a ne u sprintovima.

Za razvojne inženjere koji žele dublju integraciju, API se može pozvati direktno iz koda na strani servera. Ovo otvara mogućnosti kao što je automatsko hvatanje snimka ekrana svaki put kada se dogodi neobrađeno izuzeće, ili povremeno hvatanje snimka ekrana kritičnih stranica i poređenje sa linijom baze da biste detektovali vizuelne regresije. Ali za osnovnu upotrebu dozvole korisnicima da izveštavaju greške sa jednim klikom, JavaScript fragment obrađuje sve bez nikakvih izmena na serveru.

Šta se menja kada izveštaji o greškama stvarno stignu

Transformacija u kvaliteti izveštaja o grešci je dramatična. Pre primene dugmeta, tipičan izveštaj o grešci je bila nejasna rečenica u e-mailu. "Stranica izgleda čudno." "Checkout je slomljen." "Nešto se desilo kada sam pokušao da spasiм." Ovi izveštaji su zahtevali nekoliko rundi pitanja za praćenje, tokom kojih je korisnik često izgubio strpljenje i prestao da odgovara. Nakon primene dugmeta, izveštaji stižu sa jasnim snimkom ekrana koji pokazuje tačno šta je pošlo po zlu, praćeno metapodacima koji identifikuju stranicu, veličinu prikaza i vreme pojave. Razvojni inženjer može pogledati snimak ekrana i odmah razumeti problem bez ičega i tamo.

Količina izveštaja takođe znatno raste. Korisnici koji nikada ne bi napisali e-mail ili popunili obrazac za podršku će kliknuti dugme i napisati tri reči. "Meni se preklapa sa sadržajem" nije najdetaljniji izveštaj o grešci na svetu, ali kombinovano sa snimkom ekrana koji pokazuje navigacijski meni prekllapanje nad glavnom oblasti sadržaja na mobilnom prikazu, kaže razvojnom inženjeru sve što je potrebno za reprodukovanje i rešavanje problema. Kombinacija nižeg trenja i bogatijeg konteksta znači da se greške izveštavaju ranije, brže ispravaju i provere pouzdanije. Dani pronalaženja kritične greške raspored tri nedelje nakon njene uvođenja su uglavnom gotovi za bilo koju aplikaciju koja primenjuje ovu vrstu mehanizma povratne sprege.

Postoji sekundarni benefit koji je manje očigledna ali jednako vredno. Arhiv snimaka ekrana postaje vizuelna istorija aplikacije. Svaki izveštaj hvata trenutak u vremenu, pokazujući tačno kako je stranica izgledala kada je korisnik naiđe na problem. Tokom nedelja i meseci, ovaj arhiv otkriva obrasce. Možda određena stranica se raspada svaki put kada novi deployment ide. Možda mobilni korisnici izveštavaju probleme tri puta brže od desktop korisnika. Možda određena verzija pregledača konzistentno proizvodi anomalije raspored. Ovi obrasci su nevidljivi u samo tekstualnom izveštajima o greškama, ali postaju odmah očigledni kada pregledavate galeriju snimaka ekrana sa vremenskim pečatom.