TL;DR
小鎮吸引了新的觀察者!ReportingObserver
是新的 API
你的網站
瀏覽器介入措施:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
回呼可用來將報表傳送給後端或分析服務供應商 以便進一步分析
為什麼這個實用?在此之前
介入措施警告只能在開發人員工具中顯示做為控制台訊息。
尤其是,幹預行動只會由各種實際限制所觸發
例如裝置和網路狀況因此,您可能根本不會看到這些訊息
本機開發/測試期間。「ReportingObserver
」提供
能解決這個問題當使用者遇到潛在問題時
我們就會發送通知
簡介
不久前,我寫了一篇網誌文章 (「觀察你的網頁應用程式」)
因為我發現可以利用多少 API 監控
「stuff」是您在網頁應用程式中進行的事舉例來說,有些 API 可以觀察
DOM 相關資訊:ResizeObserver
、
IntersectionObserver
、MutationObserver
。有一些 API 可用於擷取
成效評估結果:PerformanceObserver
。其他
甚至讓我們知道 window.onerror
和 window.onunhandledrejection
等 API
有助於降低部署錯誤的風險
不過,這些架構不會擷取其他類型的警告 和現有 API 的關聯你的網站使用已淘汰的 API 或執行 切換到瀏覽器介入措施時,開發人員工具會先介紹 相關資訊:
![開發人員工具控制台中有關淘汰和介入措施的警告。](https://developer.chrome.google.cn/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=5&hl=zh-tw)
自然認為 window.onerror
會擷取這些警告,但事實並非如此!
這是因為 window.onerror
不會在出現警告時觸發
直接產生專屬 ID觸發執行階段錯誤
執行程式碼所造成的 (JS 例外狀況和語法錯誤)。
ReportingObserver
拿起袖子。透過程式輔助的方式
瀏覽器發出的警告 (例如淘汰
和介入措施。這項工具可以當做報表工具
睡得更少 思考使用者在直播上是否遇到意料之外的問題
網站。
API
API 與另一種「觀察器」並不相同並介紹 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();
篩選過的報表
報表可以預先篩選,以觀察特定的報表類型:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
緩衝報表
buffered: true
選項非常實用
建立觀察器之前產生的報表:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
如果延遲載入程式庫
ReportingObserver
。觀察器會延遲新增
別錯過之前在網頁載入期間發生的任何情況。
停止觀察
有!以下是 disconnect
方法:
observer.disconnect(); // Stop the observer from collecting reports.
範例
範例 - 向分析服務供應商回報瀏覽器介入措施:
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
能成為 de-facto API
用於擷取所有類型的 JS 問題。想像一個 API 能擷取所有內容
在應用程式中出錯:
- 瀏覽器介入措施
- 淘汰項目
- 違反功能政策的問題。詳情請參閱 crbug.com/867471。
- JS 例外狀況和錯誤 (目前由
window.onerror
提供服務)。 - 未處理的 JS 承諾拒絕 (目前由
window.onunhandledrejection
處理)
我也很期待能將 ReportingObserver
整合到多種工具
工作流程Lighthouse 是一種工具
可以在執行特定作業系統時
「避免遭到淘汰的 API」稽核:
![針對使用已淘汰 API 的 Lighthouse 稽核,則可使用 ReportingObserver。](https://developer.chrome.google.cn/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=5&hl=zh-tw)
Lighthouse 目前採用開發人員工具通訊協定
以抓取控制台訊息,並向開發人員回報這些問題。相反地
建議改用 ReportingObserver
結構完善的淘汰報表和其他中繼資料
anticipatedRemoval
日期。
其他資源: