透過 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 相關資訊: ResizeObserverIntersectionObserver, MutationObserverPerformanceObserver敬上 擷取資料。還有 window.onerror敬上 和 window.onunhandledrejection。 甚至通知我們發生問題時

不過,其他的警告並不會擷取 和現有 API 的關聯當你的網站使用已淘汰的 API 或針對 開發人員工具 他們可以:

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

自然認為 window.onerror 會擷取這些警告,但事實上不然。 這是因為 window.onerror 不會在直接產生的警告時觸發 使用者代理程式這個事件會觸發執行階段錯誤 (JavaScript 例外狀況和 語法錯誤)。

ReportingObserver拿起袖子。透過程式輔助的方式 瀏覽器發出的警告 (例如淘汰幹預行動。您可以當做報表工具使用,減少損失 可能不知道使用者是否在您的網站上遇到了意料之外的問題。

API

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

篩選過的報表

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