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 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) 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! 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.
Cảnh báo do trình duyệt khởi tạo trong Bảng điều khiển công cụ cho nhà phát triển.

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:

Tài nguyên khác:

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