Изисквания: Разработеният продукт не може да гарантира, че няма бъгове, дори ако няма проблеми в етапа на тестване, внедрен в продукционната среда, може да възникнат неочаквани ситуации за потребителите, същото важи и за фронтенд страниците. Sentry и Bugsnag са много добри продукти за мониторинг.
преглед
След като следя информацията за аномалията, как да подам данните към бекенд API-то? Navigator.sendBeacon е API за изпращане на малки количества данни към сървъра, особено когато страница предстои да бъде разтоварена, като логване, анализ на поведението на потребителите и др.
Ако използвате традиционен XHR за изпращане на данни, трябва да направите специална логическа обработка на интерфейса за проследяване на фронтенда. navigator.sendBeacon() методПуснете съобщение в опашката на браузъра, така че дори ако изпращането се провали, съобщението за грешка да не бъде засечено от фронтенда。
Въведен Navigator.sendBeacon
Методът navigator.sendBeacon() изпраща HTTP POST заявка с малко количество данни към уеб сървъра асинхронно. Параметри: url, данни (данни от типа ArrayBuffer, ArrayBufferView, Blob, DOMString, FormData или URLSearchParams)
Документация:
Входът към хиперлинк е видим.
Входът към хиперлинк е видим.
Сценарии на употреба
Логване при деинсталиране на страницата: Записва поведенчески данни като време за пребиваване на страницата, поведение при кликване, PV, UV и др., когато потребителят напуска страницата.
Аналитика и мониторинг: Изпращане на данни за поведението на потребителите към аналитични сървъри за мониторинг на производителността на уебсайта и анализ на поведението на потребителите.
Докладване на статус: Докладва информация за състоянието на приложението или грешката на сървъра.
Тест
Кодът е следният:
Какви са приликите и разликите между Navigator.sendBeacon и XHR и fetch?
Прилики
Изпращане на мрежови заявки: И трите метода се използват за изпращане на данни от клиента към сървъра.
Поддръжка на множество формати данни: Могат да изпращат данни в различни формати като низове, JSON, двоични данни и др.
Разлики
Navigator.sendBeacon
Използва се за изпращане на малко количество данни при деинсталиране на страницата и е подходящ за логване, анализ на данни и др.
Изпращането на данни е асинхронно, но не връща никаква информация на обаждащия се и не може да обработи отговора на сървъра.
Проектирани са да гарантират доставка на данни при деинсталиране на страницата, дори когато браузърът е затворен или страницата прескача.
Винаги използвайте HTTPPOST заявки.
Няма нужда от обработка на отговори, лесен за използване.
XMLHttpRequest
За по-сложни AJAX заявки, които изискват обработка на отговори.
Могат да се правят синхронни или асинхронни заявки.
Можете да обработвате отговора на сървъра и да извършвате допълнителна обработка (например анализиране на JSON, обработка на статус кодове и др.).
Предоставя богати събития като onload, onerror, onprogress и др., за да следи различните етапи на заявката.
Широко поддържан във всички основни браузъри, включително някои по-стари.
Тя е по-сложна за използване и изисква обработка на различните етапи и състояния на заявката.
Донесе
Модерен интерфейс за заявки, който да замени XMLHttpRequest с по-проста и гъвкава обработка на заявки и отговори.
Винаги правете асинхронна заявка, връщайки обект от Обещанието.
Той поддържа верижни отговори за обработка, което улеснява парсването на JSON, кодовете за статус на процеса и други.
Поддържа async/await синтаксис, който е по-близък до съвременните навици на JavaScript разработка.
По-добра поддръжка за кросдомейн заявки и CORS (Cross-domain Resource Sharing).
Позволява добавяне на повече опции към заявката (например персонализиран заглавие, метод на заявка и др.).
резюме
Navigator.sendBeacon е API, създаден за надеждност, особено за изпращане на малки количества данни при деинсталиране на страница.
Той има предимствата на простота, неблокиране и надеждност, и е особено подходящ за сценарии като логване и анализ на поведението на потребителите.
Прави се асинхронна заявка и е POST заявка.
Той може само да определи дали е поставен в опашката на задачите на браузъра, но не може да определи дали е успешно изпратен.
Няма нужда да се занимавате с възвръщаемата стойност.
Трябва да се отбележат проблеми със съвместимостта на браузъра. |
Публикувано на 2025-3-5 09:46:14
|
|
|
|
