Požadavky: Vyvinutý produkt nemůže zaručit, že neexistují chyby, i když nejsou problémy ve fázi testování, nasazení do produkčního prostředí, mohou nastat neočekávané situace pro uživatele, a totéž platí pro front-end stránky. Sentry a Bugsnag jsou oba velmi dobré monitorovací produkty.
přezkoumání
Po sledování informací o anomáliích, jak mám data odevzdat do backend API? Navigator.sendBeacon je API pro odesílání malých dat na server, zejména když se stránka chystá vyložit, například při logování, analýze chování uživatelů apod.
Pokud používáte tradiční XHR pro odesílání dat, musíte na frontendu provádět speciální logické zpracování na tracking interface. metoda navigator.sendBeacon()Vložte zprávu do fronty prohlížeče, aby i v případě, že odeslání selže, její chybová zpráva nebyla frontendem zachycena。
Představen Navigator.sendBeacon
Metoda navigator.sendBeacon() odesílá HTTP POST požadavek s malým množstvím dat na webový server asynchronně. Parametry: URL, data (data typu ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData nebo URLSearchParams)
Dokumentace:
Přihlášení k hypertextovému odkazu je viditelné.
Přihlášení k hypertextovému odkazu je viditelné.
Scénáře použití
Záznam při odinstalaci stránky: Zaznamenává údaje o chování, jako je doba zdržení stránky, chování kliknutí, PV, UV atd., když uživatel stránku opustí.
Analytika a monitorování: Odesílání dat o chování uživatelů na analytické servery pro monitorování výkonu webu a analýzu chování uživatelů.
Hlášení stavu: Hlásí stav aplikace nebo informace o chybách serveru.
Test
Kód je následující:
Jaké jsou podobnosti a rozdíly mezi Navigator.sendBeacon a XHR a fetch?
Podobnosti
Odesílání síťových požadavků: Všechny tři metody se používají k přenosu dat z klienta na server.
Podpora více datových formátů: Mohou odesílat data v různých formátech, jako jsou řetězce, JSON, binární data atd.
Rozdíly
Navigator.sendBeacon
Používá se k odeslání malého množství dat při odinstalaci stránky a je vhodný pro logování, analýzu dat atd.
Odesílání dat je asynchronní, ale nevrací volajícímu žádné informace a nemůže zpracovat odpověď serveru.
Navrženo tak, aby zajistilo doručení dat při odinstalaci stránky, i když je prohlížeč zavřený nebo stránka přeskakuje.
Vždy používejte HTTPPOST požadavky.
Není potřeba zpracovávat odpovědi, je to jednoduché na používání.
XMLHttpRequest
Pro složitější AJAX požadavky, které vyžadují zpracování odpovědí.
Lze provádět synchronní nebo asynchronní požadavky.
Můžete zpracovat odpověď serveru a provést další zpracování (např. parsování JSON, zpracování stavových kódů atd.).
Poskytuje bohaté události jako onload, onerror, onprogress atd., pro sledování různých fází požadavku.
Široce podporován ve všech hlavních prohlížečích, včetně některých starších prohlížečů.
Je složitější na použití a vyžaduje řešení různých fází a stavů žádosti.
Přinést
Moderní rozhraní požadavků, které nahrazuje XMLHttpRequest pro jednodušší a flexibilnější zpracování požadavků a odpovědí.
Vždy proveďte asynchronní požadavek, který vrací objekt Promise.
Podporuje řetězené zpracování odpovědí, což usnadňuje analýzu JSON, stavových kódů procesů a dalších.
Podporuje async/await syntaxi, která je více v souladu s moderními JavaScriptovými vývojovými návyky.
Lepší podpora pro požadavky napříč doménami a CORS (sdílení zdrojů mezi doménami).
Umožňuje přidat více možností k požadavku (např. vlastní hlavička, metoda požadavku atd.).
shrnutí
Navigator.sendBeacon je API navržené pro spolehlivost, zejména pro odesílání malých dat při odinstalaci stránky.
Má výhody jednoduchosti, neblokování a spolehlivosti a je zvláště vhodný pro scénáře jako je logování a analýza chování uživatelů.
Je podáván asynchronní požadavek, který je POST požadavkem.
Může pouze určit, zda je umístěn do fronty úloh v prohlížeči, ale nemůže určit, zda byl úspěšně odeslán.
Není třeba řešit hodnotu návratnosti.
Je třeba zmínit problémy s kompatibilitou prohlížeče. |
Zveřejněno 5. března 2025 09:46:14
|
|
|
|
