Требования: разработанный продукт не может гарантировать отсутствие ошибок, даже если на этапе тестирования нет проблем, развернутых в производственной среде, могут возникнуть неожиданные ситуации для пользователей, и то же самое касается фронтенд-страниц. 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
|
|
|
|
