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

Funkcja wywołania zwrotnego może służyć do wysyłania raportów do zaplecza 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ędziach deweloperskich jako komunikaty w konsoli. W szczególności interwencje są wywoływane tylko przez różne ograniczenia występujące w rzeczywistych warunkach, takie jak warunki dotyczące urządzenia i sieci. Możliwe więc, że nigdy nie zobaczysz takich komunikatów podczas lokalnego programowania/testowania. ReportingObserver zawiera rozwiązanie tego problemu. Gdy użytkownicy napotkają potencjalne problemy w praktyce, możemy o nich dowiedzieć się.

Wprowadzenie

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 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, DevTools jako pierwsze informuje o tym:

Ostrzeżenia w konsoli Narzędzi deweloperskich dotyczące wycofania 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. 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 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. 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 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 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 późno, ale nie przegapisz niczego, co działo się wcześniej podczas wczytywania strony.

Zatrzymaj obserwację

Tak! Zawiera 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 – 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). 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ż zgłasza wycofane przeglądarki po przeprowadzeniu kontroli „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: