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

Philip Walton

要約

町に新たな観察者がいる！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 は、問題が発生した場合に Google に通知することもできます。

ただし、これらの既存の 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 となることを期待しています。1 つの API がアプリの問題をすべて捕捉するとします

• ブラウザの介入
• サポートの終了
• 機能ポリシーへの違反crbug.com/867471 をご覧ください。
• JS 例外とエラー（現在は window.onerror によって処理）
• 未処理の JS Promise の拒否（現在は window.onunhandledrejection によって処理されています）

また、ReportingObserver をワークフローに統合するツールにも期待しています。Lighthouse は、「非推奨の API の回避」監査の実行時に、ブラウザの非推奨化がすでに報告されているツールの例です。

Lighthouse では現在、DevTools プロトコルを使用してコンソール メッセージをスクレイピングし、デベロッパーに報告しています。代わりに、適切に構造化されたサポート終了レポートと anticipatedRemoval 日付などの追加のメタデータを得るために、ReportingObserver に切り替えることをおすすめします。

参考情報:

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