Capturez automatiquement les erreurs JavaScript sur votre site web avec un contexte détaillé pour un débogage plus rapide.
Activation du suivi des erreurs
Le suivi des erreurs capture automatiquement les erreurs JavaScript non détectées et les rejets de promesse non gérés dès qu'il est activé pour un site web. Il fait partie du même script de suivi que vous avez déjà installé:
<script
defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js"
></script>
Activation
Le suivi des erreurs est contrôlé par un drapeau de fonctionnalité sur chaque site web:
- Ouvrez le tableau de bord de votre site web et allez à Paramètres → Avancé
- Sous Drapeaux de fonctionnalité, activez Suivi des erreurs
C'est tout. Il n'y a pas de modification de script à faire, le drapeau est livré au suivi automatiquement. Les nouvelles erreurs commencent alors à s'afficher dans l'onglet Erreurs.
Info
Le suivi des erreurs est une fonction Pro. Si le bouton bascule affiche un badge de plan requis, vous devez être en Pro, Scale ou Enterprise pour l'activer.
Ce qui est capturé
Informations sur les erreurs
Pour chaque erreur, Zenovay capture:
| Données | Description |
|---|---|
| Message d'erreur | La description de l'erreur |
| Type d'erreur | TypeError, ReferenceError, etc. |
| Trace de pile | Pile d'appels complète |
| Fichier source | Fichier où l'erreur s'est produite |
| Ligne & colonne | Position exacte |
| URL | Page où l'erreur s'est produite |
| Agent utilisateur | Navigateur et système d'exploitation |
| ID visiteur | Lien vers la session |
| Horodatage | Quand l'erreur s'est produite |
Données contextuelles
Contexte supplémentaire capturé avec chaque erreur:
- URL et référent de la page
- Informations sur le navigateur et l'appareil
- Miettes de pain: navigation récente, clics, sortie de console et requêtes réseau menant à l'erreur
- La version et l'environnement dans lesquels l'erreur a été signalée (si votre code les définit)
Affichage des erreurs
Tableau de bord des erreurs
Ouvrez le tableau de bord de votre site web et sélectionnez l'onglet Erreurs (sous Fiabilité dans la barre latérale):
- Voyez les tendances du nombre d'erreurs au fil du temps
- Affichez les groupes d'erreurs principaux par occurrence
- Filtrez par statut
- Cliquez sur n'importe quel groupe d'erreurs pour plus de détails
Liste des erreurs
La liste des erreurs affiche:
| Colonne | Description |
|---|---|
| Erreur | Message d'erreur (tronqué) |
| Nombre | Nombre d'occurrences |
| Première observation | Quand cela s'est produit en premier |
| Dernière observation | Occurrence la plus récente |
| Statut | Non résolu, En investigation, Résolu ou Ignoré |
Vue détaillée des erreurs
Cliquez sur un groupe d'erreurs pour voir:
- Message d'erreur complet
- Trace de pile
- Navigateurs, systèmes d'exploitation et appareils affectés
- Pages où l'erreur se produit
- Chronologie des occurrences
- Miettes de pain menant à l'erreur
Vous pouvez également changer le statut d'un groupe (le marquer comme En investigation, Résolu ou Ignoré) pour maintenir votre liste concentrée sur ce qui a encore besoin d'attention.
Types d'erreurs
Types d'erreurs courants
| Type | Description | Causes courantes |
|---|---|---|
TypeError | Erreur liée au type | Accès aux propriétés non définies |
ReferenceError | Référence à non défini | Variables non définies |
SyntaxError | Syntaxe invalide | JSON mal formé, fautes de frappe |
RangeError | Valeur hors plage | Longueur de tableau invalide |
URIError | Erreur de traitement URI | URIs mal formés |
EvalError | Erreur eval() | Obsolète, rarement observée |
Les erreurs sont également classées par catégorie (JavaScript, réseau, ressource ou personnalisée) et par gravité, que le tableau de bord utilise pour vous aider à prioriser.
Rejets de promesse
// Rejet non géré - capturé automatiquement
Promise.reject(new Error('Something failed'));
// Rejet géré - non capturé
Promise.reject(new Error('Something failed'))
.catch(error => handleError(error));
Source Maps
Le code minifié produit des traces de pile illisibles:
Error: undefined is not a function
at a.b (main.min.js:1:2345)
at c.d (main.min.js:1:3456)
Avec les source maps téléchargées, le tableau de bord peut afficher votre code original:
Error: undefined is not a function
at processPayment (checkout.js:45:12)
at handleSubmit (form.js:123:8)
Les source maps sont téléchargées via l'API de suivi des erreurs et mises en correspondance avec les erreurs par un identifiant release. Intégrez le téléchargement dans votre pipeline de build afin que chaque version soit fournie avec ses maps.
Pour la référence complète de téléchargement (point de terminaison, champs et exemple CI), voir Source maps pour erreurs JS.
Filtrage des erreurs
Les erreurs provenant de l'infrastructure de suivi propre de Zenovay sont supprimées automatiquement, vous voyez donc uniquement les erreurs de votre propre code.
Pour réduire le bruit restant, concentrez-vous sur ce qui est actionnable dans le tableau de bord:
- Utilisez le statut Ignoré pour réduire au silence une erreur connue de tiers ou d'extension de navigateur afin qu'elle cesse d'encombrer votre liste.
- Résolvez les groupes que vous avez corrigés afin que les nouvelles occurrences se démarquent.
Alertes d'erreurs
Recevez des notifications lorsque les erreurs augmentent en utilisant une règle d'automatisation:
- Ouvrez le tableau de bord de votre site web et allez à Paramètres → Automatisation
- Créez une règle avec le déclencheur Seuil de taux d'erreur
- Définissez le seuil (erreurs par heure)
- Choisissez comment vous souhaitez être notifié: e-mail, webhook ou Slack
Quand le taux d'erreur dépasse votre seuil, Zenovay déclenche l'action que vous avez configurée.
Intégration avec la relecture de session
Si la relecture de session est activée pour le site web, les erreurs peuvent être liées à des enregistrements afin que vous puissiez voir ce que l'utilisateur faisait lorsqu'une erreur s'est produite. La relecture de session a un mode de déclenchement Erreurs uniquement (sous Paramètres → Avancé → Drapeaux de fonctionnalité) qui enregistre les sessions spécifiquement autour des erreurs, ce qui maintient le stockage concentré sur les sessions qui en valent la peine.
Cela vous aide à comprendre:
- Ce que l'utilisateur faisait
- État de l'interface utilisateur quand l'erreur s'est produite
- Étapes pour reproduire
Meilleures pratiques
Gérer les erreurs délibérément
Capturez et gérez les erreurs dont vous pouvez vous rétablir, et laissez celles que vous ne pouvez pas remonter au suivi:
// Bon: gestion spécifique et récupérable
try {
const data = JSON.parse(userInput);
} catch (error) {
if (error instanceof SyntaxError) {
showValidationError('Invalid JSON format');
} else {
throw error; // non récupérable - laisser être capturé
}
}
Réduction du bruit
- Marquer les erreurs d'extension de navigateur et les erreurs de tiers connues comme Ignorées
- Résoudre les groupes au fur et à mesure que vous livrez des correctifs
- Prioriser par gravité et nombre d'occurrences
Dépannage
Les erreurs n'apparaissent pas
Vérifier:
- Le script se charge avant que les erreurs se produisent
- Le suivi des erreurs est activé sous Paramètres → Avancé → Drapeaux de fonctionnalité
- Un bloqueur de publicités ne bloque pas les demandes à
api.zenovay.com
Traces de pile manquantes
Vérifier:
- Les source maps sont téléchargées pour le code minifié (voir Source maps pour erreurs JS)
- Les en-têtes CORS sont définis pour les scripts multi-origines
- L'erreur ne provient pas d'un script tiers
Trop d'erreurs
Envisager:
- Marquer les groupes bruyants connus comme Ignorés
- Examiner et corriger en priorité les erreurs à haut volume