ブラウザSPA監視2.0

重要

この機能はパブリックプレビュー段階です。最終的には、既存のbrowser SPA エクスペリエンスに取って代わることになります。

顧客監視browserシングルページアプリケーション (SPA) については、数多くの問題点に対処することを目的とした SPA 監視機能の見直しを発表できることを嬉しく思います。

最新バージョンが使用できない: サードパーティのライブラリとの頻繁な競合と信頼性の低いインタラクションキャプチャが既存のエージェントに問題を引き起こし、最新バージョンが使用できなくなることがよくありました。
パッチワークソリューション: SPA パッチで 1 つの問題に対処すると、別の問題が発生することが多く、修正と回帰のイライラするサイクルが発生します。
サードパーティライブラリの競合: グローバルラッピング、特にPromises周りでは、他のライブラリとの競合によりコードの機能が中断されることがよくあります。
パフォーマンスボトルネック: タイマー、RAF、Promise チェーンを使用するコードとの競合により、速度低下からフリーズに至るまでパフォーマンスの問題が発生しました。

更新された SPA 監視エクスペリエンスは、これらの問題を解消し、大幅に改善された監視エクスペリエンスを提供するように設計されています。主な変更点は次のとおりです。

アンラップされた実行: コアグローバルをラップしないことで、新しい SPA エクスペリエンスはアプリケーションの実行速度を大幅に向上させます。
ソフトナビゲーションヒューリスティックとの調整: 新しいエクスペリエンスには Google Chrome のソフトナビゲーションが採用されており、より正確なインタラクショントラッキングとbrowser動作との調整が改善されています。
インタラクションの決定の簡素化: インタラクションはUIイベント (クリック/キーダウン/送信 -> ルート変更 -> DOM変更) として定義されるようになり、より明確で効率的なキャプチャアプローチが提供されます。
- イベントの関連付けが解除される可能性: UI主導のインタラクションへの重点を反映して、以前に関連付けられていた AjaxRequest および JavascriptError イベントがインタラクションから関連付けが解除される可能性があります。
主要なメトリクスに焦点を当てる: レポートされるデータはほとんど変更されていませんが、新しいエクスペリエンスでは、インタラクション内の JavaScript の実行やコールバック期間が追跡されなくなり、レポートされる情報が合理化されます。
インタラクション時間の短縮: 特にルート変更の場合、インタラクション時間が大幅に短縮されます。最初のページの読み込みはわずかに短縮されます。
API の更新:
- 新しいオプションの引数.interaction({waitForEnd: true})が.interaction()関数に追加されました: これにより、ユーザーインタラクションの終了時刻をカスタマイズできます。既存の.interaction()機能は変更されません。
- 非推奨の API: 関数createTracer : 関数createTracerは引き続き機能しますが、インタラクションを開いたままにしたり、コールバックの時間を計ったりしなくなったため、非推奨になりました。注意: 新しい SPA エクスペリエンスでcreateTracerを引き続き使用すると、 BrowserTimingイベントは作成されません。

新しいbrowser SPA監視エクスペリエンスをお試しください

要件を確認する

この機能は、当社の標準ブラウザサポートステートメントに従ってテストおよびサポートされています。

機能フラグを追加する

エージェントが APM メソッドを使用してインストールされている場合は、サポートチームに連絡して、アカウントで機能フラグを有効にしてください。

エージェントが NPM またはUIベースのコピー/貼り付け方法を使用してインストールされた場合は、次の機能フラグをブラウザーエージェントコードに追加します。

Web ページの HTML でNew Relic Browser エージェントコードを見つけます。
init設定オブジェクトに、 soft_nav機能フラグを追加します。次に例を示します。
```
<script type="text/javascript"> ;window.NREUM||(NREUM={});init={ …, feature_flags: ['soft_nav'] }:
```
アプリをデプロイします。
この機能を無効にする必要がありますか? 機能フラグを削除するだけです。

データがNew Relicに送信されていることを確認する

まず、クリック/キーダウン/送信 -> ルート変更 -> DOM 変更というヒューリスティックに従ってインタラクションが行われていることを確認します。

次に、 browserの開発ツールのネットワークタブを確認します。 /events/1/に送信されるリクエストをフィルターします。ペイロードがbel.7;1で始まるものがあり、これはインタラクションがキャプチャされ、送信されていることを示します。

最後に、インタラクションデータはbrowserのエンティティダッシュボードとチャートに引き続き流れ込む必要があります。

既知の問題

API の使用法:
- newrelic.interaction().end() 回避策: 以前にこれを使用してインタラクションクロージャーの問題に対処した場合、余分な不要なインタラクションが表示される可能性があります。最適な結果を得るために使用方法を確認してください。
- createTracer() 機能の変更: createTracer()インタラクションを開いたままにしたり、コールバックの時間を計ったりしなくなりました。 JavaScript コードの追跡にこれに依存していた場合は、別の方法を検討してください。
AjaxRequest 協会：
- インタラクションからの除外の可能性: 前回のインタラクションの終わり近くに開始された Ajax リクエストは、インタラクションの継続時間が短縮されたため、除外される可能性があります。
- 手動拡張: リクエストを特定のインタラクションに属性付ける必要がある場合は、 .interaction()関数に追加された引数.interaction({waitForEnd: true})を使用して、リクエストが起動されるまでインタラクションを開いたままにし、その後インタラクション.end() 。これにより、リクエストがインタラクションに関連付けられます。

フィードバックを残す

バグ、機能リクエスト、パフォーマンスの改善を報告するには、 GitHub の問題を送信してください。

その他のフィードバックについては、件名を[SoftNav]: で始める電子メールをbrowser-agent@newrelic.comに送信して、ご意見やご提案をお寄せください。