Používateľ Klikne na Tlačidlo, Urobí Snímok Obrazovky Chyby a Pošle Mi Ho Bez Inštalácie Čohokoľvek

V živote každej webovej aplikácie nastane moment, kedy sa používateľ stretne s niečím pokazeným. Tlačidlo, ktoré sa po kliknutí ничего neurobí. Rozloženie, ktoré sa zrúti na určitej veľkosti obrazovky. Formulár, ktorý skryje svoju vlastnú chybovú správu. Používateľ sa pozerá na obrazovku zmätený a potom urobí jednu z dvoch vecí. Väčšina z nich sa jednoducho odíde a nikdy sa nevrátia. Zriedkavá hŕstka si vezme čas na napísanie správy, ktorá znie: "niečo nie je v poriadku s vaším webom." Tá správa príde bez kontextu, bez popisu toho, čo sa stalo, bez akejkoľvek indikácie, ktorý prehliadač alebo zariadenie bolo zahrnuté, a určite bez snímku obrazovky, ktorý by ukazoval skutočný problém. Vývojár si prečíta správu, pokúsi sa opraviť chybu, skončí neúspešne a chyba zostane opravená, kým sa neobjaví ďalší používateľ. Tento cyklus sa opakovane opakuje na internete a jeho koreňová príčina nie je lenivosť používateľa. Koreňová príčina je trenie.

Fotenie snímku obrazovky na počítači si vyžaduje poznať správnu klávesovú skratku, ktorá sa líši podľa operačného systému. Na Windows to môže byť Print Screen, alebo Alt plus Print Screen pre aktívne okno, alebo Windows kľúč plus Shift plus S pre nástroj Snipping Tool. Na Macu je to Command plus Shift plus 3, alebo 4, alebo 5, pričom každá z nich produkuje mierne odlišné výsledky. Na telefóne gesto zahŕňa súčasné stlačenie dvoch fyzických tlačidiel, čo v polovici prípadov náhodne zamkne obrazovku. Po vytvorení snímku obrazovky je potrebné ho nájsť v systéme súborov, pripojiť k e-mailu alebo vložiť do formulára podpory a poslať. Každý z týchto krokov je ďalší bod, kde sa používateľ rozhodne, že sa chyba oplatí nahlásiť. Výsledkom je, že vývojári dostanú zhruba jednu správu za každých sto chýb, s ktorými sa používatelia skutočne stretávajú.

Riešenie, ktoré vyplynulo z tejto frustrácie, je s húsusť jednoduché. Na stránke sa objaví malé tlačidlo. Keď je používateľ klikne, server zachytí snímok obrazovky presne tej stránky, ktorú používateľ prezerá, a pripojí ho k správe. Nie je potrebné žiadne rozšírenie prehliadača. Nie je potrebné pamätať si žiadnu klávesovú skratku. Nie je potrebné hľadať žiadny súbor a nahrávať ho. Jedno kliknutie, jeden snímok obrazovky, jedna správa. Používateľ pridá vetu alebo dve, v ktorej popíše, čo sa pokazilo, a vývojár dostane dokonale jasný obrázok pokazenej stránky spolu s popisom. Toto je celý pracovný postup a zmenil spôsob, akým prichádzajú hlásenia o chybách.

Prečo Rozšírenia Prehliadača Nikdy Nevyriešili Tento Problém

Zrejmá prvá reakcia je, že rozšírenia prehliadača na tento účel už existujú. K dispozícii je tucty nástrojov na snímky obrazovky ako rozšírenia Chrome, doplnky Firefox a zásuvné moduly Safari. Niektoré z nich sú dosť dobré, s funkciami anotácií, automatickými nahrávaním a integráciou s platformami na správu projektov. Všetky však zdieľajú rovnakú základnú chybu. Vyžadujú, aby používateľ nainštaloval niečo pred tým, ako sa chyba stane. Nikto neinštaluje rozšírenie na hlásenie chýb preventívne pre prípad, že niektorý webový server, ktorý navštívi zajtra, bude mať rozbité rozloženie. Rozšírenia riešia problém pre tímy QA a interných testerov, ktorí majú byť povedení, aby nainštalovali špecifické nástroje. Robí absolútne nič pre širokú verejnosť, ktorá sa stretáva s chybou prvýkrát na stránke, na ktorú sa možno nikdy nevráti.

