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
"contenu" 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 :
![Avertissements relatifs aux abandons et aux interventions dans la console DevTools.](https://developer.chrome.google.cn/static/docs/capabilities/web-apis/reporting-observer/image/devtools-console-warnings-7e65d798d802f.png?authuser=5&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 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:
- Interventions au niveau du navigateur
- Abandons
- un non-respect des Règles relatives aux fonctionnalités. Consultez le problème Chromium n° 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
)
Autres ressources:
Image héros de Sieuwert Otterloo dans Unsplash.