ReportingObserver: コードの健全性を把握する

要約

新しい観察者が町に来た！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 に切り替えると興味深い場合があります。

その他のリソース:

• W3c の仕様
• chromestatus.com エントリ