この記事は機械翻訳のミラー記事です。元の記事にジャンプするにはこちらをクリックしてください。

Architect_Programmer_Code農業ネットワーク»建築家 › フロントエンド設計とウェブ › フロントエンドフレーム › navigator.sendBeacon() メソッドはフロントエンドの埋み込み監視と追跡に用いられ...
眺める： 1289|答える： 0

[その他] フロントエンドの監視と追跡のためのnavigator.sendBeacon()メソッド

[リンクをコピー]
2025年3月5日 09:46:14に投稿 | | | |
要件:開発された製品がバグを保証できず、テスト段階で問題がなくても本番環境に展開しても、ユーザーに予期せぬ状況が生じる可能性があり、フロントエンドページも同様です。 SentryとBugsnagはどちらも非常に優れた監視製品です。

復習

ASP.NET コアリンクトレーシング(4) イェーガーリンクトレーシングへのアクセス
https://www.itsvse.com/thread-9537-1-1.html

ASP.NET コアリンクトレーシング(1) Skywalking チュートリアルのインストール
https://www.itsvse.com/thread-9456-1-1.html

異常情報を監視した後、どのようにしてデータをバックエンド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の類似点と相違点は何ですか?

類似 点

ネットワークリクエストの送信:クライアントからサーバーへのデータ送信には、これら3つの方法すべてが用いられます。
複数のデータフォーマットのサポート:文字列、JSON、バイナリデータなど様々な形式でデータを送信できます。

違い

Navigator.sendBeacon(ナビゲーター・センドビーコン)

ページをアンインストールした際に少量のデータを送信するために使われ、ログ記録やデータ分析などに適しています。
データの送信は非同期ですが、発信者に情報を返さず、サーバーの応答を処理することもできません。
ブラウザが閉じられたりページがジャンプしたりしても、ページがアンインストールされた際にデータ配信を保証するよう設計されています。
必ずHTTPPOSTリクエストを使いましょう。
返答を処理する必要はなく、使い方も簡単です。

XMLHttpリクエスト

処理応答を必要とするより複雑なAJAXリクエストには対応します。
同期または非同期のリクエストが可能です。
サーバーのレスポンスを処理し、さらに処理(例:JSONの解析やステータスコードの処理など)を行うことができます。
オンロード、オンエラー、オンプログレスなどのリッチイベントを提供し、リクエストの各段階を監視します。
主要なブラウザすべてで広くサポートされており、古いブラウザも含まれます。
使用がより複雑で、リクエストのさまざまな段階や状態の処理が必要です。

フェッチ

XMLHttpRequestを置き換える、よりシンプルで柔軟な要求応答処理のための現代的なリクエストインターフェース。
必ず非同期リクエストを行い、Promiseオブジェクトを返してください。
チェイン処理応答をサポートし、JSONの解析やステータスコードの処理などが簡単に行えます。
非同期/待機構文をサポートしており、これは現代のJavaScript開発の習慣により近いものです。
クロスドメインリクエストとクロスドメインリソース共有(クロスドメインリソースシェアリング)へのより良いサポート。
リクエストにより多くのオプション(例:カスタムヘッダー、リクエストメソッドなど)を追加できます。

概要

Navigator.sendBeaconは信頼性を重視し、特にページがアンインストールされた際に少量のデータを送信するためのAPIです。
シンプルさ、非ブロッキング性、信頼性という利点があり、特にログ記録やユーザー行動分析などのシナリオに適しています。
非同期リクエストがPOSTリクエストとなります。
ブラウザのタスクキューに置かれたかどうかは判別できますが、送信が成功しているかどうかは判別できません。
リターンバリューに気を取る必要はありません。
ブラウザの互換性の問題に注意が必要です。




先の：Fuse.js フロントエンド軽量ファジィ検索ライブラリ(全文検索)
次に：Ubuntu 24.04グラフィックカードA10(NVIDIAドライバーインストール済み)

関連記事
免責事項：
Code Farmer Networkが発行するすべてのソフトウェア、プログラミング資料、記事は学習および研究目的のみを目的としています。 上記の内容は商業的または違法な目的で使用されてはならず、そうでなければ利用者はすべての結果を負うことになります。 このサイトの情報はインターネットからのものであり、著作権紛争はこのサイトとは関係ありません。 ダウンロード後24時間以内に上記の内容を完全にパソコンから削除してください。 もしこのプログラムを気に入ったら、正規のソフトウェアを支持し、登録を購入し、より良い本物のサービスを受けてください。 もし侵害があれば、メールでご連絡ください。
Mail To:help@itsvse.com