ReportingObserver API でコードの状態を把握する

製品版アプリで非推奨の API を見つける。

ReportingObserver は、サイトが非推奨の API を使用している場合や、ブラウザの介入が発生した場合に通知します。基本的な機能は、Chrome 69 で初めて導入されました。Chrome 84 以降では、ワーカーで使用できます。

const observer = new ReportingObserver((reports, observer) => {
  for (const report of reports) {
    console.log(report.type, report.url, report.body);
  }
}, {buffered: true});

observer.observe();

コールバックを使用して、分析のためにレポートをバックエンドまたはアナリティクス プロバイダに送信します。

なぜこれが有用なのでしょうか。この API が登場するまで、非推奨と介入の警告は DevTools でコンソール メッセージとしてのみ利用可能でした。特に、介入は、デバイスやネットワークの状態など、さまざまな現実世界の制約によってのみトリガーされます。そのため、サイトをローカルで開発またはテストしているときに、これらのメッセージが表示されないことがあります。ReportingObserver は、この問題の解決策を提供します。ユーザーが実際に潜在的な問題に遭遇したときに、ウェブ デベロッパーに通知できます。

背景

少し前に、私はブログ投稿（ウェブアプリのモニタリング）を書きました。ウェブアプリで発生する「事象」をモニタリングするための API がいかに多いかに興味をそそられたからです。たとえば、DOM に関する情報をモニタリングできる API には、ResizeObserver、IntersectionObserver、MutationObserver などがあります。PerformanceObserver は、パフォーマンス測定値をキャプチャします。window.onerror や window.onunhandledrejection などのメソッドを使用すると、問題が発生したときに通知を受け取ることもできます。

ただし、既存の API ではキャプチャされない他のタイプの警告もあります。サイトで非推奨の API が使用されている場合や、ブラウザの介入に直面した場合、DevTools が最初にそれらを通知します。

非推奨と介入に関する DevTools コンソールの警告。
DevTools Console でのブラウザによる警告。

window.onerror がこれらの警告をキャプチャすると考えるのが自然です。実際はそうではなく、これは、ユーザー エージェント自体によって直接生成された警告に対して window.onerror が起動しないためです。コード実行によって発生したランタイム エラー（JavaScript の例外と構文エラー）に対して呼び出されます。

ReportingObserver がその不足分を補います。これにより、非推奨や介入など、ブラウザから発行された警告をプログラムで通知できます。レポートツールとして使用することで、ユーザーがライブサイトで予期しない問題に遭遇しているかどうかを心配する必要がなくなります。

API

ReportingObserver は、IntersectionObserver や ResizeObserver などの他の Observer 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();

フィルタされたレポート

レポートを事前にフィルタして、特定のレポートタイプのみを監視できます。現在、レポートタイプには 'deprecation' と 'intervention' の 2 つがあります。

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['deprecation']});

バッファリングされたレポート

オブザーバー インスタンスが作成される前に生成されたレポートを表示する場合は、buffered: true オプションを使用します。

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

このオプションは、ReportingObserver を使用するライブラリを遅延読み込みする場合などに適しています。オブザーバーは後から追加されますが、ページ読み込みの早い段階で発生したイベントを見逃すことはありません。

監視を停止する

disconnect() メソッドを使用して監視を停止します。

observer.disconnect();

例

ブラウザの介入を分析プロバイダに報告する

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 が JavaScript のあらゆる種類の問題をキャッチするためのデファクト API になることを期待しています。アプリで発生するすべてのエラーを キャッチする API があるとします

その他のリソース:

ヒーロー画像: Sieuwert Otterloo、Unsplash より。