Sprawdzanie stanu kodu za pomocą interfejsu ReportingObserver API

Znajdź wycofane interfejsy API w aplikacjach produkcyjnych.

ReportingObserver informuje o tym, że Twoja witryna używa wycofanego interfejsu API lub działa do interwencji przeglądarki. Pierwotna podstawowa funkcjonalność w Chrome 69. Od wersji 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 umożliwia wysyłanie raportów do backendu lub dostawcy usług analitycznych analizy.

Dlaczego jest to 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, zwłaszcza te, są wyzwalane tylko przez różne rzeczywiste ograniczenia, takie jak urządzenie i sieć, warunków. Dlatego podczas programowania/testowania możesz nigdy nie zobaczyć tych komunikatów. z witryną lokalnie. Rozwiązaniem tego problemu jest ReportingObserver. Kiedy użytkownicy doświadczają potencjalnych problemów, programiści mogą być powiadamiani o nich.

Tło

Jakiś czas temu opublikowałem(-am) posta na blogu (Obserwowanie aplikacji internetowej) Fascynujące jest, ile jest interfejsów API do monitorowania „rzeczy” co dzieje się w aplikacji internetowej. Istnieją na przykład interfejsy API, które pozwalają obserwować informacje na temat modelu DOM: ResizeObserver, IntersectionObserver, MutationObserver PerformanceObserver rejestruje pomiary skuteczności. Metody takie jak window.onerror oraz window.onunhandledrejection daj nam nawet znać, gdy coś pójdzie nie tak.

Istnieją jednak inne typy ostrzeżeń, które nie są uwzględniane przez istniejących interfejsów API. Gdy Twoja witryna używa wycofanego interfejsu API lub interwencji przeglądarki, Narzędzia deweloperskie jako pierwszy informują :

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

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

ReportingObserver podtrzymuje schowek. Zapewniają zautomatyzowany sposób powiadomienia o ostrzeżeniach wyświetlanych przez przeglądarkę, takich jak wycofania czy interwencji. Możesz go używać jako narzędzia do raportowania i tracić mniej i zastanawiasz się, czy użytkownicy napotykają nieoczekiwane problemy w aktywnej witrynie.

Interfejs API

Interfejs ReportingObserver nie różni się od innych interfejsów API Observer, takich jak IntersectionObserver i ResizeObserver. Oddzwonisz do klienta. daje informacji. Informacje otrzymane przez wywołanie zwrotne to lista problemów które strona 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();

Filtrowane raporty

Raporty można wstępnie przefiltrować, by obserwować tylko niektóre typy raportów. Teraz, Są 2 typy raportów: 'deprecation' i 'intervention'.

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

Buforowane raporty

Użyj opcji buffered: true, by wyświetlić raporty, które zostały wygenerowane przed utworzeniem instancji obserwatora:

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

Ta opcja świetnie nadaje się np. do leniwego ładowania biblioteki korzystającej z ReportingObserver Obserwator zostaje dodany z opóźnieniem, ale nie przegapisz go wszystko, co dzieje się na wcześniejszym etapie wczytywania strony.

Przestań obserwować

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

observer.disconnect();

Przykłady

Zgłaszanie interwencji przeglądarki 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();

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 zapewnia dodatkowy sposób odkrywania i monitorowania potencjalnych problemów z aplikacją internetową. Jest to nawet przydatne narzędzie do poznawania stanu bazy kodu (lub jej braku). Wysyłaj raporty do backendu. na temat rzeczywistych problemów, aktualizacji kodu, zysków!

Praca w przyszłości

Mam nadzieję, że w przyszłości ReportingObserver stanie się interfejsem API wykrywania różnego rodzaju problemów w JavaScript. Wyobraź sobie jeden interfejs API do wykrywania wszystkiego w Twojej aplikacji, które pójdzie nie tak:

Dodatkowe materiały:

Baner powitalny – autor: Sieuwert Otterloo w sekcji Unsplash.