Existuje aj otázka dôvery. Požiadavka na nainštalovanie rozšírenia prehliadača, aby sa chyba nahlásila, zavádza podivnú zmenu v interakcii. Používateľ prišiel na stránku, aby niečo splnil, zistil, že je rozbité, a teraz sa mu požaduje nainštalovať software tretej strany. Táto požiadavka si oprávnene vyvolá podozrenie u mnohých používateľov, a dokonca tí, ktorí sú ochotní sa zúčastniť, čelia režii navigácie v obchodoch s rozšíreniami, správe oprávnení a zisťovaniu, ako nástroj funguje. V čase, keď je rozšírenie nainštalované, pôvodná chyba už nemusí byť reprodukovateľná, alebo sa používateľ jednoducho presunul na konkurenta. Okno na zachytenie hlásenia o chybe je úzke a všetko, čo rozširuje medzeru medzi "niečo nie je v poriadku" a "správa poslané" znamená, že správa sa nikdy nepošle.

Knižnice na snímky obrazovky na strane klienta, ako je html2canvas, sa pokúšali vyriešiť to z iného uhla. Tieto knižnice JavaScriptu vykresľujú DOM na prvok plátna, čím sa efektívne vytvára snímok obrazovky bez akejkoľvek angažovanosti servera. Fungujú primerane dobre pre jednoduché rozloženia, ale rýchlo padajú pri zložitom CSS, vložených prvkoch iframe, obrázkoch z cudzích zdrojov, prvkoch plátna a vlastných fontoch. Výsledný obrázok často vyzerá úplne inak, ako v skutočnosti vidí používateľ, čo úplne popiera účel. Hlásenie o chybe obsahujúce snímok obrazovky, ktorý sa nezhoduje so skutočnou stránkou, je horšie ako žiadny snímok obrazovky, pretože to vedie vývojára na prácu s vizuálnym problémom, ktorý neexistuje, zatiaľ čo skutočný problém zostáva skrytý.

Snímky Obrazovky Na Strane Servera a Ako Zachytávajú to, Čo Vidí Používateľ

Prístup, ktorý stojí za screenshots.yeb.to, ide úplne odlišnou cestou. Namiesto toho, aby sa pokúšal rekonštruovať stránku na strane klienta, server dostane URL a vykresľuje ju pomocou skutočného motora prehliadača spusteného v kontrolovanom prostredí. Snímok obrazovky je zachytený skutočnou inštanciou Chromium, ktorá načíta stránku, vykoná JavaScript, aplikuje CSS, vykresľuje fonty a zachytí výsledok ako pixel-perfect obrázok. To znamená, že snímok obrazovky vyzerá presne tak, ako ho zobrazuje skutočný prehliadač, pretože je to to, čo skutočný prehliadač zobrazuje.

Keď používateľ klikne na tlačidlo hlásenia o chybe, aktuálna adresa URL stránky sa pošle na server spolu s metadátami o veľkosti okna používateľa, pomere pixelov zariadenia a všetkých relevantných parametroch stavu. Server spustí reláciu bezheadlového prehliadača nakonfigurovanú tak, aby bola čo najpodobnější týmto parametrom. Načíta stránku, čaká na dokončenie všetkých majetkov a zachytí snímok obrazovky. Výsledok je uložený a spojený so správou o chybe, čo dáva vývojárovi presný vizuálny záznam stránky v momente, keď používateľ klikol na tlačidlo. Celý proces trvá niekoľko sekúnd, čo je dostatočne rýchlo na to, aby mohol používateľ pridať svoj popis, zatiaľ čo sa snímok obrazovky generuje na pozadí.

Existujú nuansy, ktoré stojí za uznanie. Snímok obrazovky na serveri zachytáva stránku tak, ako sa javí serveru, nie nevyhnutne presné pixely na obrazovke používateľa. Ak je chyba spôsobená špecifickými zvláštnosťami vykresľovania prehliadača, uloženým obsahom alebo lokálne uloženým stavom, možná, že zachytenie na serveri nereprodukuje presne ten istý vizuálny artefakt. Ale v praxi sa väčšina chýb, ktoré používatelia hlasia, týka problémov rozloženia, rozbitých obrázkov, chýbajúceho obsahu alebo funkčných zlyhaní, ktoré sú konzistentné bez ohľadu na to, kto stránku načítava. V týchto prípadoch je snímok obrazovky na serveri nerozoznateľný od snímku obrazovky na strane klienta a masívne zníženie trenia spôsobuje, že sa výmena oplatí.

Vloženie Tlačidla Bez Zmeny Aplikácie

