ReportingObserver:瞭解程式碼健康狀態

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 相關資訊:ResizeObserverIntersectionObserverMutationObserver。有一些 API 可用於擷取 成效評估結果:PerformanceObserver。其他 甚至讓我們知道 window.onerrorwindow.onunhandledrejection 等 API 有助於降低部署錯誤的風險

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

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

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

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

API

API 與另一種「觀察器」並不相同並介紹 API 做為 IntersectionObserverResizeObserver。就給應用程式回呼 會顯示資訊回呼所接收的資訊是 列出網頁造成的問題:

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 日期。

其他資源