要約
新しい観察者が町に来た!ReportingObserver
は、サポートが終了した API がサイトで使用されたか、ブラウザの介入が発生したことをサイトに知らせる新しい API です。
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
このコールバックを使用して、詳細な分析のためにバックエンドまたは分析プロバイダにレポートを送信できます。
これはなぜ便利なのでしょうか。これまで、非推奨と介入の警告は、DevTools のコンソール メッセージでのみ確認できました。特に介入は、デバイスやネットワークの状態など、現実のさまざまな制約によってのみトリガーされます。そのため、ローカルでサイトを開発したりテストしたりするときにこうしたメッセージが表示されることはありません。ReportingObserver
はこの問題を解決します。ユーザーが潜在的な問題を実際に経験した場合、Google はそれについて通知できます。
はじめに
少し前にブログ投稿「ウェブアプリの観察」を書きました。ウェブアプリで起きる「もの」をモニタリングするための API がいくつあるか面白いと感じました。たとえば、DOM に関する情報を監視できる API ResizeObserver
、IntersectionObserver
、MutationObserver
があります。パフォーマンス測定値をキャプチャするための API として、PerformanceObserver
があります。window.onerror
や window.onunhandledrejection
などの他の API も、問題が発生した場合にそれを通知します。
ただし、これらの既存の API ではキャプチャされない種類の警告もあります。非推奨の API がサイトで使用されていたり、ブラウザの介入によって実行された場合、DevTools では最初に次のように通知されます。
当然ながら、window.onerror
がこれらの警告をキャプチャすると考えられます。いいえ。
これは、ユーザー エージェント自体によって直接生成された警告では window.onerror
が呼び出されないためです。コードの実行に起因するランタイム エラー(JS 例外と構文エラー)に対して呼び出されます。
ReportingObserver
がリラックス。これは、ブラウザによる警告(サポート終了や介入など)を通知するためのプログラマティックな手段を提供します。これをレポートツールとして使用すると、ユーザーがライブサイトで予期しない問題が発生したかどうかを心配する必要がなくなります。
API
この API は、IntersectionObserver
や ResizeObserver
などの他の「オブザーバー」API とは異なります。コールバックをして、情報を提供します。このコールバックが受け取る情報は、ページで発生した問題のリストです。
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
// → report.type === 'deprecation'
// → report.url === 'https://reporting-observer-api-demo.glitch.me'
// → report.body.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'
// → report.body.message === 'Synchronous XMLHttpRequest is deprecated...'
// → report.body.lineNumber === 11
// → report.body.columnNumber === 22
// → report.body.sourceFile === 'https://reporting-observer-api-demo.glitch.me'
// → report.body.anticipatedRemoval === <JS_DATE_STR> or null
}
});
observer.observe();
フィルタしたレポート
特定のレポートタイプのみが表示されるように、レポートに事前にフィルタを適用できます。
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
バッファリングされたレポート
オブザーバーが作成される前に生成されたレポートを確認する場合は、buffered: true
オプションが非常に便利です。
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
これは、ReportingObserver
を使用するライブラリを遅延読み込みする場合などに最適です。オブザーバーは遅れて追加されますが、ページの読み込み中に発生したことを見逃すことはありません。
監視を停止
はい、あります。これは disconnect
メソッドです。
observer.disconnect(); // Stop the observer from collecting reports.
例
例 - ブラウザでの介入を分析プロバイダに報告する
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
},
{types: ['intervention'], buffered: true}
);
observer.observe();
例 - API が削除されることを通知:
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
if (report.type === 'deprecation') {
sendToBackend(`Using a deprecated API in ${report.body.sourceFile} which will be
removed on ${report.body.anticipatedRemoval}. Info: ${report.body.message}`);
}
}
});
observer.observe();
まとめ
ReportingObserver
は、ウェブアプリの潜在的な問題を発見してモニタリングするためのさらなる手段です。コードベースの正常性(またはその欠如)を把握するための有用なツールにもなります。バックエンドにレポートを送信して、ユーザーがサイトで直面している実際の問題を把握します。コードを更新することで、利益が得られます。
今後の作業
将来的には、ReportingObserver
が JS であらゆる種類の問題を捕捉する事実上の API になることを願っています。アプリで発生している問題をすべて把握する API を 1 つ想像してみてください。
- ブラウザ介入
- サポートの終了
- 機能ポリシーへの違反。crbug.com/867471 をご覧ください。
- JavaScript の例外とエラー(現在は
window.onerror
が対応) - 未処理の JS Promise 拒否(現在
window.onunhandledrejection
が対応)
また、ReportingObserver
をワークフローに統合するツールもおすすめです。Lighthouse の一例は、「サポートが終了した API を回避する」という監査を実施した際に、ブラウザのサポート終了を知らせるツールの例です。
Lighthouse では現在、DevTools プロトコルを使用してコンソール メッセージをスクレイピングし、これらの問題をデベロッパーに報告しています。代わりに、適切に構造化された非推奨レポートと anticipatedRemoval
の日付などの追加のメタデータを使用する ReportingObserver
に切り替えると興味深い場合があります。
その他のリソース: