ReportingObserver：瞭解程式碼健康狀態

沃爾頓 (Philip Walton)
Philip Walton
Twitter GitHub 首頁

重點摘要

鎮有新的觀察者！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。window.onerror 和 window.onunhandledrejection 等其他 API 還會在發生問題時通知我們。

然而，這些現有的 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 擷取各種問題，想像一個 API 可以找出應用程式中所有問題：

我也很期待看到能將 ReportingObserver 整合至工作流程的工具。當您執行「避免已淘汰的 API」稽核時，Lighthouse 是一種已標記瀏覽器已淘汰的工具範例：

針對使用已淘汰 API 的 Lighthouse 稽核，可以使用 ReportingObserver。
針對使用已淘汰 API 的 Lighthouse 稽核，可以使用 ReportingObserver。

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

其他資源：