ReportingObserver: sprawdzanie stanu kodu

Philip Walton

TL;DR

Nowy obserwator w mieście! ReportingObserver to nowy interfejs API, który informuje, że Twoja witryna korzysta z 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();

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

Dlaczego to takie przydatne? Do tej pory ostrzeżenia o wycofaniu i interwencji były dostępne w Narzędziach deweloperskich tylko w formie komunikatów w konsoli. Interwencje są wywoływane tylko przez różne rzeczywiste ograniczenia, takie jak warunki korzystania z urządzenia i sieci. Oznacza to, że te komunikaty mogą nigdy nie pojawić się podczas tworzenia/testowania witryny lokalnie. Rozwiązanie tego problemu zawiera ReportingObserver. Gdy użytkownicy napotkają potencjalne problemy, możemy otrzymywać powiadomienia o nich.

Wstęp

Jakiś czas temu napisałem posta na blogu („Obserwowanie 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. Istnieją interfejsy API do rejestrowania pomiarów skuteczności: PerformanceObserver. Inne interfejsy API, takie jak window.onerror i window.onunhandledrejection, informują nas nawet o problemach.

Istniejące interfejsy API nie przechwytują jednak innych typów ostrzeżeń. Gdy Twoja witryna korzysta z wycofanego interfejsu API lub działa mimo interwencji w przeglądarce, Narzędzia deweloperskie w pierwszej kolejności mówią o nich:

ostrzeżenia o wycofaniach i interwencjach w konsoli Narzędzi deweloperskich.
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 klienta użytkownika. Uruchamia się w przypadku błędów środowiska wykonawczego (wyjątków JS i błędów składni) spowodowanych wykonaniem kodu.

ReportingObserver chwyta. Zapewnia programowy sposób powiadamiania o ostrzeżeniach wywoływanych przez przeglądarkę, takich jak wycofania i interwencje. Możesz go używać jako narzędzia do raportowania, żeby mniej snu się zastanawiać, czy użytkownicy napotykają w Twojej witrynie nieoczekiwane problemy.

Interfejs API

Różni się on od innych „obserwacyjnych” interfejsów API, np. IntersectionObserver i ResizeObserver. Oddzwaniasz do klienta, żeby uzyskać informacje. Wywołanie zwrotne 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żesz filtrować wstępnie, aby wyświetlać tylko niektóre ich typy:

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

Raporty buforowane

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 przydatne w sytuacjach takich jak leniwe ładowanie biblioteki, która korzysta z elementu ReportingObserver. Obserwator zostanie dodany z opóźnieniem, ale nie stracisz niczego, co wydarzyło się na wcześniejszym etapie wczytywania strony.

Zatrzymaj obserwację

Tak! Ma metodę disconnect:

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

Przykłady

Przykład – zgłaszanie interwencji w przeglądarce 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 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, z jakimi użytkownicy borykają się w Twojej witrynie, zaktualizuj kod i dochody.

Praca w przyszłości

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

Bardzo podoba mi się również to, że narzędzia integrują usługę ReportingObserver ze swoimi przepływami pracy. Przykładem narzędzia, które wskazuje narzędzie Lighthouse jest oznaczenie wycofanych wersji przeglądarki po uruchomieniu kontroli „Unikanie wycofanych interfejsów API”:

Audyt Lighthouse związany z używaniem wycofanych interfejsów API może używać usługi ReportingObserver.
Kontrola Lighthouse związaną z używaniem wycofanych interfejsów API może używać usługi ReportingObserver.

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

Dodatkowe materiały: