JavaScript

JavaScript navigateur

Installez le SDK navigateur de SnagSpy, capturez votre première erreur, et rendez la pile d’appels lisible. Une quinzaine de minutes.

Installer ↓Référence

Prérequis

Vous utilisez un framework ? Ce guide couvre le JavaScript natif. Les guides React, Vue, Next.js et les autres n’existent pas encore — le SDK fonctionne dans ces applications, mais rien ici n’est spécifique à leur cycle de vie.

Il vous faut :

Un compte SnagSpy et un projet
Le DSN de ce projet
Une application qui tourne dans un navigateur

1Installer

Le SDK navigateur est un paquet npm distinct de la CLI, parce qu’il est livré à l’intérieur de votre application et devient une dépendance de la vôtre.

Pas encore publié Le paquet @snagspy/replay n’est pas encore sur le registre npm public : la commande ci-dessous échouera aujourd’hui. Écrivez-nous pour obtenir une archive en attendant. La CLI, elle, est publiée et s’installe normalement.

npm

npm install @snagspy/replay

2Configurer

Initialiser le suivi des erreurs

Appelez init aussi tôt que possible — une erreur levée avant cet appel n’est pas capturée, parce que les gestionnaires globaux ne sont pas encore posés. init ne lève jamais d’exception : un DSN invalide produit un avertissement et un client inerte, jamais une page cassée.

JavaScript

import { init } from '@snagspy/replay/errors'

const snagspy = init({
  dsn: globalThis._importMeta_.env.VITE_SNAGSPY_DSN,
  release: globalThis._importMeta_.env.VITE_COMMIT_SHA,
  environment: 'production',
})

Les options qui comptent

dsn est le seul champ obligatoire. Les trois suivants changent ce que vous verrez dans le tableau de bord :

release: La version de ce build, un sha git par exemple. C’est la clé sur laquelle la corrélation de déploiement s’appuie, et le recours du résolveur quand une frame ne porte pas de debug id.
serviceName: Le nom sous lequel cette page se déclare. Par défaut le nom d’hôte. Une application monopage et son API déclarant le même nom fusionneraient leurs incidents dans une seule liste.
environment: production, staging, et ainsi de suite.
beforeSend: Dernière occasion d’inspecter ou d’abandonner un événement. Il s’exécute après la redaction, donc vous voyez ce qui partirait réellement.

Rendre la pile d’appels lisible

Une pile minifiée nomme t.js:1:4821. Envoyez les source maps du build avec la CLI, en passant la même version que celle donnée à init — c’est ce qui rattache les deux.

Terminal

npx snagspy upload --project <project-id> --release "$COMMIT_SHA" ./dist

Relier la relecture de session

Le point d’entrée racine est l’enregistreur, pas le suivi d’erreurs : son init renvoie une Session. Passez son sessionID au suivi d’erreurs pour joindre les deux.

JavaScript

import { init as record } from '@snagspy/replay'
import { init } from '@snagspy/replay/errors'

const session = record({ dsn: DSN })
const snagspy = init({ dsn: DSN, sessionID: session.sessionID ?? undefined })

3Vérifier

Levez une erreur depuis la page elle-même et regardez-la arriver.

HTML

<button onclick="throw new Error('SnagSpy test error')">
  Break the world
</button>

captureException

captureException sert aux erreurs que votre code a rattrapées : leur niveau par défaut est warning, parce que l’application a continué. Une erreur non rattrapée est toujours error.

JavaScript

try {
  risky()
} catch (error) {
  snagspy.captureException(error, { level: 'error' })
}

4Étapes suivantes

À ce stade, les erreurs de votre application arrivent dans SnagSpy. Ensuite :

Envoyer vos source maps depuis la CI →Brancher un backend avec OpenTelemetry →Parcourir la référence complète →