ローカライズされた読書ガイド
applicationinsights-web-ts目的、用途、および情報源
楽器browser/webApplication Insights JavaScript SDK を使用したアプリ (@microsoft/applicationinsights-web) リアルユーザーモニタリング (RUM) に使用 — ページビュー、クリック、AJAX/fetch依存関係、例外、カスタムイベント、およびバックエンドの OpenTelemetry トレースに関連付けられたブラウザ側の GenAI エージェントトレース。SDK ローダー スクリプトと npm セットアップ、フレームワーク拡張機能 (React、React Native、Angular)、クリック分析、テレメトリ初期化子、および OTel GenAI セマンティック規約をカバーします。agent/tool/modelブラウザから発信されるスパン。
ソースを取得しました:
- 出典リポジトリ
- microsoft/skills
- SKILL.md
.github/skills/applicationinsights-web-ts/SKILL.md- リポジトリの Star
- 3,157
- リポジトリの最終更新
- 2026-10-31
- 能力分類
- 開発
- 最終収集時刻
ライセンス: MIT
ワークフローの抜粋は、Codezによる実行可能な指示ではなく、あくまでも参考資料です。このページを作成するために、サードパーティ製のスキルは実行されていません。
以下の目的とワークフローに関する記述は、上流工程に関する資料であり、読みやすいように整理・翻訳されています。これらは、別途ラベル付けされたCodez編集分析とは区別されます。
このスキルが何をするか
楽器browser/webApplication Insights JavaScript SDK を使用したアプリ (@microsoft/applicationinsights-web) リアルユーザーモニタリング (RUM) に使用 — ページビュー、クリック、AJAX/fetch依存関係、例外、カスタムイベント、およびバックエンドの OpenTelemetry トレースに関連付けられたブラウザ側の GenAI エージェントトレース。SDK ローダー スクリプトと npm セットアップ、フレームワーク拡張機能 (React、React Native、Angular)、クリック分析、テレメトリ初期化子、および OTel GenAI セマンティック規約をカバーします。agent/tool/modelブラウザから発信されるスパン。
上流ワークフローの仕組み
クイックスタート(npm)
電話loadAppInsights()正確に1回、できるだけ早い段階で(追跡したいユーザー操作の前に)。trackPageView()初期負荷の場合 —enableAutoRouteTrackingがオンになっている場合、以降の経路変更は自動的に行われます。
クイックスタート(SDKローダースクリプト)
自動更新SDKとゼロビルドパイプラインが必要な場合に推奨。これを最初のとして貼り付けてください。 in : Loader-only API (queued until SDK loads): トラックイベント, トラックページビュー, トラック例外, トラックトレース, trackDependencyData, trackMetric, ページビューパフォーマンスの追跡, トラックページ開始, stopTrackPage, startTrackEvent, stopTrackEvent, addTelemetryInitializer, setAuthenticatedUserContext, clearAuthenticatedUserContext, フラッシュします。
Application Insights JavaScript SDK (Web) for TypeScript
ブラウザアプリ向けのリアルユーザーモニタリング(RUM)@microsoft/applicationinsights-webページビューを自動的に収集します。AJAX/fetch依存関係、未処理の例外、および(Click Analyticsプラグインを使用した場合)クリック。OpenTelemetry GenAIセマンティック規約に従い、Wを介してバックエンドスパンと相関するカスタムイベント、メトリクス、およびGenAIエージェントトレースをサポートします。3Cトレースコンテキスト。> と異なるazure-monitor-opentelemetry-tsこれはNode.jsサーバーアプリ。このスキルはbrowser/webコード(およびReact Native)。
要件とセットアップ
npm i --save @microsoft/applicationinsights-web
# Optional plugins (install only what you use):
npm i --save @microsoft/applicationinsights-clickanalytics-js
npm i --save @microsoft/applicationinsights-react-js @microsoft/applicationinsights-react-native @microsoft/applicationinsights-angularplugin-js制限事項と品質チェック
よくある落とし穴
二度初期化しないでください。異なるバンドルでモジュールを再インポートすると、ページビューが重複します。単一の共有モジュールエクスポートを使用してください。初期状態の損失を避けるため、最初のユーザー入力の前に初期化してください。clicks/exceptions.
上流への航路 · L412 ↗まずは安全なトライアルから始めましょう
- サポートされているホストとリポジトリのインストール手順を確認してください。スキルディレクトリと、それに関連付けられているスクリプト、アセット、ドキュメントはまとめて保管してください。SKILL.md単独では依存関係を省略できる場合があります。
- エージェントに実際の入力、希望する出力、および受け入れ基準を指定してください。呼び出し構文と利用可能なツールはホストによって異なります。このサイトは、汎用的なインストールコマンドを前提としていません。
- 使い捨てプロジェクトまたはコピーで、元のワークフローを試してみてください。ファイル、リモートサービス、または課金対象リソースを変更する操作は、許可する前に必ず確認してください。
- 出力結果をソースの品質チェックおよび独自の要件と照らし合わせて検証してください。トリガーが成功したことやリポジトリのスター数が多いことだけでは、正しい結果とは言えません。
詳細は出典元をご覧ください。
- Application Insights JavaScript SDK (Web) for TypeScript
- 導入前
- インストール
- 接続文字列
- クイックスタート(npm)
- クイックスタート(SDKローダースクリプト)
- テレメトリ初期化機能(データ拡充およびフィルタリング)
- クリック分析
- SPAルート追跡
- 分散トレーシング(バックエンドとの関連付け)
- GenAIエージェントトレース(OTelセマンティック規約)
- 必須属性キー(OTelの名称をそのまま使用してください)
- パターン: invoke_agent + ネストされたtool/modelスパン
- React (TypeScript)
- パフォーマンス — Web Vitals
- クッキーとプライバシー
- サンプリング
- オフライン / 荷降ろし時に送信
- よくある落とし穴
- バンドルサイズ
- ベストプラクティス
- 参考文献
関連スキル
翻訳と範囲
この読書ガイドは、ピン留めされた上流からの抜粋を選りすぐっていますSKILL.md翻訳は補助的なものです。完全なマニュアルではなく、互換性テスト済みであることを保証するものでもありません。ご使用前に原文および参照ファイルをお読みください。
この紹介文は、下記に固定表示されているバージョンに関するものです。現在のリポジトリのアクティビティと収集時間は別途表示されます。
- ピン留めされたソース
- 原文を読む ↗
- ソースを取得しました
- ソースコミット
00d66a64919edca5bca2c673373444e36a4b5461- ソースSHA-256
05ec3512a9d20bbc1e63aebc1e721ecfc26be2c0332e3e9affb6e6975e3f657d