Sprawdzanie stanu kodu za pomocą interfejsu ReportingObserver API

Znajdź wycofane interfejsy API w produkcyjnych wersjach aplikacji.

ReportingObserver informuje, gdy Twoja witryna używa przestarzałego interfejsu API lub powoduje interwencję przeglądarki. Podstawowe funkcje zostały wprowadzone w Chrome 69. Od wersji 84 Chrome można używać w procesach worker.

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 umożliwia wysyłanie raportów do backendu lub dostawcy usług analitycznych w celu analizy.

Dlaczego to jest przydatne? Do czasu wprowadzenia tego interfejsu API 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. Dlatego podczas tworzenia i testowania witryny lokalnie możesz nigdy nie zobaczyć tych komunikatów. ReportingObserver zawiera rozwiązanie tego problemu. Gdy użytkownicy napotkają potencjalne problemy w praktyce, deweloperzy mogą o nich otrzymywać powiadomienia.

Tło

Niedawno napisałem wpis na blogu (Obserwowanie aplikacji internetowej), ponieważ zafascynowało mnie, jak wiele interfejsów API służy do monitorowania „rzeczy”, które dzieją się w aplikacji internetowej. Istnieją na przykład interfejsy API, które mogą obserwować informacje o DOM: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver przechwytuje dane dotyczące skuteczności. Takie metody 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ą rejestrowane przez istniejące interfejsy API. Gdy Twoja witryna używa wycofanego interfejsu API lub napotyka problemy z interwencją przeglądarki, DevTools jako pierwsze poinformuje Cię o tych problemach:

ostrzeżenia w konsoli DevTools dotyczące wycofywania i interwencji;
Ostrzeżenia zainicjowane przez przeglądarkę w konsoli Narzędzi deweloperskich.

Można by pomyśleć, że window.onerror zawiera te ostrzeżenia. Nie. Dzieje się tak, ponieważ window.onerror nie uruchamia ostrzeżeń generowanych bezpośrednio przez klienta użytkownika. Wyzwala się w przypadku błędów czasu wykonywania (wyjątków i błędów składni JavaScriptu) spowodowanych przez wykonanie kodu.

ReportingObserver przejmuje odpowiedzialność. Zapewnia ono automatyczny sposób otrzymywania powiadomień o ostrzeżeniach wyświetlanych przez przeglądarkę, takich jak wycofanie i interwencje. Możesz go używać jako narzędzia do raportowania, aby nie spać spokojnie, nie zastanawiając się, czy użytkownicy napotykają nieoczekiwane problemy na Twojej działającej stronie.

Interfejs API

Interfejs ReportingObserver nie różni się od innych interfejsów Observer, takich jak IntersectionObserver i ResizeObserver. Wywołujesz wywołanie zwrotne; uzyskujesz informacje. Informacje, które otrzymuje strona wywołania zwrotnego, to lista problemów, które spowodowała:

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

Odfiltrowane raporty

Raporty można filtrować wstępnie, aby obserwować tylko określone typy raportów. Obecnie dostępne są 2 typy raportów: 'deprecation' i 'intervention'.

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

Buforowane raporty

Użyj opcji buffered: true, aby wyświetlić raporty wygenerowane przed utworzeniem instancji obserwatora:

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

Ta opcja jest przydatna w takich sytuacjach jak wczytywanie opóźnione biblioteki, która używa ReportingObserver. Obserwator jest dodawany późno, ale nie przegapisz niczego, co stało się wcześniej podczas wczytywania strony.

Zatrzymaj obserwację

Przestań obserwować za pomocą metody disconnect():

observer.disconnect();

Przykłady

Zgłaszanie interwencji w przeglądarce dostawcy usługi analitycznej

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

observer.observe();

otrzymywać powiadomienia o usunięciu interfejsów API;

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 to dodatkowy sposób na wykrywanie i monitorowanie potencjalnych problemów w aplikacji internetowej. Jest to też przydatne narzędzie do sprawdzania stanu kodu źródłowego (lub jego braku). Wysyłanie raportów do backendu, poznawanie rzeczywistych problemów, aktualizowanie kodu, zyski!

Praca w przyszłości

Mam nadzieję, że w przyszłości ReportingObserver stanie się interfejsem API do wykrywania wszelkich problemów w JavaScript. Wyobraź sobie interfejs API, który pozwala wychwycić wszystko, co dzieje się nie tak w Twojej aplikacji:

Dodatkowe materiały:

Baner powitalny autorstwa Sieuwert Otterloo na Unsplash.