在正式版應用程式中找出已淘汰的 API。
如果網站使用已淘汰的 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 的相關資訊:ResizeObserver
、IntersectionObserver
、MutationObserver
。PerformanceObserver
會擷取效能評估結果。以及 window.onerror
和 window.onunhandledrejection
等方法,即使發生問題時也能通知我們。
然而,現有 API 不會擷取其他類型的警告。如果您的網站使用已淘汰的 API,或發生瀏覽器幹預的情況,DevTools 就會先通知您:
我們自然認為 window.onerror
會擷取這些警告。不會。
這是因為 window.onerror
不會針對使用者代理程式本身直接產生的警告觸發。程式碼執行所產生的執行階段錯誤 (JavaScript 例外狀況和語法錯誤) 就會觸發。
ReportingObserver
叫車司機。這能透過程式輔助的方式,接收瀏覽器發出的警告通知,例如淘汰和介入措施。您可以將其做為報表工具使用,不必擔心使用者在網站上遇到未預期的問題。
API
ReportingObserver
與 IntersectionObserver
和 ResizeObserver
等其他 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 可以找出應用程式中所有問題:
- 瀏覽器介入措施
- 淘汰項目
- 違反功能政策的行為。請參閱 Chromium 問題 #867471。
- JS 例外狀況和錯誤 (目前由「
window.onerror
」服務)。 - 未處理的 JS 承諾遭拒 (目前由
window.onunhandledrejection
提供服務)
其他資源:
Unsplash 上的 Sieuwert Otterloo 提供的主頁橫幅。