Connaître l'état de votre code avec l'API ReportingObserver

Identifiez les API obsolètes dans vos applications de production.

ReportingObserver vous indique lorsque votre site utilise une API obsolète ou s'exécute en une intervention du navigateur. À l'origine, la fonctionnalité de base est arrivé dans Chrome 69. À partir de Chrome 84, il peut être utilisé dans les nœuds de calcul.

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

observer.observe();

Utilisez le rappel pour envoyer des rapports à un fournisseur de backend ou d'analyse pour l'analyse.

En quoi est-ce utile ? Jusqu'à cette API, les avertissements d'abandon et d'intervention étaient disponibles uniquement dans les outils de développement en tant que messages de la console. Les interventions, en particulier, ne sont déclenchées que par diverses contraintes du monde réel, comme l'appareil et le réseau et conditions d'exploitation. Il est donc possible que ces messages ne s'affichent pas lorsque vous développez ou testez sur un site, en local. ReportingObserver apporte une solution à ce problème. Quand ? les utilisateurs rencontrent des problèmes potentiels, les développeurs Web peuvent être informés à leur sujet.

Contexte

Il y a quelque temps, j'ai rédigé un article de blog (Observer votre application Web). car j'ai trouvé fascinant de voir le nombre d'API disponibles pour surveiller "trucs" qui se produit dans une application Web. Par exemple, certaines API peuvent observer des informations sur le DOM: ResizeObserver IntersectionObserver, MutationObserver PerformanceObserver capture les mesures des performances. Et des méthodes telles que window.onerror et window.onunhandledrejection et même vous avertir en cas de problème.

Cependant, il existe d'autres types d'avertissements qui ne sont pas détectés par API existantes. Lorsque votre site utilise une API obsolète ou fait face à une intervention du navigateur, les outils de développement sont les premiers à vous parler :

<ph type="x-smartling-placeholder">
</ph> Avertissements relatifs aux abandons et aux interventions dans la console DevTools.
Avertissements déclenchés par le navigateur dans la console des outils de développement

On pourrait naturellement penser que window.onerror capture ces avertissements. Ce n'est pas le cas. En effet, window.onerror ne se déclenche pas pour les avertissements générés directement par le user-agent lui-même. Il se déclenche en cas d'erreurs d'exécution (exceptions JavaScript et erreurs de syntaxe) causées par l'exécution du code.

ReportingObserver prend le relais. C'est un moyen programmatique d'être des avertissements émis par le navigateur, tels que les abandons et interventions. Vous pouvez l'utiliser comme outil de création de rapports et perdre moins de temps vous vous demandez si les utilisateurs rencontrent des problèmes inattendus sur votre site en ligne.

L'API

ReportingObserver est semblable aux autres API Observer telles que IntersectionObserver et ResizeObserver. Vous lui donnez un rappel : cela donne vos informations. Les informations reçues par le rappel sont une liste de problèmes généré par la page:

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

Rapports filtrés

Les rapports peuvent être pré-filtrés pour n'observer que certains types de rapports. En ce moment, il existe deux types de rapports: 'deprecation' et 'intervention'.

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

Rapports mis en mémoire tampon

Utilisez l'option buffered: true lorsque vous souhaitez afficher les rapports qui ont été généré avant la création de l'instance d'observateur:

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

Cette option est idéale pour les situations telles que le chargement différé d'une bibliothèque utilisant un ReportingObserver L'observateur est ajouté en retard, mais vous ne passez pas à côté tout ce qui s'est produit au début du chargement de la page.

Arrêter l'observation

Arrêtez l'observation à l'aide de la méthode disconnect():

observer.disconnect();

Exemples

Signaler les interventions du navigateur à un fournisseur de solutions d'analyse

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

observer.observe();

Soyez averti lorsque des API vont être supprimées

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

Conclusion

ReportingObserver vous offre un moyen supplémentaire d'identifier et de surveiller les problèmes potentiels dans votre application Web. C'est même un outil utile pour comprendre l'intégrité de votre code base (ou son absence de code base). Envoyez des rapports à un backend, sur les problèmes concrets, mettre à jour le code, réaliser des bénéfices !

Travaux futurs

À l'avenir, j'espère que ReportingObserver deviendra l'API de facto pour pour détecter tous les types de problèmes en JavaScript. Imaginez une seule API pour tout détecter qui ne fonctionne pas correctement dans votre application:

Autres ressources:

Image héros de Sieuwert Otterloo dans Unsplash.