TL;DR
Có một người quan sát mới trong thị trấn! ReportingObserver là một API mới cho phép bạn biết khi nào trang web của bạn sử dụng API không dùng nữa hoặc gặp phải sự can thiệp vào trình duyệt:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
},
{buffered: true}
);
observer.observe();
Bạn có thể sử dụng lệnh gọi lại để gửi báo cáo đến một nhà cung cấp phần phụ trợ hoặc nhà cung cấp phân tích nhằm phân tích thêm.
Vì sao việc này hữu ích? Cho đến nay, các cảnh báo về việc ngừng sử dụng và can thiệp chỉ có trong Công cụ cho nhà phát triển dưới dạng thông báo trên bảng điều khiển.
Cụ thể, các hoạt động can thiệp chỉ được kích hoạt bởi nhiều điều kiện ràng buộc trong thực tế như điều kiện thiết bị và mạng. Do đó, bạn thậm chí có thể không bao giờ thấy những thông báo này khi phát triển/thử nghiệm một trang web cục bộ. ReportingObserver cung cấp
giải pháp cho vấn đề này. Khi người dùng gặp phải các vấn đề tiềm ẩn, chúng tôi có thể được thông báo về các vấn đề đó.
Giới thiệu
Cách đây không lâu, tôi đã viết một bài đăng trên blog ("Quan sát ứng dụng web của bạn") vì tôi thấy thú vị về số lượng API để theo dõi "nội dung" xảy ra trong ứng dụng web. Ví dụ: có các API có thể quan sát thông tin về DOM: ResizeObserver, IntersectionObserver, MutationObserver. Có các API để ghi lại dữ liệu đo lường hiệu suất: PerformanceObserver. Các API khác như window.onerror và window.onunhandledrejection thậm chí còn thông báo cho chúng tôi khi xảy ra sự cố.
Tuy nhiên, có những loại cảnh báo khác mà các API hiện có này không ghi nhận được. Khi trang web của bạn sử dụng một API không dùng nữa hoặc gặp phải sự can thiệp của trình duyệt, trước tiên, Công cụ cho nhà phát triển sẽ cho bạn biết về API đó:
Tất nhiên, người dùng sẽ cho rằng window.onerror ghi lại các cảnh báo này. Không!
Đó là vì window.onerror không kích hoạt các cảnh báo do chính tác nhân người dùng tạo ra trực tiếp. Nó kích hoạt các lỗi thời gian chạy (ngoại lệ JS và lỗi cú pháp) do thực thi mã của bạn.
ReportingObserver cầm dây đeo. API này cung cấp một cách có lập trình để nhận thông báo về các cảnh báo do trình duyệt đưa ra, chẳng hạn như ngừng sử dụng và biện pháp can thiệp. Bạn có thể sử dụng API này như một công cụ báo cáo và giảm bớt tình trạng mất ngủ khi người dùng đang gặp phải các vấn đề không mong muốn trên trang web đang hoạt động của bạn.
API
API này không giống như các API "trình quan sát" khác, chẳng hạn như IntersectionObserver và ResizeObserver. Bạn gọi lại cho phương thức này; phương thức này cung cấp thông tin cho bạn. Thông tin mà lệnh gọi lại nhận được là danh sách các vấn đề mà trang gây ra:
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();
Báo cáo được lọc
Báo cáo có thể được lọc sơ để chỉ quan sát một số loại báo cáo nhất định:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['deprecation']});
Báo cáo lưu vào bộ đệm
Tuỳ chọn buffered: true thực sự hữu ích khi bạn muốn xem các báo cáo được tạo trước khi tạo trình quan sát:
const observer = new ReportingObserver((reports, observer) => {
...
}, {types: ['intervention'], buffered: true});
Phương thức này rất phù hợp trong các trường hợp như tải từng phần một thư viện sử dụng ReportingObserver. Đối tượng tiếp nhận dữ liệu được thêm vào muộn, nhưng bạn đừng bỏ lỡ bất kỳ điều gì đã xảy ra trước đó trong quá trình tải trang.
Ngừng quan sát
Có! Có phương thức disconnect:
observer.disconnect(); // Stop the observer from collecting reports.
Ví dụ
Ví dụ – báo cáo biện pháp can thiệp của trình duyệt cho nhà cung cấp phân tích:
const observer = new ReportingObserver(
(reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
},
{types: ['intervention'], buffered: true}
);
observer.observe();
Ví dụ – nhận thông báo khi các API sắp bị xoá:
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();
Kết luận
ReportingObserver cung cấp cho bạn thêm một cách để phát hiện và theo dõi các vấn đề tiềm ẩn trong ứng dụng web của mình. Đây thậm chí còn là một công cụ hữu ích giúp bạn tìm hiểu tình trạng của cơ sở mã (hoặc không có các vấn đề đó). Gửi báo cáo đến phần phụ trợ, biết các vấn đề thực tế mà người dùng đang gặp phải trên trang web của bạn, cập nhật mã, thu lợi!
Công việc trong tương lai
Trong tương lai, tôi hy vọng rằng ReportingObserver sẽ trở thành API mặc định để phát hiện mọi loại vấn đề trong JS. Hãy tưởng tượng một API có thể phát hiện mọi sự cố trong ứng dụng của bạn:
- Biện pháp can thiệp của trình duyệt
- Ngừng sử dụng
- Vi phạm Chính sách về tính năng. Hãy truy cập vào crbug.com/867471.
- Ngoại lệ và lỗi JS (hiện được
window.onerrorphục vụ). - Từ chối lời hứa JS chưa được xử lý (hiện do
window.onunhandledrejectioncung cấp)
Tôi cũng rất thích các công cụ tích hợp ReportingObserver vào
quy trình làm việc của họ. Lighthouse là một ví dụ về một công cụ đã gắn cờ ngừng sử dụng trình duyệt khi bạn chạy bài kiểm tra "Tránh các API không được dùng nữa":
Lighthouse hiện sử dụng giao thức DevTools để trích xuất thông báo trên bảng điều khiển và báo cáo các vấn đề này cho nhà phát triển. Thay vào đó, bạn nên chuyển sang ReportingObserver để xem các báo cáo về việc ngừng sử dụng có cấu trúc rõ ràng và siêu dữ liệu bổ sung như ngày anticipatedRemoval.
Tài nguyên khác: