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.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/devtools-console-warnings-dcb0ee87f92de.png?authuser=8&hl=fr)
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:
- Interventions au niveau du navigateur
- Abandons
- un non-respect des Règles relatives aux fonctionnalités. Consultez crbug.com/867471.
- Exceptions et erreurs JS (actuellement traitées par
window.onerror
). - Refus des promesses JS non gérées (actuellement traitées par
window.onunhandledrejection
)
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'audit Lighthouse concernant l'utilisation d'API obsolètes peut utiliser ReportingObserver.](https://developer.chrome.google.cn/static/blog/reportingobserver/image/the-lighthouse-audit-usi-3687157fd0fa1.png?authuser=8&hl=fr)
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: