このページは Cloud Translation API によって翻訳されました。

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

注: ReportingObserver は Chrome 69 でのみ出荷されます。検討対象他のブラウザで利用できます。

はじめに

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

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

DevTools コンソールでの非推奨と介入に関する警告。 — DevTools コンソールでのブラウザから開始された警告。

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

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

重要な用語: ReportingObserver は大規模な仕様である Reporting API の一部です。これは、さまざまなレポートをバックエンドに送信する共通の方法です。 Reporting API は基本的に、一連のサーバーとサーバーを問題を報告できます。

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']});

重要な用語: 現在、'deprecation' と 'intervention' の 2 種類のレポートがあります。

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

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 の回避」監査：

サポートが終了した API を使用するための Lighthouse 監査には、ReportingObserver を使用できます。 — 非推奨の API を使用するための Lighthouse 監査には、ReportingObserver を使用できます。

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

参考情報: