Вимоги: Розроблений продукт не може гарантувати відсутність помилок, навіть якщо на етапі тестування, розгортання у продакшн-середовищі не виникає, можуть виникати несподівані ситуації для користувачів, і те саме стосується фронтенд-сторінок. 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
|
|
|
|
