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

在正式版應用程式中找出已淘汰的 API。

Eric Bidelman

如果網站使用已淘汰的 API,或發生瀏覽器介入情形ReportingObserver 會通知你。基本功能原本是 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 提供解決這個問題的方法。當使用者遇到大範圍的潛在問題時,網頁程式開發人員就能收到通知。

背景

不久前,我寫了一篇網誌文章 (觀察您的網頁應用程式),因為我發現此文章很吸引人,需要用來監控網頁應用程式的「內容」。舉例來說,某些 API 可觀察 DOM 的相關資訊:ResizeObserverIntersectionObserverMutationObserverPerformanceObserver 會擷取效能評估結果。以及 window.onerrorwindow.onunhandledrejection 等方法,即使發生問題時也能通知我們。

然而,現有 API 不會擷取其他類型的警告。如果您的網站使用已淘汰的 API,或發生瀏覽器幹預的情況,DevTools 就會先通知您:

開發人員工具控制台針對淘汰和介入措施發出警告。
開發人員工具控制台中的瀏覽器發起的警告。

我們自然認為 window.onerror 會擷取這些警告。不會。 這是因為 window.onerror 不會針對使用者代理程式本身直接產生的警告觸發。程式碼執行所產生的執行階段錯誤 (JavaScript 例外狀況和語法錯誤) 就會觸發。

ReportingObserver叫車司機。這能透過程式輔助的方式,接收瀏覽器發出的警告通知,例如淘汰介入措施。您可以將其做為報表工具使用,不必擔心使用者在網站上遇到未預期的問題。

API

ReportingObserverIntersectionObserverResizeObserver 等其他 Observer 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();

篩選過的報表

報表可以預先篩選,只觀察特定報表類型。目前有兩種報表類型:'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 提供的主頁橫幅