Tìm các API không dùng nữa trong ứng dụng phát hành chính thức.
ReportingObserver
cho bạn biết khi nào trang web của bạn sử dụng một API không dùng nữa hoặc gặp phải một biện pháp can thiệp vào trình duyệt. Chức năng cơ bản ban đầu có trong Chrome 69. Kể từ Chrome 84, công cụ này có thể được sử dụng trong trình thực thi.
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
console.log(report.type, report.url, report.body);
}
}, {buffered: true});
observer.observe();
Sử dụng lệnh gọi lại để gửi báo cáo cho một phần phụ trợ hoặc nhà cung cấp dịch vụ phân tích nhằm phục vụ mục đích phân tích.
Vì sao việc này hữu ích? Cho đến khi API này ra mắt, các cảnh báo về việc ngừng sử dụng và can thiệp chỉ xuất hiện 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 hạn chế trong thực tế như điều kiện của thiết bị và mạng. Do đó, thậm chí bạn có thể không bao giờ thấy những thông báo này khi phát triển/kiểm thử 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 ngoài đời thực, nhà phát triển web có thể nhận được thông báo về các vấn đề đó.
Thông tin khái quát
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 rất hứng thú với việc có bao nhiêu API để theo dõi "dữ liệu" xảy ra trong một ứng dụng web. Ví dụ: có những API có thể quan sát thông tin về DOM: ResizeObserver
, IntersectionObserver
, MutationObserver
.
PerformanceObserver
thu thập thông tin đo lường hiệu suất. Và các phương thức như
window.onerror
và
window.onunhandledrejection
thậm chí còn cho chúng tôi biết khi có sự cố.
Tuy nhiên, có một số loại cảnh báo khác không được các API hiện tại ghi lại. 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 một biện pháp can thiệp vào trình duyệt, Công cụ cho nhà phát triển là bên đầu tiên cho bạn biết về những API này:
Đương nhiên là window.onerror
sẽ ghi lại những cảnh báo này. thì không.
Lý do là window.onerror
không kích hoạt cho các cảnh báo do chính tác nhân người dùng trực tiếp tạo ra. Trình này kích hoạt các lỗi thời gian chạy (trường hợp ngoại lệ JavaScript và lỗi cú pháp) do việc thực thi mã gây ra.
ReportingObserver
chọn chiếc chùng. 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ư việc ngừng sử dụng và biện pháp can thiệp. Bạn có thể sử dụng tính năng này như một công cụ báo cáo và giảm bớt giấc ngủ khi tự hỏi liệu người dùng có đang gặp phải những vấn đề không mong muốn trên trang web đang hoạt động của bạn hay không.
API
ReportingObserver
không giống các API Observer
khác như IntersectionObserver
và ResizeObserver
. Bạn sẽ gọi lại và 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ạn có thể lọc trước các báo cáo để chỉ tuân theo một số loại báo cáo. Hiện tại,
có 2 loại báo cáo: 'deprecation'
và 'intervention'
.
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['deprecation']});
Báo cáo được lưu vào bộ đệm
Hãy sử dụng tuỳ chọn buffered: true
khi bạn muốn xem các báo cáo đã được tạo trước khi thực thể quan sát được tạo:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Tuỳ chọn này phù hợp với các trường hợp như tải từng phần một thư viện sử dụng ReportingObserver
. Trình quan sát được thêm vào muộn, nhưng bạn khô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
Ngừng quan sát bằng cách sử dụng phương thức disconnect()
:
observer.disconnect();
Ví dụ
Báo cáo cho nhà cung cấp phân tích các biện pháp can thiệp vào trình duyệt
const observer = new ReportingObserver((reports, observer) => {
for (const report of reports) {
sendReportToAnalytics(JSON.stringify(report.body));
}
}, {types: ['intervention'], buffered: true});
observer.observe();
Nhận được 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 một cách bổ sung để phát hiện và theo dõi các vấn đề tiềm ẩn trong ứng dụng web. Đây thậm chí còn là một công cụ hữu ích để hiểu rõ tình trạng của cơ sở mã (hoặc thiếu thông tin về trạng thái của cơ sở mã). Gửi báo cáo cho máy chủ phụ trợ, nắm được các vấn đề thực tế, cập nhật mã, lợi nhuận!
Công việc trong tương lai
Trong tương lai, tôi hy vọng ReportingObserver
sẽ trở thành API thực tế để phát hiện mọi loại vấn đề trong JavaScript. Hãy tưởng tượng một API giúp phát hiện mọi sự cố trong ứng dụng của bạn:
- Các biện pháp can thiệp vào trình duyệt
- Ngừng sử dụng
- Lỗi vi phạm Chính sách về tính năng. Xem Vấn đề #867471.
- Các lỗi và ngoại lệ về JS (hiện do
window.onerror
cung cấp). - Các từ chối lời hứa hẹn của JS chưa được xử lý (hiện được
window.onunhandledrejection
cung cấp)
Tài nguyên bổ sung:
Hình ảnh chính của Sieuwert Otterloo trên Unsplash.