API ReportingObserver: un regard sur le code des pages web sous un nouvel angle

Le matériel, dont nous publions la traduction aujourd'hui, est consacré à l'API ReportingObserver , un mécanisme qui vous permet d'en savoir plus sur l'utilisation de fonctionnalités obsolètes et que le navigateur interfère avec le travail du code de page. ReportingObserver fait partie de cette spécification W3C.

Pourquoi est-ce nécessaire?

Supposons que vous ayez lancé un important projet Web il y a quelques jours. Les utilisateurs, dans beaucoup, ont déjà commencé à s'inscrire sur son site. Tout le monde sait que de tels projets, pour que, pour le dire simplement, apportent de l'argent aux entreprises, devraient fonctionner de manière stable. Voyons maintenant ce qui se passe si votre client rencontre le mauvais comportement du site, dont la cause est une sorte d'erreur, et vous ne savez rien à ce sujet. Il ne corrigera pas l'erreur, dont le développeur ne connaît pas l'occurrence, elle se manifestera encore et encore, et cela, en fin de compte, affectera négativement les objectifs commerciaux du projet.

Le visiteur du site, très probablement, ne sait rien du développement Web, donc quand le site commence à se comporter étrangement, il est peu probable qu'il regarde dans la console afin d'essayer de comprendre le problème, qui est exprimé comme un message commençant par [Intervention] ou [Deprecation] .

En fait, les visiteurs du site ne devraient pas se soucier des erreurs. Ils n'ont besoin que de stabilité, de commodité et de prévisibilité. Les bogues sont un problème de développeur et l'API ReportingObserver existe pour aider les développeurs à résoudre ce problème. À l'aide de ReportingObserver vous pouvez envoyer des rapports au développeur sur l'utilisation d'API obsolètes ou sur les interférences avec la page du navigateur. D'autres outils de gestion des erreurs ne répondent pas à de telles choses.

Voici à quoi ressemble le travail avec ReportingObserver :

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

Parlons de la façon d'utiliser cette API.

Structure de l'API ReportingObserver

Les navigateurs ont des API conçues pour détecter les erreurs. Par exemple, window.onerror . Cependant, window.onerror ne window.onerror pas absolument toutes les situations problématiques qui surviennent pendant le fonctionnement de la page. Par exemple, cet outil vous aide à en savoir plus sur les erreurs d'exécution causées par des exceptions JavaScript ou des erreurs de syntaxe dans votre code. Cependant, si vous recevez une notification concernant l'utilisation d'une fonctionnalité obsolète ou d'une intervention du navigateur, window.onerror ne répondra pas à une telle notification. C'est dans cette situation que ReportingObserver sera utile.

Pour utiliser l'API ReportingObserver , vous devez créer l'objet observateur correspondant en lui fournissant un rappel, lorsqu'il est appelé, des rapports lui seront envoyés sous la forme d'une liste de problèmes rencontrés sur la page. Nous avons déjà examiné le code nécessaire pour travailler avec ReportingObserver . Voyons maintenant un exemple des données envoyées au rappel:

 const observer = new ReportingObserver((reports, observer) => { for (const report of reports) {   // → report.id === 'XMLHttpRequestSynchronousInNonWorkerOutsideBeforeUnload'   // → report.type === 'deprecation'   // → report.url === 'https://reporting-observer-api-demo.glitch.me'   // → report.body.message === 'Synchronous XMLHttpRequest is deprecated...' } }}); observer.observe(); 

Lorsque vous travaillez avec ReportingObserver vous pouvez filtrer les rapports. Par exemple, voici une conception qui vous permet de recevoir uniquement des rapports sur l'utilisation de fonctionnalités obsolètes:

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

Si, lors de la création de l'objet ReportingObserver , vous lui transmettez la propriété buffered: true , cela permettra de voir les rapports générés avant la création d'un tel objet:

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

Afin d'arrêter la surveillance des rapports sur l'utilisation de fonctionnalités obsolètes ou sur les interventions du navigateur dans le code, vous pouvez désactiver l'objet observateur:

 observer.disconnect(); 

Exemple d'API ReportingObserver

Voici un exemple d'utilisation de l'objet observateur ReportingObserver . Voici un schéma de l'organisation de l'envoi des rapports au serveur:

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

Résumé

L'API ReportingObserver permet au développeur d'élargir la gamme d'informations reçues par lui sur les erreurs qui se produisent dans ses projets lorsque de vrais utilisateurs travaillent avec eux. Cette API est disponible dans Chrome 69, il y a des informations que cette fonctionnalité apparaîtra dans Edge. On ne sait toujours pas s'il est prévu d'implémenter quelque chose de similaire dans Firefox ou Safari.

Des détails sur ReportingObserver peuvent être trouvés ici et ici .

Chers lecteurs! Que pensez-vous de l'API ReportingObserver?