透過 ReportingObserver API 瞭解程式碼健康狀態

在正式版應用程式中找出已淘汰的 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 之前，停用和介入警告只能在開發人員工具中以控制台訊息顯示。特別是，幹預機制只會由各種實際限制所觸發，例如裝置和網路狀況。因此，您在本機開發/測試網站時，可能永遠不會看到這些訊息。ReportingObserver 提供解決這個問題的方法。當使用者遇到潛在問題時，網頁程式開發人員會收到通知。

背景

不久前，我撰寫了一篇網誌文章 (Observing your web app)，因為我發現有許多 API 可用於監控網頁應用程式中的「內容」。舉例來說，以下 API 可用於監控 DOM 相關資訊：ResizeObserver、IntersectionObserver、MutationObserver。PerformanceObserver 會擷取效能測量結果。window.onerror 和 window.onunhandledrejection 等方法甚至會在發生錯誤時通知我們。

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

開發人員工具控制台警告 (淘汰和介入)。
開發人員工具控制台中的瀏覽器啟動警告。

自然認為 window.onerror 會擷取這些警告，但實際上不需要。這是因為 window.onerror 不會針對使用者代理程式本身直接產生的警告觸發。當程式碼執行作業導致執行階段錯誤 (JavaScript 例外狀況和語法錯誤) 時，系統會觸發此事件。

ReportingObserver 會接手處理。還能透過程式輔助方式，接收瀏覽器發出的警告 (例如淘汰和幹預通知)。您可以將這項工具做為報表工具，不用再擔心使用者在實際網站上遇到意外問題。

API

ReportingObserver 與其他 Observer 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();

篩選報表

報表可以預先篩選，只觀察特定報表類型。目前有兩種報表類型：'deprecation' 和 'intervention'。

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 能成為實際的 API，用於擷取 JavaScript 中的所有問題。假設使用一個 API 可擷取應用程式中所有問題：

其他資源：

主頁橫幅由 Unsplash 提供 Sieuwert Otterloo。