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 thời điểm trang web của bạn sử dụng API không được dùng nữa hoặc gặp phải
sự can thiệp của 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 dịch vụ phụ trợ hoặc phân tích để phân tích thêm.
Vì sao việc này hữu ích? Cho đến nay, việc ngừng sử dụng và
cảnh báo 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 biệt, các hoạt động can thiệp chỉ được kích hoạt bởi nhiều hạn chế trong thế giới thực
chẳng hạn như tình trạng thiết bị và mạng. Do đó, có thể bạn
thậm chí 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 hoạt động đó.
Giới thiệu
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")
bởi 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
,
MutationObserver
, IntersectionObserver
. Có các API để ghi lại
đo lường hiệu suất: PerformanceObserver
. Lý do khác
Các API 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ó 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 vấn đề dựa vào 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ề chúng:
![Cảnh báo về việc ngừng sử dụng và can thiệp trong bảng điều khiển của Công cụ cho nhà phát triển.](https://developer.chrome.com/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=9&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. Không!
Đó là vì window.onerror
không kích hoạt khi có cảnh báo
do chính tác nhân người dùng tạo ra trực tiếp. Tệp này sẽ kích hoạt để báo lỗi thời gian chạy
(các 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. 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à các biện pháp can thiệp. Bạn có thể dùng hồ sơ này làm công cụ báo cáo
mất ngủ ít hơn vì người dùng có gặp phải các vấn đề không mong muốn trong nội dung phát trực tiếp của bạn
của bạn.
API
API này cũng giống như "trình quan sát" khác Các API như
dưới dạng IntersectionObserver
và ResizeObserver
. Bạn sẽ gọi lại;
thì nó sẽ 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});
Đây là giải pháp phù hợp cho các tình huống 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
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
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 để 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ó mã). Gửi báo cáo đến một chương trình phụ trợ,
về những vấn đề thực tế mà người dùng đang gặp phải trên trang web của bạn, hãy 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 phi sự thật
để phát hiện mọi loại vấn đề trong JS. 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. Hãy truy cập vào crbug.com/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 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ờ việc ngừng sử dụng trình duyệt khi bạn chạy
"Tránh dùng các API không dùng nữa" kiểm tra:
![Quá trình kiểm tra Lighthouse để sử dụng các API không dùng nữa có thể dùng ReportingObserver.](https://developer.chrome.com/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=9&hl=vi)
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 có thể muốn chuyển sang ReportingObserver
để 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: