ReportingObserver：瞭解程式碼健康狀態

Philip Walton

TL;DR

小鎮吸引了新的觀察者！ReportingObserver 是新的 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 監控 「stuff」是您在網頁應用程式中進行的事舉例來說，有些 API 可以觀察 DOM 相關資訊：ResizeObserver、 IntersectionObserver、MutationObserver。有一些 API 可用於擷取 成效評估結果：PerformanceObserver。其他 甚至讓我們知道 window.onerror 和 window.onunhandledrejection 等 API 有助於降低部署錯誤的風險

不過，這些架構不會擷取其他類型的警告 和現有 API 的關聯你的網站使用已淘汰的 API 或執行 切換到瀏覽器介入措施時，開發人員工具會先介紹 相關資訊：

開發人員工具控制台中有關淘汰和介入措施的警告。
開發人員工具控制台中瀏覽器引發的警告。

自然認為 window.onerror 會擷取這些警告，但事實並非如此！ 這是因為 window.onerror 不會在出現警告時觸發 直接產生專屬 ID觸發執行階段錯誤 執行程式碼所造成的 (JS 例外狀況和語法錯誤)。

ReportingObserver拿起袖子。透過程式輔助的方式 瀏覽器發出的警告 (例如淘汰 和介入措施。這項工具可以當做報表工具 睡得更少 思考使用者在直播上是否遇到意料之外的問題 網站。

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

緩衝報表

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 能成為 de-facto API 用於擷取所有類型的 JS 問題。想像一個 API 能擷取所有內容 在應用程式中出錯：

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

我也很期待能將 ReportingObserver 整合到多種工具 工作流程Lighthouse 是一種工具 可以在執行特定作業系統時 「避免遭到淘汰的 API」稽核：

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

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

其他資源：