Introduction
La journalisation des erreurs réseau (NEL, Network Error Logging) est un mécanisme en collectant les erreurs réseau côté client à partir d'une origine.
Il utilise l'en-tête de réponse HTTP NEL pour indiquer au navigateur de collecter les erreurs réseau, puis s'intègre à l'API Reporting pour signaler les erreurs à un serveur.
Présentation de l'ancienne API Reporting
L'ancien en-tête Report-To
Pour utiliser l'ancienne API Reporting, vous devez définir un en-tête de réponse HTTP Report-To. Son
la valeur est un objet qui décrit un groupe de points de terminaison pour le navigateur
pour signaler des erreurs à:
Report-To:
{
"max_age": 10886400,
"endpoints": [{
"url": "https://analytics.provider.com/browser-errors"
}]
}
Si l'URL du point de terminaison n'a pas la même origine que celle de votre site,
doit prendre en charge les requêtes CORS préliminaires. (par exemple, Access-Control-Allow-Origin: *; Access-Control-Allow-Methods: GET,PUT,POST,DELETE,OPTIONS; Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With).
Dans l'exemple, l'envoi de cet en-tête de réponse avec votre page principale
configure le navigateur pour signaler les avertissements générés par le navigateur
sur le point de terminaison https://analytics.provider.com/browser-errors pendant max_age secondes.
Notez que toutes les requêtes HTTP ultérieures effectuées par la page
(pour les images, les scripts, etc.) sont ignorés. Configuration de la configuration
la réponse de la page principale.
Explication des champs d'en-tête
Chaque configuration de point de terminaison contient un nom group, max_age et endpoints
tableau. Vous pouvez également choisir de tenir compte ou non des sous-domaines dans vos rapports.
les erreurs à l'aide du champ include_subdomains.
| Champ | Type | Description |
|---|---|---|
group |
chaîne | Facultatif. Si aucun nom group n'est spécifié, le nom du point de terminaison est "default". |
max_age |
Nombre | Obligatoire. Entier non négatif qui définit la durée de vie du point de terminaison en secondes. Une valeur de "0" entraîne la suppression du groupe de points de terminaison du cache des rapports du user-agent. |
endpoints |
Tableau<Objet> | Obligatoire. Tableau d'objets JSON qui spécifient l'URL réelle de votre collecteur de rapports. |
include_subdomains |
booléen | Facultatif. Booléen qui active le groupe de points de terminaison pour tous les sous-domaines de l'hôte de l'origine actuelle. En cas d'omission ou de toute autre valeur que "true", les sous-domaines ne sont pas signalés au point de terminaison. |
Le nom group est un nom unique utilisé pour associer une chaîne à
un point de terminaison. Utilisez ce nom dans les autres emplacements qui intègrent
avec l'API Reporting pour faire référence à un groupe de points de terminaison spécifique.
Le champ max-age est également obligatoire et indique comment
le navigateur doit utiliser le point de terminaison
et lui signaler les erreurs.
Le champ endpoints est un tableau permettant le basculement et l'équilibrage de charge
caractéristiques. Consultez la section Basculement et équilibrage de charge. Il est
important de noter que le navigateur ne sélectionne qu'un seul point de terminaison, même si
si le groupe répertorie plusieurs collecteurs dans endpoints. Si vous souhaitez envoyer un
des rapports à plusieurs serveurs à la fois, votre backend devra transférer
rapports.
Comment le navigateur envoie-t-il des rapports ?
Le navigateur regroupe régulièrement les rapports et les envoie que vous configurez.
Pour envoyer des rapports, le navigateur émet un POST
demander avec
Content-Type: application/reports+json et un corps contenant le tableau de
d'avertissements ou d'erreurs qui ont été capturés.
À quel moment le navigateur envoie-t-il des rapports ?
Les rapports sont générés hors bande depuis votre application, ce qui signifie que le navigateur contrôle à quel moment les rapports sont envoyés à vos serveurs.
Le navigateur tente livrer des rapports en file d'attente au moment le plus opportun. Ils peuvent l'être dès qu'ils sont prêts (afin de fournir en temps opportun des commentaires au développeur), mais le navigateur peut également retarder la livraison s'il est occupé à traiter un travail de priorité plus élevée, ou si l'utilisateur a une lenteur et/ou réseau encombré à l'époque. Il peut aussi donner la priorité à l'envoi les rapports sur une origine spécifique, si l'utilisateur est un visiteur fréquent.
Il n'y a pas ou peu de problèmes de performances. (conflit de réseau avec votre application, par exemple) lorsque vous utilisez l'API Reporting. Il y a Il est également impossible de contrôler à quel moment le navigateur envoie des rapports en file d'attente.
Configurer plusieurs points de terminaison
Une seule réponse peut configurer plusieurs points de terminaison à la fois en envoyant
plusieurs en-têtes Report-To:
Report-To: {
"group": "default",
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/browser-reports"
}]
}
Report-To: {
"group": "network-errors-endpoint",
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/network-errors"
}]
}
ou en les combinant dans un seul en-tête HTTP:
Report-To: {
"group": "network-errors-endpoint",
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/network-errors"
}]
},
{
"max_age": 10886400,
"endpoints": [{
"url": "https://example.com/browser-errors"
}]
}
Une fois que vous avez envoyé l'en-tête Report-To, le navigateur met en cache les points de terminaison
en fonction de leurs valeurs max_age, et envoie toutes ces informations
d'avertissements ou d'erreurs dans vos URL.
Basculement et équilibrage de charge
La plupart du temps, vous configurez un collecteur d'URL par groupe. Toutefois, les rapports pouvant générer une grande quantité de trafic, les spécifications incluent le basculement et d'équilibrage de charge inspirées du DNS Enregistrement SRV.
Le navigateur fera de son mieux pour envoyer un rapport à au maximum un point de terminaison
dans un groupe. Les points de terminaison peuvent se voir attribuer un weight pour répartir la charge, chaque élément
recevant une fraction spécifiée du trafic des rapports. Les points de terminaison
se voit également attribuer un priority pour configurer les collecteurs de remplacement.
Les collecteurs de remplacement ne sont essayés que lorsque l'importation vers les collecteurs principaux échoue.
Exemple: Créez un collecteur de remplacement dans https://backup.com/reports:
Report-To: {
"group": "endpoint-1",
"max_age": 10886400,
"endpoints": [
{"url": "https://example.com/reports", "priority": 1},
{"url": "https://backup.com/reports", "priority": 2}
]
}
Configurer la journalisation des erreurs réseau
Configuration
Pour utiliser NEL, configurez l'en-tête Report-To avec une
collecteur qui utilise un groupe nommé:
Report-To: {
...
}, {
"group": "network-errors",
"max_age": 2592000,
"endpoints": [{
"url": "https://analytics.provider.com/networkerrors"
}]
}
Envoyez ensuite l'en-tête de réponse NEL pour commencer à collecter les erreurs. Depuis NEL
est l'activation pour une origine, vous n'avez besoin d'envoyer l'en-tête qu'une seule fois. NEL et
Report-To s'appliquera aux futures requêtes ayant la même origine et continuera
afin de collecter les erreurs en fonction de la valeur max_age utilisée lors de la configuration
le collecteur.
La valeur de l'en-tête doit être un objet JSON contenant un max_age et
report_to. Utilisez-le pour faire référence au nom du groupe
Collecteur des erreurs réseau:
GET /index.html HTTP/1.1
NEL: {"report_to": "network-errors", "max_age": 2592000}
Sous-ressources
Exemple: Si example.com charge foobar.com/cat.gif et que cette ressource échoue
à charger:
- Le collecteur NEL de
foobar.comest averti - Le collecteur NEL de
example.comn'est pas notifié
La la règle d'or est que NEL reproduise les journaux côté serveur, qui sont simplement le client.
example.com n'ayant aucune visibilité sur le serveur de foobar.com
journaux, il n'a pas non plus de visibilité
dans ses rapports NEL.
Configurations des rapports de débogage
Si aucun rapport ne s'affiche sur votre serveur, accédez à
chrome://net-export/ Cette page est utile pour
vérifier que les éléments sont correctement configurés et que les rapports sont envoyés
correctement.
Qu'en est-il de ReportingObserver ?
ReportingObserver est un mécanisme de reporting connexe, mais différent. Il est basé sur les appels JavaScript.
Il n'est pas adapté à la journalisation des erreurs réseau, car les erreurs réseau
ne peuvent pas être interceptées
via JavaScript.
Exemple de serveur
Vous trouverez ci-dessous un exemple de serveur Node qui utilise Express. Il explique comment configurer la création de rapports sur les erreurs réseau et crée un gestionnaire dédié pour capturer le résultat.
const express = require('express');
const app = express();
app.use(
express.json({
type: ['application/json', 'application/reports+json'],
}),
);
app.use(express.urlencoded());
app.get('/', (request, response) => {
// Note: report_to and not report-to for NEL.
response.set('NEL', `{"report_to": "network-errors", "max_age": 2592000}`);
// The Report-To header tells the browser where to send network errors.
// The default group (first example below) captures interventions and
// deprecation reports. Other groups, like the network-error group, are referenced by their "group" name.
response.set(
'Report-To',
`{
"max_age": 2592000,
"endpoints": [{
"url": "https://reporting-observer-api-demo.glitch.me/reports"
}],
}, {
"group": "network-errors",
"max_age": 2592000,
"endpoints": [{
"url": "https://reporting-observer-api-demo.glitch.me/network-reports"
}]
}`,
);
response.sendFile('./index.html');
});
function echoReports(request, response) {
// Record report in server logs or otherwise process results.
for (const report of request.body) {
console.log(report.body);
}
response.send(request.body);
}
app.post('/network-reports', (request, response) => {
console.log(`${request.body.length} Network error reports:`);
echoReports(request, response);
});
const listener = app.listen(process.env.PORT, () => {
console.log(`Your app is listening on port ${listener.address().port}`);
});