Integrácia je úmyselne minimálna. Malý fragment JavaScriptu načítava komponent tlačidla, ktorý je možné štylizovať na zhodu so systémom dizajnu hostiteľskej aplikácie. Tlačidlo sa pohybuje v rohu stránky, viditeľné, ale nenápadné. Po kliknutí otvorí ľahké prekrytie, kde používateľ môže napísať krátky popis a voliteľne zvýrazniť oblasť stránky, kde sa problém vyskytol. Za zákulisím fragment pošle aktuálnu adresu URL do screenshot API, ktorý zachytí stránku a vráti adresu URL obrázka. Správa, obsahujúca snímok obrazovky, popis, adresu URL a základné metadáta prehliadača, sa potom preposiela na akýkoľvek cieľ, ktorý vývojár konfiguroval: e-mailová adresa, webhook Slack, nástroj na správu projektov alebo vlastný koncový bod.

Celá integrácia nevyžaduje žiadne zmeny na serveri aplikácie. Nie je potrebné nainštalovať žiadny SDK, žiadny middleware na konfiguráciu, žiadna schéma databázy na úpravu. Fragment funguje nezávisle a komunikuje len s screenshot API a nakonfigurovaným cieľom správy. To znamená, že sa dá vložiť do blogu WordPress, aplikácie s jednou stránkou React, statickej HTML stránky alebo staršej aplikácie PHP s rovnakou ľahkosťou. Čas od rozhodnutia pridať nahlasovanie chýb po uvedenie na web je meraný v minútach, nie v šprintoch.

Pre vývojárov, ktorí chcú hlbšiu integráciu, je možné volať API priamo z kódu na strane servera. To otvára možnosti, ako je automatické zachytenie snímku obrazovky vždy, keď sa vyskytne nespracovaná výnimka, alebo periodické snímky obrazovky kritických stránok a ich porovnanie s základnou hodnotou na detekciu vizuálnych regresií. Ale pre základný prípad použitia umožnenia používateľom nahlásiť chyby jedným kliknutím fragment JavaScriptu spracuje všetko bez akýchkoľvek zmien na strane servera.

Čo Sa Zmení, Keď Hlásenia O Chybách Skutočne Prídu

Transformácia v kvalite hlásenia o chybách je dramatická. Pred implementáciou tlačidla bolo typické hlásenie o chybe vágne veta v e-maile. "Stránka vyzerá čudne." "Pokladňa je rozbité." "Niečo sa stalo, keď som sa pokúšal uložiť." Tieto správy vyžadovali viacero kôl následných otázok, počas ktorých si používateľ často stratil trpezlivosť a prestať odpovedať. Po implementácii tlačidla prichádzajú správy s jasným snímkom obrazovky, ktorý ukazuje presne, čo sa pokazilo, spolu s metadátami, ktoré identifikujú stránku, veľkosť okna a čas výskytu. Vývojár sa môže pozrieť na snímok obrazovky a okamžite pochopiť problém bez akejkoľvek diskusie.

Objem správ sa tiež výrazne zvýši. Používatelia, ktorí by nikdy nenapsali e-mail alebo nevyplnili formulár podpory, budú klikať na tlačidlo a napíšu tri slová. "Menu sa prekrýva s obsahom" nie je najpodrobnejšie hlásenie o chybe na svete, ale v kombinácii so snímkom obrazovky ukazujúcim navigačné menu, ktoré sa prekrýva s hlavnou oblasťou obsahu v mobile okne, to vývojárovi povie všetko, čo potrebuje na reprodukciu a opravu chyby. Kombinácia nižšieho trenia a bohatšieho kontextu znamená, že sa chyby hlásajú skôr, rýchlejšie sa opravujú a spoľahlivejšie sa overujú. Časy objavovania kritickej chyby rozloženia tri týždne po jej zavedení sú väčšinou skončené pre akúkoľvek aplikáciu, ktorá nasadzuje tento typ mechanizmu spätnej väzby.

Existuje vedľajší benefit, ktorý je menej zrejmý, ale rovnako cenný. Archív snímkov obrazovky sa stáva vizuálnou históriou aplikácie. Každá správa zachytáva moment v čase, ktorý ukazuje presne, ako stránka vyzerala, keď sa používateľ stretol s problémom. V priebehu týždňov a mesiacov tento archív odhalí vzory. Možná, že určitá stránka sa zlomí vždy, keď sa uskutoční nové nasadenie. Možná, že používatelia mobilných zariadení nahlasujú problémy tempom trikrát vyšším ako používatelia desktopu. Možná, že konkrétna verzia prehliadača konzistentne produkuje anomálie rozloženia. Tieto vzory sú neviditeľné v správach o chybách iba s textom, ale stanú sa okamžite zrejmé, keď sa prezerajú galérie snímkov obrazovky s časovými pečiatkami.