Biết được tình trạng của mã bằng API ReportingObserver

Tìm các API không dùng nữa trong ứng dụng phát hành công khai.

ReportingObserver cho bạn biết 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 biện pháp can thiệp của trình duyệt. Chức năng cơ bản ban đầu đã có trong Chrome 69. Kể từ Chrome 84, bạn có thể sử dụng API 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 phần phụ trợ hoặc nhà cung cấp dịch vụ phân tích để phân tích.

Tại sao việc này lại hữu ích? Trước khi có 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ể, các biện pháp can thiệp chỉ được kích hoạt bởi nhiều quy tắc 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 trên máy. 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 trong thực tế, nhà phát triển web có thể được thông báo về các vấn đề đó.

Thông tin khái quát

Cách đây một thời gian, 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 thú vị khi có nhiều API để theo dõi "nội dung" xảy ra trong một ứng dụng web. Ví dụ: có các API có thể quan sát thông tin về DOM: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver ghi lại các kết quả đ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 ta biết khi có sự cố xảy ra.

Tuy nhiên, có những loại cảnh báo khác không được các API hiện có 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 biện pháp can thiệp của trình duyệt, Công cụ cho nhà phát triển sẽ là công cụ đầu tiên thông báo cho bạn về những vấn đề đó:

Cảnh báo của Bảng điều khiển Công cụ cho nhà phát triển về việc ngừng sử dụng và can thiệp.
Cảnh báo do trình duyệt đưa ra trong Bảng điều khiển Công cụ cho nhà phát triển.

Thông thường, người ta sẽ nghĩ rằng window.onerror ghi lại những cảnh báo này. Không. Đó là vì 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 tạo ra. Trình kích hoạt này kích hoạt cho các lỗi thời gian chạy (ngoại lệ JavaScript và lỗi cú pháp) do việc thực thi mã gây ra.

ReportingObserver sẽ đảm nhận phần việc còn lại. 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à can thiệp. Bạn có thể dùng công cụ này làm công cụ báo cáo và bớt lo lắng về việc người dùng gặp phải vấn đề ngoài dự kiến trên trang web đang hoạt động của bạn.

API

ReportingObserver không giống như các API Observer khác, chẳng hạn như IntersectionObserver và ResizeObserver. Bạn cung cấp cho nó một lệnh gọi lại; nó cung cấp cho bạn thông tin. 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 đã lọc

Bạn có thể lọc trước báo cáo để chỉ xem một số loại báo cáo nhất định. Hiện tại, có hai 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ộ nhớ đệ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 thực thể trình quan sát:

const observer = new ReportingObserver((reports, observer) => {
  …
}, {types: ['intervention'], buffered: true});

Lựa chọn này rất phù hợp cho những 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 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.

Dừng quan sát

Ngừng quan sát bằng phương thức disconnect():

observer.disconnect();

Ví dụ

Báo cáo các biện pháp can thiệp của trình duyệt cho nhà cung cấp dịch vụ 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 một cách khác để khám phá và theo dõi các vấn đề tiềm ẩn trong ứng dụng web của bạn. Đây thậm chí còn là một công cụ hữu ích để tìm hiểu tình trạng của toàn bộ mã nguồn (hoặc thiếu toàn bộ mã nguồn). Gửi báo cáo đến phần phụ trợ, tìm hiểu về các vấn đề thực tế, cập nhật mã, thu 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 tất cả các loại vấn đề trong JavaScript. Hãy tưởng tượng một API có thể phát hiện mọi vấn đề xảy ra trong ứng dụng của bạn:

Tài nguyên khác:

Hình ảnh chính của Sieuwert Otterloo trên Unsplash.