SDK JavaScript ⁠-⁠ Initialisation du SDK

La ligne suivante installera le traqueur et avec lui le SDK pour vous permettre de profiter de toutes les fonctionnalités du traqueur.

npm i @openreplay/tracker

Lors de l’instanciation du traqueur OpenReplay, plusieurs options de configuration vous permettent de personnaliser de nombreux aspects de l’enregistrement et de l’expérience d’enregistrement.

Vous devez définir l’option projectKey dans le constructeur. Vous pouvez obtenir cette valeur dans votre tableau de bord OpenReplay sous ‘Préférences > Projets’.

Si votre site Web est une Application monopage (SPA), utilisez le code ci-dessous :

import OpenReplay from '@openreplay/tracker';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY
});
tracker.start(); // renvoie une promesse avec les informations de session (sessionID, sessionHash, userUUID)

Sinon, si votre application Web est Rendue côté serveur (SSR) (par exemple, NextJS, NuxtJS), utilisez le fragment de code ci-dessous. Assurez-vous que tracker.start() est appelé une fois que l’application est démarrée (dans useEffect ou componentDidMount).

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY,
});
//...
function MyApp() {
useEffect(() => { // utilisez componentDidMount dans le cas d'un composant de classe React
tracker.start(); // renvoie une promesse avec les informations de session (sessionID, sessionHash, userUUID)
}, [])
}

import OpenReplay from '@openreplay/tracker/cjs';
//...
const tracker = new OpenReplay({
projectKey: PROJECT_KEY,
ingestPoint: "https://openreplay.mydomain.com/ingest", // lors de l'utilisation de la version auto-hébergée d'OpenReplay
capturePerformance: true,
__DISABLE_SECURE_MODE: true // pour les tests locaux
});

Il existe un ensemble d’options que vous pouvez passer au constructeur. Seul projectKey est requis.

• projectKey: string L’ID du projet que vous suivez.
• sessionHash?: string Le hash de la session initiale. Cela est utile lorsque les sessions traversent différents sous-domaines de votre application Web, mais vous souhaitez les regrouper en un seul enregistrement. Dans le cas où il n’est pas possible de continuer la session (n’existe pas ou est terminée), le traqueur démarrera automatiquement une nouvelle. Il est également renvoyé sur stop(). Plus de détails ici.
• ingestPoint?: string Votre domaine OpenReplay (par exemple, https://openreplay.mydomain.com/ingest), vers lequel le traqueur enverra des événements. Ceci est facultatif pour les utilisateurs du Cloud OpenReplay. Par défaut : https://api.openreplay.com/ingest (qui pointe vers le Cloud OpenReplay).
• revID?: string L’ID de révision de votre application Web. Utile lors de la recherche de problèmes survenant sur une version de publication spécifique.
• resourceBaseHref?: string Se réfère au domaine publiquement accessible où les actifs (styles, polices et icônes) pourraient être récupérés par OpenReplay. Puisqu’ils sont nécessaires pour une relecture correcte de la session, cette option est utile pour contourner la limitation d’avoir votre site (et donc les actifs) hébergé dans un domaine privé. Exemple : https://monsitepublic.com/assets/.
• captureIFrames?: boolean Pour capturer tous les iFrames du même domaine dans votre application Web. Si vous souhaitez suivre un iFrame spécifique, ajoutez simplement l’attribut HTML data-openreplay-capture à la balise <iframe>. Par défaut : true.
• disableClickmaps?: boolean Pour désactiver les cartes de clics. Par défaut : true.
• verbose?: boolean Pour activer les logs. Par défaut : false.
• autoResetOnWindowOpen?: boolean Activez cette option pour réinitialiser l’ID de session lors de l’ouverture d’un nouvel onglet depuis votre application. Cela remplace la méthode window.open pour éviter les ID de session en double en raison du partage du stockage de session entre les onglets du navigateur. Par défaut : false.
• forceSingleTab: boolean Désactive les capacités d’enregistrement multi-onglets. Par défaut : false.
• disableStringDict: boolean Désactive la logique de dictionnaire de chaînes (pour optimiser le stockage) dans les enregistrements. Par défaut : false.

• respectDoNotTrack?: boolean Ne pas démarrer le traqueur si le drapeau “ne pas suivre” est activé dans le navigateur de l’utilisateur. Par défaut : false.
• obscureTextEmails?: boolean Obscurcit les e-mails dans les éléments de texte. Les e-mails seront convertis en une chaîne aléatoire d’astérisques. Par défaut : true.
• obscureTextNumbers?: boolean Obscurcit les chiffres dans les éléments de texte. Les chiffres seront convertis en une chaîne aléatoire d’astérisques. Par défaut : false.
• obscureInputEmails?: boolean Obscurcit les e-mails dans les champs de saisie. Les valeurs des e-mails seront converties en une chaîne aléatoire d’astérisques. Par défaut : true.
• obscureInputNumbers?: boolean Obscurcit les chiffres dans les champs de saisie. Les valeurs des chiffres seront converties en une chaîne aléatoire d’astérisques. Par défaut : false.
• obscureInputDates?: boolean Obscurcit les dates dans les champs de saisie. Les valeurs des dates seront converties en une chaîne aléatoire d’astérisques. Par défaut : false.
• defaultInputMode?: 0 | 1 | 2 Mode de capture par défaut pour les valeurs de saisie. Respectivement : en clair, obscurci ou ignoré. Par défaut : 1 (obscurci).

Notez que les données exclues sont obscurcies ou supprimées avant l’envoi des données aux serveurs OpenReplay. Les modifications apportées aux options ci-dessus ne peuvent pas être rétroactives et ne s’appliqueront qu’aux données nouvellement collectées. Voir Sanitize Data pour plus de détails.

• consoleMethods?: Array<'log' | 'info' | 'warn' | 'error' 'debug' | 'assert'> | null Spécifie la liste des méthodes de console à capturer. Par défaut : ['log', 'info', 'warn', 'error', 'debug', 'assert']
• consoleThrottling?: number Nombre maximal d’entrées de console capturées par seconde. Par défaut : 30.

• captureExceptions?: boolean Capture les exceptions JavaScript et les traces de pile. Par défaut : true.

• captureResourceTimings?: boolean Enregistre les timings des ressources. Par défaut : true.
• capturePageLoadTimings?: boolean Enregistre les timings de chargement de la page. Par défaut : true.
• capturePageRenderTimings?: boolean Calcule les métriques de rendu de la page telles que l’indice de vitesse, la complétude visuelle ou le temps jusqu’à interactivité. Nécessite captureResourceTimings = true. Par défaut : true.

• capturePerformance?: boolean Pour capturer les métriques de performance telles que la fréquence d’images, la consommation de CPU et de mémoire. Par défaut : true.

L’option network concerne la capture des requêtes réseau et des charges utiles pour fetch et XHR.

network?: {
failuresOnly: boolean;
sessionTokenHeader: string;
ignoreHeaders: Array<string> | boolean;
capturePayload: boolean; // assurez-vous de désinfecter vos données avant de l'activer
sanitizer: (RequestResponseData) => RequestResponseData | null;
captureInIframes: boolean;
axiosInstances: AxiosInstance[];
useProxy?: boolean;
tokenUrlMatcher?: (url: string) => boolean;
}

Consultez les Options Réseau pour des exemples et plus de détails sur la façon de masquer les données sensibles.

L’option mouse concerne la capture des sélecteurs pour les clics afin de construire des cartographies de clics.

mouse?:
{
disableClickmaps?: boolean
minSelectorDepth?: number
nthThreshold?: number
maxOptimiseTries?: number
}

• disableClickmaps?: boolean Désactive entièrement le calcul du sélecteur. Par défaut : false.
• minSelectorDepth?: number Longueur minimale d’un sélecteur optimisé (par défaut 2). Exemple : body > div > div > p => body > p
• nthThreshold?: number Nombre d’essais de sélecteur avant de revenir aux sélecteurs nth-child. C’est une opération coûteuse et peut entraîner un surcoût important, ne réglez pas plus haut que 2000. Par défaut : 1000.
• maxOptimiseTries?: number Nombre d’essais pour optimiser et raccourcir le sélecteur. Par défaut : 10 000.

• connAttemptCount?: number Nombre maximal de tentatives de reconnexion lorsque les requêtes HTTP du traqueur échouent à atteindre le backend. Par défaut : 10.
• connAttemptGap?: number Durée entre chaque tentative de reconnexion (exprimée en ms). Par défaut : 8000.

• __DISABLE_SECURE_MODE?: boolean Pour permettre une connexion non sécurisée entre le traqueur et le backend sur des sites sans SSL. Ceci doit être utilisé uniquement à des fins de développement. Par défaut : false.