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

本番環境のアプリで非推奨の API を見つけます。

Eric Bidelman 氏

ReportingObserver は、非推奨の API がサイトで使用されていたり、ブラウザの介入が開始された際に通知されます。基本機能は Chrome 69 で導入されました。Chrome 84 以降では、Worker で使用できます。

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 には ResizeObserverIntersectionObserverMutationObserver があります。PerformanceObserver は、パフォーマンス測定値をキャプチャします。また、window.onerrorwindow.onunhandledrejection などのメソッドは、問題が発生したときに Google に知らせることもできます。

ただし、既存の API ではキャプチャされない種類の警告もあります。非推奨の API がサイトで使用されていたり、ブラウザの介入が動作した場合、DevTools では最初に通知されます。

サポート終了と介入に関する DevTools Console の警告
DevTools コンソールのブラウザの開始型の警告

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

ReportingObserver がリラックス。この機能は、ブラウザによる警告(サポート終了介入など)をプログラムで通知する手段を提供します。これをレポートツールとして使用すると、公開サイトでユーザーが予期せぬ問題に直面していないかという不安を抱くことが減ります。

API

ReportingObserver は、IntersectionObserverResizeObserver などの他の 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 を 1 つ想像してみてください。

その他のリソース:

Sieuwert Otterloo 氏(Unsplash)のヒーロー画像