Suivi des erreurs

Fonctionnalité Pro

Détectez chaque erreur JavaScript, défaillance réseau et exception non traitée avant que vos utilisateurs ne les signalent. Le suivi des erreurs capture les traces de pile complètes avec le contexte de session pour vous aider à déboguer plus rapidement.

---

Aperçu

Zenovay capture automatiquement les erreurs côté client au fur et à mesure qu'elles se produisent, notamment :

• Erreurs JavaScript : Exceptions non traitées et erreurs de syntaxe
• Rejets de promesses : Rejets de promesses non traitées
• Erreurs réseau : Appels API échoués et défaillances du chargement de ressources
• Erreurs de console : Erreurs journalisées via console.error()

Chaque erreur inclut :

• Trace de pile complète avec cartes source
• Contexte de session (ce que l'utilisateur faisait)
• Informations sur le navigateur et l'appareil
• Lien vers la lecture de session (si activée)

---

Activation du suivi des erreurs

Le suivi des erreurs est activé par défaut lorsque vous ajoutez le script de suivi Zenovay. Pour vérifier :

1. Ouvrez Domaines, sélectionnez votre site, puis choisissez l'onglet Erreurs
2. Si l'onglet affiche des données ou une invite d'activation, le script est actif
3. Confirmez que la capture d'erreurs est activée dans les paramètres de fonctionnalité du domaine

---

Tableau de bord des erreurs

Liste des erreurs

Le tableau de bord Erreurs affiche toutes les erreurs capturées regroupées par :

• Message d'erreur : Empreinte digitale d'erreur unique
• Nombre d'occurrences : Nombre de fois où cette erreur s'est produite
• Utilisateurs affectés : Nombre de visiteurs uniques affectés
• Dernier aperçu : Moment où l'erreur s'est produite le plus récemment

Détails des erreurs

Cliquez sur n'importe quelle erreur pour voir :

• Trace de pile complète : Avec les numéros de ligne mappés par source
• Contexte utilisateur : Navigateur, appareil, pays, URL de la page
• Lecture de session : Lien pour regarder ce qui s'est passé (si activée)
• Fil d'ariane : Événements menant à l'erreur
• Graphique de tendance : Fréquence des erreurs au fil du temps

---

Groupage des erreurs

Les erreurs similaires sont automatiquement regroupées par :

1. Message d'erreur (normalisé)
2. Empreinte digitale de trace de pile
3. Type d'erreur

Cela empêche des milliers d'erreurs identiques de surcharger votre tableau de bord.

Empreinte digitale personnalisée

Utilisez des balises d'erreur personnalisées pour regrouper les erreurs connexes :

try {
  // Votre code
} catch (error) {
  window.zenovay('track', 'error', {
    error_message: error.message,
    error_stack: error.stack,
    tags: {
      feature: 'checkout',
      action: 'payment_submit'
    }
  });
}

---

Types d'erreurs

Erreurs JavaScript

Erreurs d'exécution standard :

// Capturé automatiquement
TypeError: Cannot read property 'foo' of undefined
ReferenceError: bar is not defined
SyntaxError: Unexpected token

Erreurs réseau

Requêtes fetch/XHR échouées :

// Appel API échoué - capturé automatiquement
fetch('/api/data')
  .then(r => r.json())
  .catch(error => {
    // Erreur capturée avec les détails de la demande
  });

Les détails des erreurs réseau incluent :

• URL de la demande
• Méthode HTTP
• Statut de la réponse (si disponible)
• Durée de la demande

Rejets de promesses

Rejets de promesses non traitées :

// Capturé automatiquement
Promise.reject(new Error('Something went wrong'));

// Erreurs de fonction asynchrone
async function fetchData() {
  throw new Error('Failed to fetch');
}

---

Cartes source

Téléchargez les cartes source pour les traces de pile lisibles :

Téléchargement automatique (Recommandé)

Si vous utilisez Webpack, Vite ou Rollup, les cartes source peuvent être téléchargées automatiquement lors de la compilation :

# Télécharger les cartes source à l'aide de l'API
curl -X POST "https://api.zenovay.com/api/external/v1/sourcemaps" \
  -H "X-API-Key: YOUR_API_KEY" \
  -F "release=v1.2.3" \
  -F "sourcemap=@./dist/main.js.map"

Téléchargement manuel

Téléchargez via le tableau de bord :

1. Ouvrez Domaines, sélectionnez votre site, puis choisissez l'onglet Erreurs
2. Cliquez sur Cartes source puis Télécharger la carte source
3. Sélectionnez vos fichiers .js.map
4. Associez à une version de lancement

---

Intégration de session

Quand Session Replay est activée :

1. Chaque erreur est directement liée à la lecture de session
2. La lecture s'ouvre au moment exact où l'erreur s'est produite
3. Regardez ce que l'utilisateur a fait avant l'erreur
4. Comprenez le contexte complet, pas seulement la trace de pile

---

Filtrage et alertes

Filtrage des erreurs

Filtrez les erreurs par :

• Plage de dates
• Navigateur
• Type d'appareil
• Pays
• Version de lancement
• Type d'erreur

Alertes d'erreur

Configurez des alertes pour les erreurs nouvelles ou croissantes :

1. Ouvrez Domaines, sélectionnez votre site, puis choisissez l'onglet Erreurs
2. Cliquez sur Configurer les alertes
3. Définissez un seuil (par exemple, « plus de 10 occurrences en 5 minutes »)
4. Choisissez un canal de notification (email, Slack, webhook)

---

Ignorer les erreurs

Certaines erreurs ne sont pas exploitables. Configurez des règles d'ignorance :

Par message d'erreur

{
  "error_ignore_patterns": [
    "ResizeObserver loop limit exceeded",
    "Script error."
  ]
}

Par motif d'URL

{
  "error_ignore_urls": [
    "chrome-extension://",
    "moz-extension://"
  ]
}

---

Suivi manuel des erreurs

Suivez les erreurs détectées ou les conditions d'erreur personnalisées :

// Suivre l'erreur détectée
try {
  riskyOperation();
} catch (error) {
  window.zenovay('track', 'error', {
    error_message: error.message,
    error_stack: error.stack,
    context: {
      operation: 'riskyOperation',
      userId: currentUser.id
    }
  });
}

// Suivre la condition d'erreur personnalisée
if (unexpectedState) {
  window.zenovay('track', 'error', {
    error_message: 'Unexpected application state',
    severity: 'warning',
    context: { state: JSON.stringify(appState) }
  });
}

---

Accès à l'API

Accédez aux données d'erreur via l'API :

# Erreurs de liste
GET /api/websites/:websiteId/errors
Authorization: Bearer YOUR_API_KEY

# Obtenir les détails de l'erreur
GET /api/websites/:websiteId/errors/:errorId
Authorization: Bearer YOUR_API_KEY

---

Confidentialité

Le suivi des erreurs respecte la vie privée de l'utilisateur :

• Les traces de pile ne contiennent pas de données utilisateur
• Les informations personnelles sont automatiquement supprimées du contexte d'erreur
• Respecte les paramètres DNT et de consentement
• Les données d'erreur suivent votre politique de rétention

---

Bonnes pratiques

1. Télécharger les cartes source : Essentiel pour déboguer le code minifié
2. Configurez les alertes : Soyez informé immédiatement des erreurs critiques
3. Examiner hebdomadairement : L'examen régulier des erreurs prévient la dette technique
4. Marquer les versions : Associez les erreurs à des versions spécifiques
5. Regarder les lectures de session : Le contexte est tout pour le débogage

---

Prochaines étapes

• Session Replay - Regardez ce que les utilisateurs ont fait avant les erreurs
• Cartes thermiques - Visualisez les interactions des utilisateurs
• Dépannage - Déboguer les problèmes courants