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 が提供する機能 いくつかあります。実際にユーザーに問題が発生したら 通知を受け取ることができます。

はじめに

少し前に、私はブログ記事「ウェブアプリの観察」を書きました。 モニタリング用の API がたくさんあるので 「もの」ウェブ アプリケーションで発生する問題です。たとえば、ファイアウォール ルールの DOM に関する情報: ResizeObserver、 IntersectionObserver、MutationObserver。キャプチャに使用する API は、 パフォーマンスの測定: PerformanceObserver。その他 window.onerror や window.onunhandledrejection などの API による情報の取得も可能 便利です。

ただし、これらのイベントでは捕捉されない他の種類の警告もあります。 できます。非推奨の API をサイトで使用している、 ブラウザの介入に対処するために、DevTools によって 概要です。

</ph>

このような警告は window.onerror がキャプチャすると考えるのが自然です。いいえ。 これは、window.onerror が警告で起動しないためです。 直接生成されたものです。ランタイム エラーで起動する （JS 例外と構文エラー）が原因で発生することがあります。

ReportingObserver はスラックを補います。プログラマティックな方法で ブラウザが発行した警告（非推奨など）についての通知 および介入です。レポートツールとして使用して ライブ配信中にユーザーが予期せぬ問題に遭遇していないか疑問に思って睡眠時間が減る サイトをご覧ください。

API

この API は他の「オブザーバー」と変わらないたとえば、 IntersectionObserver、ResizeObserver など。そしてコールバックを指定します。 情報が得られます。コールバックが受け取る情報は、 ページが原因で発生した問題のリスト:

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 が事実上の API になることを期待しています。 多くの機能を備えています1 つの API があらゆるものを捕捉し 次のような問題があります

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

また、ReportingObserver を 構築できますLighthouse は、 ブラウザのサポート終了のフラグが立てられています。 「非推奨の API の回避」監査：

</ph>

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

参考情報:

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