ReportingObserver: sprawdzanie stanu kodu

Philip Walton

TL;DR

Pojawił się nowy obserwator! ReportingObserver to nowy interfejs API, który informuje, kiedy witryna używa wycofanego interfejsu API lub gdy następuje interwencja przeglądarki:

const observer = new ReportingObserver(
  (reports, observer) => {
    for (const report of reports) {
      console.log(report.type, report.url, report.body);
    }
  },
  {buffered: true}
);

observer.observe();

Wywołanie zwrotne może służyć do wysyłania raportów do backendu lub dostawcy usług analitycznych w celu dalszej analizy.

Dlaczego jest to przydatne? Do tej pory ostrzeżenia o wycofaniu i interwencji były dostępne tylko w Narzędziach deweloperskich jako komunikaty w konsoli. Interwencje są wywoływane wyłącznie przez różne rzeczywiste ograniczenia, takie jak warunki urządzenia i sieci. Możliwe więc, że nigdy nie zobaczysz takich komunikatów podczas lokalnego programowania/testowania. Rozwiązaniem tego problemu jest ReportingObserver. Gdy użytkownicy napotkają potencjalne problemy w środowisku naturalnym, możemy nas o nich powiadomić.

Wstęp

Jakiś czas temu opublikowałem posta na blogu („Obserwowanie aplikacji internetowej”), ponieważ fascynujące jest, ile jest interfejsów API do monitorowania „rzeczy”, które mają miejsce w aplikacjach internetowych. Istnieją na przykład interfejsy API, które mogą obserwować informacje o DOM: ResizeObserver, IntersectionObserver, MutationObserver. Dostępne są interfejsy API do pomiaru skuteczności: PerformanceObserver. Inne interfejsy API, takie jak window.onerror czy window.onunhandledrejection, informują nas nawet, gdy coś poszło nie tak.

Istnieją jednak inne typy ostrzeżeń, które nie są przechwytywane przez te istniejące interfejsy API. Gdy w Twojej witrynie zostanie użyty wycofany interfejs API lub nastąpi interwencja przeglądarki, Narzędzia deweloperskie jako pierwsze informują o takich interfejsach:

Ostrzeżenia w konsoli Narzędzi deweloperskich dotyczące wycofania i interwencji.
Ostrzeżenia inicjowane przez przeglądarkę w konsoli Narzędzi deweloperskich.

Można by pomyśleć, że window.onerror rejestruje te ostrzeżenia. Nie. Wynika to z faktu, że tag window.onerror nie uruchamia się w przypadku ostrzeżeń wygenerowanych bezpośrednio przez klienta użytkownika. Uruchamia się w przypadku błędów czasu działania (wyjątków JS i błędów składni) spowodowanych wykonaniem kodu.

ReportingObserver podtrzymuje schowek. Pozwala w zautomatyzowany sposób otrzymywać powiadomienia o ostrzeżeniach wyświetlanych przez przeglądarkę, na przykład o wycofaniach czy interwencjach. Możesz go używać jako narzędzia do zgłaszania naruszeń, a będziesz spać mniej, nie zastanawiając się, czy użytkownicy natrafiają na nieoczekiwane problemy w Twojej witrynie.

Interfejs API

Nie różni się on od innych interfejsów API „observer” (takich jak IntersectionObserver i ResizeObserver). Ktoś do Ciebie zadzwonił i uzyska informacje. Informacje otrzymane przez wywołanie zwrotne to lista problemów, które spowodowały strona:

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();

Filtrowane raporty

Raporty można wstępnie filtrować, aby obserwować tylko niektóre typy raportów:

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

Buforowane raporty

Opcja buffered: true jest bardzo przydatna, gdy chcesz zobaczyć raporty wygenerowane przed utworzeniem obserwatora:

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

Przydaje się to na przykład w przypadku leniwego ładowania biblioteki, która korzysta z interfejsu ReportingObserver. Obserwator jest dodawany z opóźnieniem, ale nie przeoczysz niczego, co wydarzyło się na wcześniejszym etapie wczytywania strony.

Przestań obserwować

Tak! Zawiera metodę disconnect:

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

Przykłady

Przykład – zgłoś interwencje dotyczące przeglądarek dostawcy usług analitycznych:

const observer = new ReportingObserver(
  (reports, observer) => {
    for (const report of reports) {
      sendReportToAnalytics(JSON.stringify(report.body));
    }
  },
  {types: ['intervention'], buffered: true}
);

observer.observe();

Przykład – otrzymasz powiadomienie, gdy interfejsy API zostaną usunięte:

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();

Podsumowanie

ReportingObserver zapewnia dodatkowy sposób wykrywania i monitorowania potencjalnych problemów z aplikacją internetową. Jest nawet przydatnym narzędziem do sprawdzania stanu bazy kodu (lub jej braku). Przesyłaj raporty do backendu, poznaj rzeczywiste problemy, z którymi użytkownicy spotykają się w Twojej witrynie, aktualizuj kod, zyskuj!

Praca w przyszłości

Mam nadzieję, że w przyszłości ReportingObserver stanie się interfejsem API defacto do wykrywania wszelkich problemów w JS. Wyobraź sobie jeden interfejs API, który przechwytuje wszystko, co pójdzie nie tak:

Cieszę się też, że udało mi się zintegrować ReportingObserver z przepływami pracy w firmie. Lighthouse to przykład narzędzia, które już zgłasza wycofane przeglądarki po przeprowadzeniu kontroli „Unikanie wycofanych interfejsów API”:

Audyt Lighthouse dotyczący użycia wycofanych interfejsów API może korzystać z funkcji ReportingObserver.
W audycie Lighthouse dotyczącym korzystania z wycofanych interfejsów API można było użyć narzędzia ReportingObserver.

Lighthouse obecnie używa protokołu Narzędzi deweloperskich do pobierania komunikatów z konsoli i zgłaszania tych problemów deweloperom. Zamiast tego warto przejść na ReportingObserver, aby mieć dostęp do dobrze uporządkowanych raportów o wycofaniu i dodatkowych metadanych, takich jak anticipatedRemovaldata.

Dodatkowe materiały: