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

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

網站使用已淘汰 API 或執行時，ReportingObserver 會通知你 轉變成瀏覽器介入措施。基本功能 Chrome 69 版。自 Chrome 第 84 版起，這項功能可用於工作站。

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 監控 「stuff」是您在網頁應用程式中進行的事舉例來說，有些 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 成為 在 JavaScript 中擷取所有類型的問題。想像一個 API 能擷取所有內容 在應用程式中出錯：

其他資源：

主頁橫幅製作者： 奧特魯 (Sieuwert Otterloo) Unsplash 頁面。