ReportingObserver: biết tình trạng mã của bạn

Philip Walton
Philip Walton
Twitter GitHub Trang chủ

TL;DR

Có một người quan sát mới trong thị trấn! ReportingObserver là một API mới giúp bạn biết được thời điểm trang web của bạn sử dụng API không dùng nữa hoặ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) {
      console.log(report.type, report.url, report.body);
    }
  },
  {buffered: true}
);

observer.observe();

Bạn có thể 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 phân tích nhằm phân tích thêm.

Vì sao việc này hữu ích? Cho đến nay, các cảnh báo can thiệp và ngừng sử dụng 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 hoạt động can thiệp chỉ được kích hoạt bởi nhiều hạn chế trong thực tế, chẳng hạn như các đ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ử 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 trong tự nhiên, chúng tôi có thể được thông báo về những vấn đề đó.

Giới thiệu

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 thú vị về 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. Có các API để ghi lại kết quả đo lường hiệu suất: PerformanceObserver. Các API khá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ó những loại cảnh báo khác không được các API hiện có này 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 sự can thiệp vào trình duyệt, trước tiên, Công cụ cho nhà phát triển sẽ cho bạn biết về các API đó:

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

Đương nhiên là window.onerror sẽ ghi lại những cảnh báo này. Không! Nguyên nhân là do 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. API này sẽ kích hoạt các lỗi thời gian chạy (trường hợp ngoại lệ JS và lỗi cú pháp) do việc thực thi mã của bạn 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 trình mô phỏng này như một công cụ báo cáo và tránh tự hỏi liệu người dùng có 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

API này không giống các API "quan sát" khác như IntersectionObserver và ResizeObserver. Bạn sẽ gọi lại để 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 trước để chỉ ghi nhận một số loại báo cáo nhất định:

const observer = new ReportingObserver((reports, observer) => {
  ...
}, {types: ['deprecation']});

Báo cáo được 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 đã tạo trước khi đối tượng tiếp nhận dữ liệu được tạo:

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

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

Có! Hàm này có phương thức disconnect:

observer.disconnect(); // Stop the observer from collecting reports.

Ví dụ

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 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 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. Thậm chí, đây 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 các vấn đề còn thiếu). Gửi báo cáo cho một máy chủ phụ trợ, nắm được các vấn đề thực tế mà người dùng đang gặp phải trên trang web của bạn, 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 thực tế để phát hiện mọi loại vấn đề trong JS. 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:

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ờ trình duyệt không dùng nữa khi bạn chạy bài kiểm tra "Tránh các API không dùng nữa":

Quy trình kiểm tra Lighthouse để sử dụng các API không dùng nữa có thể sử dụng ReportingObserver.
Quá trình kiểm tra bằng Lighthouse sử dụng các API không dùng nữa có thể sử dụng ReportingObserver.

Lighthouse hiện sử dụng giao thức DevTools để thu thập thông báo trên bảng điều khiển và báo cáo vấn đề này cho nhà phát triển. Thay vào đó, bạn nên chuyển sang ReportingObserver để biết các báo cáo về việc ngừng sử dụng có cấu trúc hợp lý và siêu dữ liệu bổ sung như ngày anticipatedRemoval.

Tài nguyên bổ sung: