Tìm các API không dùng nữa trong ứng dụng chính thức của bạn.
ReportingObserver
cho 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 chạy
thành một biện pháp can thiệp của trình duyệt. Chức năng cơ bản ban đầu
đã hạ cánh trên Chrome 69. Kể từ Chrome 84, bạn có thể sử dụng tiện ích này trong worker.
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 đến một phần phụ trợ hoặc nhà cung cấp phân tích cho bản phân tích.
Vì sao việc này hữu ích? Cho đến API này, 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ể là các biện pháp can thiệp
chỉ được kích hoạt bởi nhiều hạn chế trong thực tế như thiết bị và mạng
. Do đó, có thể bạn thậm chí không bao giờ thấy các thông báo này khi phát triển/thử nghiệm
cục bộ trên một trang web. ReportingObserver
cung cấp một giải pháp cho vấn đề này. Thời gian
người dùng gặp phải các vấn đề tiềm ẩn, nhà phát triển web có thể được thông báo
về họ.
Thông tin khái quát
Cách đây không lâu, tôi có 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ật thú vị khi có bao nhiêu API để theo dõi
"nội dung" xảy ra trong ứng dụng web. Ví dụ: có những API có thể quan sát
thông tin về DOM:
ResizeObserver
!
IntersectionObserver
,
MutationObserver
PerformanceObserver
ghi lại các số liệu đ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 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 không được các API hiện có. Khi 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 của trình duyệt, thì Công cụ cho nhà phát triển là công cụ đầu tiên cho bạn biết về chúng:
![Cảnh báo về việc ngừng sử dụng và can thiệp trên Bảng điều khiển của Công cụ cho nhà phát triển.](https://developer.chrome.com/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=5&hl=vi)
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. Tuy nhiên, việc này thì không.
Đó là vì window.onerror
không kích hoạt cho các cảnh báo được tạo trực tiếp bởi
tác nhân người dùng. Tệp này kích hoạt cho các lỗi thời gian chạy (ngoại lệ về JavaScript và
lỗi cú pháp) do thực thi mã.
ReportingObserver
cầm dây đeo. Công cụ này cung cấp cách có lập trình để
thông báo về các cảnh báo do trình duyệt phát hành như ngừng sử dụng và
sự can thiệp. Bạn có thể dùng báo cáo này làm công cụ báo cáo và giảm bớt doanh số
tự hỏi liệu người dùng có đ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 hay không.
API
ReportingObserver
không giống như các API Observer
khác, chẳng hạn như
IntersectionObserver
và ResizeObserver
. Bạn sẽ gọi lại; nó mang lại
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 sự cố
mà trang này đã 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 báo cáo để chỉ quan sát một số loại báo cáo nhất định. Ngay bây giờ,
có hai loại báo cáo: 'deprecation'
và 'intervention'
.
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['deprecation']});
Báo cáo lưu vào bộ đệm
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 tạo bản sao trình quan sát:
const observer = new ReportingObserver((reports, observer) => {
…
}, {types: ['intervention'], buffered: true});
Tuỳ chọn này phù hợp cho các trường hợp như tải từng phần 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 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 biện pháp can thiệp vào 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();
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 để khám phá và theo dõi
các vấn đề tiềm ẩn trong ứng dụng web của bạn. Công cụ này thậm chí còn là một công cụ hữu ích để hiểu
tình trạng của cơ sở mã (hoặc không có cơ sở mã). Gửi báo cáo đến một chương trình phụ trợ (nếu có)
về 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 rằng ReportingObserver
sẽ trở thành API trên thực tế cho
phát hiện mọi loại sự cố trong JavaScript. Hãy tưởng tượng một API có thể nắm bắt mọi thứ
gặp 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. Xem Vấn đề về Chromium #867471.
- Ngoại lệ và lỗi JS (hiện được
window.onerror
phục vụ). - Từ chối lời hứa JS chưa được xử lý (hiện do
window.onunhandledrejection
cung cấp)
Tài nguyên khác:
Hình ảnh chính của Sieuwert Otterloo trên Unsplash.