ReportingObserver: sprawdzanie stanu kodu

Philip Walton

TL;DR

Pojawił się nowy obserwator. ReportingObserver to nowy interfejs API, który informuje, gdy Twoja witryna używa przestarzałego interfejsu API lub napotyka problemy z interwencją 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();

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

Dlaczego to jest przydatne? Do tej pory ostrzeżenia o wycofaniu i interwencji były dostępne tylko w Narzędziech deweloperskich jako wiadomości w konsoli. W szczególności interwencje są wywoływane tylko przez różne ograniczenia występujące w rzeczywistych warunkach, takie jak warunki działania 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, możemy o nich dowiedzieć się.

Wprowadzenie

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. Do rejestrowania pomiarów skuteczności dostępne są interfejsy API: PerformanceObserver. Inne interfejsy API, takie jak window.onerror i window.onunhandledrejection, informują nas nawet, gdy coś pójdzie nie tak.

Istnieją jednak inne typy ostrzeżeń, które nie są rejestrowane przez te istniejące interfejsy API. Gdy Twoja witryna używa wycofanego interfejsu API lub napotyka interwencję przeglądarki, narzędzia DevTools jako pierwsze poinformują Cię o tych problemach:

ostrzeżenia w konsoli Narzędzi deweloperskich dotyczące wycofywania i interwencji;
Ostrzeżenia wywołane 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 JS) spowodowanych uruchomieniem kodu.

ReportingObserver przejmuje odpowiedzialność. Zapewnia ono automatyczny sposób otrzymywania ostrzeżeń wyświetlanych przez przeglądarkę, takich jak ostrzeżenia o wycofaniu i interwencje. Możesz go używać jako narzędzia do zgłaszania problemów i nie tracić snu, zastanawiając się, czy użytkownicy napotykają nieoczekiwane problemy na Twojej stronie.

Interfejs API

Interfejs API jest podobny do innych interfejsów API typu „observer”, takich jak IntersectionObserver i ResizeObserver. Wywołujesz wywołanie zwrotne; otrzymujesz informacje. Informacje, które otrzymuje strona wywołana w ramach wywołania zwrotnego, to lista problemów, które spowodowała ta 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();

Odfiltrowane raporty

Raporty można filtrować wstępnie, aby uwzględniać tylko określone typy raportów:

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

Buforowane raporty

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

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

Jest to świetne rozwiązanie w przypadku leniwego ładowania biblioteki, która korzysta z funkcji ReportingObserver. Obserwator jest dodawany późno, ale nie przegapisz niczego, co działo się wcześniej podczas wczytywania strony.

Zatrzymaj obserwację

Tak! Ma ona metodę disconnect:

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

Przykłady

Przykład – zgłaszanie interwencji w przeglądarce do 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 – otrzymywanie powiadomień 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. To też przydatne narzędzie do sprawdzania stanu kodu źródłowego (lub jego braku). Wysyłaj raporty do backendu, poznawaj rzeczywiste problemy użytkowników w Twojej witrynie, aktualizuj kod, zyski!

Przyszłe zadania

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

Cieszę się też, że narzędzia integrują ReportingObserver ze swoimi przepływami pracy. Lighthouse to przykład narzędzia, które już teraz sygnalizuje wycofanie przeglądarki podczas przeprowadzania audytu „Unikanie wycofanych interfejsów API”:

Audyt Lighthouse dotyczący używania wycofanych interfejsów API może korzystać z ReportingObserver.
Audyt Lighthouse dotyczący korzystania z interfejsów API przestarzałych może używać obserwatora raportów (ReportingObserver).

Lighthouse obecnie używa protokołu DevTools do pozyskiwania wiadomości z konsoli i zgłaszania tych problemów deweloperom. Zamiast tego warto przejść na ReportingObserver, ponieważ zawiera on dobrze uporządkowane raporty o wycofaniu i dodatkowe metadane, takie jak data anticipatedRemoval.

Dodatkowe materiały: