ReportingObserver: connaître l'état de votre code

Philip Walton

TL;DR

Il y a un nouvel observateur en ville ! ReportingObserver est une nouvelle API qui vous permet lorsque votre site utilise une API obsolète ou rencontre un problème intervention du navigateur:

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

observer.observe();

Le rappel peut être utilisé pour envoyer des rapports à un fournisseur de backend ou d'analyse. pour une analyse plus approfondie.

En quoi est-ce utile ? Jusqu'à présent, les processus d'abandon Les avertissements d'intervention n'étaient disponibles dans les outils de développement qu'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'état de l'appareil et du réseau. Il se peut donc que vous ne voyiez même jamais ces messages lors du développement/test d'un site en local. ReportingObserver fournit la solution à ce problème. Lorsque les utilisateurs rencontrent des problèmes potentiels dans la nature, nous pouvons en être informés.

Introduction

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 "contenu" qui se produit dans une application Web. Par exemple, certaines API peuvent observer des informations sur le DOM: ResizeObserver, IntersectionObserver, MutationObserver. Des API permettent de capturer mesures des performances: PerformanceObserver. Autre Des API comme window.onerror et window.onunhandledrejection nous en ont même déjà informés. en cas de problème.

Cependant, d'autres types d'avertissements ne sont pas pris en compte API existantes. Lorsque votre site utilise une API obsolète ou est opérationnel contre une intervention du navigateur, les outils de développement sont d'abord à leur sujet:

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 JS et erreurs de syntaxe) causées par l'exécution de votre code.

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

L'API

L'API est semblable à l'autre "observateur" telles que que IntersectionObserver et ResizeObserver. Vous lui donnez un rappel : elle vous donne des informations. Les informations reçues par le rappel liste des problèmes causés 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

Vous pouvez préfiltrer les rapports pour n'observer que certains types de rapports:

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

Rapports mis en mémoire tampon

L'option buffered: true est très utile lorsque vous souhaitez afficher les rapports générés avant la création de l'observateur:

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

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

Arrêter l'observation

Oui. Il dispose d'une méthode disconnect:

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

Exemples

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

Exemple – Recevez une notification 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'état de votre codebase (ou son absence). envoyer des rapports à un backend ; connaître les problèmes concrets rencontrés par les utilisateurs de votre site, mettre à jour le code, les bénéfices !

Travaux futurs

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

J'ai hâte d'utiliser des outils qui intègrent ReportingObserver à leurs flux de travail. Lighthouse est un exemple d'outil. qui signale déjà les abandons de navigateurs lorsque vous exécutez son Évite les API obsolètes audit:

L&#39;audit Lighthouse concernant l&#39;utilisation d&#39;API obsolètes peut utiliser ReportingObserver.
L'audit Lighthouse concernant l'utilisation d'API obsolètes peut utiliser ReportingObserver.

Lighthouse utilise actuellement le protocole DevTools pour récupérer les messages de la console et signaler ces problèmes aux développeurs. Au lieu de cela, il il peut être intéressant de passer à ReportingObserver. pour ses rapports d'abandon bien structurés et ses métadonnées supplémentaires, Date anticipatedRemoval.

Autres ressources: