本番環境のアプリで非推奨の API を見つけます。
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 には ResizeObserver
、IntersectionObserver
、MutationObserver
があります。PerformanceObserver
は、パフォーマンス測定値をキャプチャします。また、window.onerror
や window.onunhandledrejection
などのメソッドは、問題が発生したときに Google に知らせることもできます。
ただし、既存の API ではキャプチャされない種類の警告もあります。非推奨の API がサイトで使用されていたり、ブラウザの介入が動作した場合、DevTools では最初に通知されます。
当然ながら、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 を 1 つ想像してみてください。
- ブラウザ介入
- サポートの終了
- 機能ポリシーへの違反。Chromium の問題 #867471 をご覧ください。
- JavaScript の例外とエラー(現在は
window.onerror
が対応) - 未処理の JS Promise 拒否(現在
window.onunhandledrejection
が対応)
その他のリソース: