Trang này được dịch bởi Cloud Translation API.

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

Philip Walton

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 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 đó.

Lưu ý: ReportingObserver chỉ mới được phát hành trong Chrome 69. Đang được xem xét bởi các trình duyệt khác.

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") 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. Thông tin 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. — 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. 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.

Từ khoá quan trọng: ReportingObserver là một phần của thông số kỹ thuật lớn hơn, đó là API Báo cáo, cung cấp một cách thức phổ biến để gửi các báo cáo khác nhau này đến một chương trình phụ trợ. API Báo cáo về cơ bản là một khung chung để chỉ định một tập hợp máy chủ điểm cuối để báo cáo vấ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']});

Từ khoá quan trọng: Hiện tại, có hai loại báo cáo: 'deprecation' và 'intervention'.

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.

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: