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();

回呼可用來將報表傳送給後端或分析供應商以進行進一步分析。

為什麼這個實用？目前，開發人員工具中的淘汰和介入措施警告只能以控制台訊息的形式顯示。 尤其是，幹預機制只會由各種實際限制 (例如裝置和網路狀況) 觸發。因此，在本機開發/測試網站時，您甚至可能不會看到這些訊息。ReportingObserver 提供這個問題的解決方案。如果公開遇到潛在問題 我們會通知使用者

簡介

我在不久前撰寫了一篇網誌文章 (「觀察您的網頁應用程式」)，因為發現其中有多少 API 可用來監控網頁應用程式中發生的「內容」。舉例來說，有些 API 可觀察 DOM 相關資訊：ResizeObserver、IntersectionObserver、MutationObserver。以下 API 可用於擷取效能測量結果：PerformanceObserver。其他 API (例如 window.onerror 和 window.onunhandledrejection) 甚至能在發生問題時通知我們。

不過，這些現有 API 不會擷取其他類型的警告。當您的網站使用已淘汰的 API，或因瀏覽器介入措施而執行時，開發人員工具會先告知您相關資訊：

自然認為 window.onerror 會擷取這些警告，但實際上並沒有任何問題！ 這是因為針對使用者代理程式本身直接產生的警告，不會觸發 window.onerror，這項功能會在執行程式碼造成的執行階段錯誤 (JS 例外狀況和語法錯誤) 觸發。

ReportingObserver拿起袖子。還能透過程式，在發生淘汰和幹預等瀏覽器發出的警告時，收到通知。您可將這份報表當做報表工具使用，減少睡眠問題，進而判斷使用者是否在實際網站上遇到非預期問題。

API

API 與 IntersectionObserver 和 ResizeObserver 等其他「觀測器 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();

篩選過的報表

報表可以預先篩選，以觀察特定的報表類型：

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 能夠成為可擷取 JS 所有類型問題的 de-facto API。假設使用一個 API 可擷取應用程式中所有問題：

• 瀏覽器介入措施
• 淘汰項目
• 違反功能政策的問題。詳情請參閱 crbug.com/867471。
• JS 例外狀況和錯誤 (目前由 window.onerror 提供服務)。
• 未處理的 JS 承諾拒絕 (目前由 window.onunhandledrejection 處理)

我也會非常期待透過相關工具將 ReportingObserver 整合到其工作流程中。若是 Lighthouse 工具範例，它會在您執行「避免已淘汰的 API」稽核時，將瀏覽器淘汰標示為淘汰：

Lighthouse 目前使用開發人員工具通訊協定來抓取主控台訊息，並向開發人員回報這些問題。建議您改用 ReportingObserver，以便取得結構完善的淘汰報表和其他中繼資料 (例如 anticipatedRemoval 日期)。

其他資源：

• W3c 規格
• chromestatus.com 項目