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 についての情報を表示します。 ResizeObserver、 IntersectionObserver, MutationObserver を選択します。 PerformanceObserver パフォーマンスの測定値を取得しますまた、 window.onerror および window.onunhandledrejection 問題が発生したときに 通知を受け取ることができます

ただし、この他にも、 できます。非推奨の API をサイトで使用している、または ブラウザ介入に関して、DevTools は できます。

<ph type="x-smartling-placeholder">
</ph> DevTools コンソールでの非推奨と介入に関する警告。
DevTools コンソールでのブラウザから開始される警告。

このような警告は window.onerror がキャプチャすると考えるのが自然です。いいえ。 これは、window.onerror は、直接生成された警告では呼び出されないためです。 処理します。ランタイム エラー（JavaScript 例外と 構文エラーなど）を検出します。

ReportingObserver はスラックを補います。プログラマティックな方法で ブラウザが発行した警告（非推奨化、 介入。レポートツールとして使用すれば、 公開中のサイトで予期しない問題が発生していないか疑問に思う人もいるでしょう。

API

ReportingObserver は、次のような他の Observer 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();

フィルタしたレポート

特定のレポートタイプのみをモニタリングするように、レポートを事前にフィルタできます。現在、 '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 に関するあらゆる種類の問題を検出できます。1 つの API があらゆるものを捕捉し 次のような問題があります

参考情報:

ヒーロー画像: Sieuwert Otterloo 氏 Unsplash より