Sprawdzanie stanu kodu za pomocą interfejsu ReportingObserver API

Znajdź wycofane interfejsy API w swoich produkcyjnych aplikacjach.

ReportingObserver informuje, że witryna korzysta z wycofanego interfejsu API lub uruchamia interwencję przeglądarki. Podstawowe funkcje pojawiły się w Chrome 69. Od Chrome 84 można go używać w instancjach roboczych.

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 służy do wysyłania raportów do backendu lub dostawcy usług analitycznych na potrzeby analizy.

Dlaczego to takie przydatne? Do tego czasu ostrzeżenia o wycofaniu i interwencji były dostępne w Narzędziach deweloperskich tylko jako komunikaty konsoli. Interwencje są wywoływane tylko przez różne rzeczywiste ograniczenia, takie jak warunki urządzenia i sieci. Dlatego podczas tworzenia lub testowania witryny lokalnie możesz nigdy nie zobaczyć tych komunikatów. Rozwiązanie tego problemu zawiera ReportingObserver. Gdy użytkownicy napotkają potencjalne problemy, deweloperzy stron internetowych mogą otrzymywać o nich powiadomienia.

Wprowadzenie

Jakiś czas temu napisałam posta na blogu (Obserwacja aplikacji internetowej), ponieważ ciekawi mnie, ile interfejsów API istnieje do monitorowania „rzeczy” występujących w aplikacji internetowej. Istnieją na przykład interfejsy API, które mogą obserwować informacje o DOM: ResizeObserver, IntersectionObserver, MutationObserver. PerformanceObserver rejestruje wyniki pomiarów. Metody takie jak window.onerror czy window.onunhandledrejection pozwalają nawet informować nas o problemach.

Istnieją jednak inne typy ostrzeżeń, których istniejące interfejsy API nie przechwytują. Gdy Twoja witryna korzysta z wycofanego interfejsu API lub jeśli działa interwencja przeglądarki, Narzędzia deweloperskie jako pierwsze informują o nich:

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

Można by uznać, że window.onerror rejestruje te ostrzeżenia. Nie. Dzieje się tak, ponieważ window.onerror nie uruchamia się w przypadku ostrzeżeń wygenerowanych bezpośrednio przez samego klienta użytkownika. Uruchamia się w przypadku błędów w czasie działania (wyjątków JavaScriptu i błędów składni) spowodowanych przez wykonanie kodu.

ReportingObserver chwyta. Zapewnia programowy sposób powiadamiania o ostrzeżeniach wywoływanych przez przeglądarkę, takich jak wycofania i interakcje. Możesz go użyć jako narzędzia do raportowania i zapobiec zasypianiu, zastanawiając się, czy w Twojej witrynie występują nieoczekiwane problemy.

Interfejs API

ReportingObserver różni się od innych interfejsów API Observer, takich jak IntersectionObserver i ResizeObserver. Oddzwonisz do kogoś, aby uzyskać informacje. Informacje o wywołaniu zwrotnym to lista problemów spowodowanych przez stronę:

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ły tylko ich określone typy. Obecnie dostępne są 2 typy raportów: 'deprecation' i 'intervention'.

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

Raporty buforowane

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

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

Ta opcja przydaje się w sytuacjach takich jak leniwe ładowanie biblioteki, która korzysta z elementu ReportingObserver. Obserwator zostanie dodany późno, ale nie przegapisz niczego, co wydarzyło się na wcześniejszym etapie wczytywania strony.

Zatrzymaj obserwację

Przerwij obserwację za pomocą metody disconnect():

observer.disconnect();

Przykłady

Zgłoś dostawcy usług analitycznych interwencje przeglądarki

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

observer.observe();

Otrzymuj 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 wykrywania i monitorowania potencjalnych problemów z aplikacją internetową. Jest to nawet przydatne narzędzie do sprawdzania stanu bazy kodu (lub jego braku). Wysyłaj raporty do backendu, sprawdzaj rzeczywiste problemy, aktualizuj kod i zyski.

Praca w przyszłości

Mam nadzieję, że w przyszłości ReportingObserver stanie się faktycznym interfejsem API do wykrywania wszystkich rodzajów problemów w JavaScript. Wyobraź sobie, że jeden interfejs API wykrywa wszystkie problemy w aplikacji:

Dodatkowe materiały:

Baner powitalny autorstwa Sieuwerta Otterloo na kanale Unsplash.