ReportingObserver: ken de gezondheid van uw code

Filip Walton

TL; DR

Er is een nieuwe waarnemer in de stad! ReportingObserver is een nieuwe API die u laat weten wanneer uw site een verouderde API gebruikt of een browserinterventie tegenkomt:

const observer = new ReportingObserver(
  (reports, observer) => {
    for (const report of reports) {
      console.log(report.type, report.url, report.body);
    }
  },
  {buffered: true}
);

observer.observe();

De callback kan worden gebruikt om rapporten naar een backend- of analyseprovider te sturen voor verdere analyse.

Waarom is dat nuttig? Tot nu toe waren waarschuwingen over beëindiging en interventie alleen beschikbaar in de DevTools als consoleberichten. Interventies worden met name alleen veroorzaakt door verschillende beperkingen in de echte wereld, zoals apparaat- en netwerkomstandigheden. Het is dus mogelijk dat u deze berichten nooit ziet wanneer u lokaal een site ontwikkelt/testt. ReportingObserver biedt de oplossing voor dit probleem. Wanneer gebruikers in het wild potentiële problemen ervaren, kunnen we hierover op de hoogte worden gesteld.

Invoering

Een tijdje geleden schreef ik een blogpost (" Je webapp observeren ") omdat ik het fascinerend vond hoeveel API's er zijn voor het monitoren van de "dingen" die in een webapp gebeuren. Er zijn bijvoorbeeld API's die informatie over de DOM kunnen observeren: ResizeObserver , IntersectionObserver , MutationObserver . Er zijn API's voor het vastleggen van prestatiemetingen: PerformanceObserver . Andere API's zoals window.onerror en window.onunhandledrejection laten het ons zelfs weten als er iets misgaat.

Er zijn echter andere soorten waarschuwingen die niet door deze bestaande API's worden opgevangen. Wanneer uw site een verouderde API gebruikt of te maken krijgt met een browserinterventie , is DevTools de eerste die u hierover informeert:

DevTools-consolewaarschuwingen voor beëindigingen en interventies.
Door de browser geïnitieerde waarschuwingen in de DevTools-console.

Je zou natuurlijk denken dat window.onerror deze waarschuwingen opvangt. Dat is niet het geval! Dat komt omdat window.onerror niet wordt geactiveerd bij waarschuwingen die rechtstreeks door de user-agent zelf worden gegenereerd. Het wordt geactiveerd bij runtimefouten (JS-uitzonderingen en syntaxisfouten) die worden veroorzaakt door het uitvoeren van uw code.

ReportingObserver pakt de speling op. Het biedt een programmatische manier om op de hoogte te worden gesteld van door browsers uitgegeven waarschuwingen, zoals beëindigingen en interventies . U kunt het gebruiken als rapportagetool en minder slaap verliezen als u zich afvraagt ​​of gebruikers onverwachte problemen ondervinden op uw live site.

De API

De API lijkt op de andere "waarnemer"-API's zoals IntersectionObserver en ResizeObserver . Je belt terug; het geeft je informatie. De informatie die de callback ontvangt, is een lijst met problemen die de pagina heeft veroorzaakt:

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

Gefilterde rapporten

Rapporten kunnen vooraf worden gefilterd om alleen bepaalde rapporttypen te observeren:

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

Gebufferde rapporten

De buffered: true optie is erg handig als u de rapporten wilt zien die zijn gegenereerd voordat de waarnemer werd gemaakt:

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

Het is geweldig voor situaties zoals het lui laden van een bibliotheek die een ReportingObserver gebruikt. De waarnemer wordt laat toegevoegd, maar u mist niets van wat er eerder tijdens het laden van de pagina is gebeurd .

Houd op met observeren

Ja! Het heeft een disconnect :

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

Voorbeelden

Voorbeeld - browserinterventies melden aan een analyseprovider:

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

observer.observe();

Voorbeeld : ontvang een melding wanneer API's worden verwijderd:

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

Conclusie

ReportingObserver biedt u een extra manier om potentiële problemen in uw web-app te ontdekken en te monitoren. Het is zelfs een handig hulpmiddel om de gezondheid van uw codebase (of het gebrek daaraan) te begrijpen. Stuur rapporten naar een backend, kom op de hoogte van de problemen die gebruikers in de echte wereld tegenkomen op uw site, update de code en maak winst!

Toekomstig werk

In de toekomst hoop ik dat ReportingObserver de de-facto API wordt voor het opvangen van alle soorten problemen in JS. Stel je één API voor die alles opvangt wat er misgaat in je app:

Ik ben ook enthousiast over de tools ReportingObserver in hun workflows integreren. Lighthouse is een voorbeeld van een tool die het beëindigen van browsers al markeert wanneer u de audit ' Vermijdt verouderde API's ' uitvoert:

De Lighthouse-audit voor het gebruik van verouderde API's kan ReportingObserver gebruiken.
De Lighthouse-audit voor het gebruik van verouderde API's kan ReportingObserver gebruiken.

Lighthouse gebruikt momenteel het DevTools-protocol om consoleberichten te schrapen en deze problemen aan ontwikkelaars te rapporteren. In plaats daarvan kan het interessant zijn om over te stappen naar ReportingObserver vanwege de goed gestructureerde beëindigingsrapporten en aanvullende metagegevens, zoals anticipatedRemoval verwijderingsdatum.

Aanvullende bronnen :