L’installation du tracker OpenReplay dans un projet basé sur Svelte est relativement simple.

La clé pour le faire fonctionner sera l’utilisation du contexte qui, bien que cela ressemble à la façon dont nous procédons avec Next.js, sera implémenté différemment.

Comme notre tracker nécessite le contexte du navigateur pour s’exécuter, vous devrez peut-être ajuster l’exemple « Création du contexte du tracker » comme indiqué ci-dessous afin de garantir qu’il est importé et créé côté client :

<script>
  import { onMount } from 'svelte';

  onMount(async () => {
    if (process.browser) {
			// singleton approach
			const { tracker } = await import('@openreplay/tracker');
			tracker.configure({
				projectKey: "<your project key>", 
        ingestPoint: "https://openreplay.mydomain.com/ingest" // only required if using the self-hosted version of OpenReplay
			});
			tracker.start();
			
			// or you can use a class based approach
      const Tracker = await import('@openreplay/tracker');
      const tracker = new Tracker({
	      projectKey: "", // pKey
	      ingestPoint: "ingestPoint",
      })
      
      tracker.start()
    }
  })
</script>

Si vous souhaitez consulter le code complet de ce projet, jetez un œil au dépôt que nous utiliserons tout au long de ce tutoriel.

Il s’agit d’une application SvelteKit d’exemple que vous pouvez cloner et tester vous-même en suivant les instructions du fichier Readme. Une fois déployée et configurée, vous devriez pouvoir capturer des rejeux de session.

Cette solution utilisera le Contexte de Svelte, qui vous permet de partager des données entre un composant parent et tous ses enfants (un peu comme les fournisseurs de Contexte de React).

Dans cet exemple précis, nous allons ajouter le tracker pour la section Admin de notre application, nous définirons donc le contexte dans le fichier de layout Admin (src/layout/Admin.svelte). Nous le démarrerons ensuite sur la première page rendue à l’intérieur de cette section.

À l’intérieur du fichier src/layout/Admin.svelte, dans la balise script, ajoutons le code suivant :

import {Tracker, key} from "../context/tracker"

let tracker = new Tracker({
    projectKey: __myapp.env.OPENREPLAY_PROJECT_KEY
});
  
setContext(key, {
 getTracker: () => tracker
} )

Bien sûr, vous aurez davantage de code dans ce fichier, mais ce que vous voyez ci-dessus est ce qui nous concerne pour le moment.

1. Nous importons d’abord le Tracker depuis OpenReplay ainsi qu’une variable key (nous y reviendrons dans un instant).
2. Nous instancions ensuite le Tracker. Comme vous pouvez le voir, la seule option de configuration que nous utilisons est la clé du projet, que vous obtiendriez depuis l’interface après avoir configuré le projet dans OpenReplay.
3. Nous enregistrons l’instance du tracker dans le contexte créé en appelant setContext. La variable key sera utilisée plus tard pour récupérer cette valeur particulière depuis le contexte.

Utiliser le contexte (et appeler la méthode start) est aussi simple que de récupérer le contexte via la fonction getContext de Svelte.

Le contexte contenait un objet avec une fonction appelée getTracker, nous allons donc le déstructurer et appeler cette fonction.

import {key} from "../../context/tracker"
  
let {getTracker} = getContext(key)
onMount( () => {
	let tracker = getTracker()
	tracker.start()
})

Ensuite, il suffit d’appeler la méthode start depuis l’intérieur du callback onMount. Nous faisons cela pour nous assurer que nous appelons cette méthode depuis le navigateur, sinon le tracker ne fonctionnera pas.

Nous avons utilisé ce fichier aux deux endroits, il est donc temps d’y jeter un coup d’œil rapide.

Ce fichier exporte deux éléments principaux :

1. La classe Tracker, que nous avons instanciée dans le fichier de layout.
2. Nous utilisons la variable key pour enregistrer et récupérer le contexte.

Voici le contenu du fichier :

import Tracker from '@openreplay/tracker'

const key = Symbol("openreplay tracker")

export {Tracker, key}

Le seul point intéressant ici est que la variable key n’est pas une simple chaîne de caractères, c’est en réalité un Symbol. La raison en est d’éviter d’éventuelles collisions de noms avec d’autres bibliothèques tierces qui utilisent elles aussi le contexte.

La dernière chose à examiner ici est la façon dont nous gérons la clé du projet, car elle ne devrait pas être codée en dur dans votre code.

Habituellement, vous utiliseriez une variable d’environnement pour cela, cependant, comme nous avons besoin de ces données dans le navigateur et que Svelte ne propose pas de moyen simple d’y parvenir, nous résoudrons ce problème avec deux paquets : dotevn et @rollup/plugin-replace.

D’un côté, nous utiliserons le paquet dotenv pour pouvoir définir nos variables d’environnement dans un fichier .env. Nous définirons celle dont nous avons besoin :

OPENREPLAY_PROJECT_KEY="<YOUR PROJECT KEY>"

D’un autre côté, comme nous ne pouvons pas utiliser dotenv dans notre code front-end (parce qu’il dépend du module fs, qui n’est clairement pas disponible dans le navigateur), nous utiliserons le plugin replace pour rollup. Ce plugin remplacera du code dans nos fichiers par ce que nous lui indiquons. Nous configurerons donc le plugin pour remplacer la chaîne “__myapp.env.OPENREPLAY_PROJECT_KEY” par la clé réelle du projet chargée depuis le fichier .env (grâce au paquet dotenv).

Pour ce faire, ouvrez le fichier rollup.config.js à la racine du projet et ajoutez le code suivant dans la clé plugins.

replace({
  "__myapp.env.OPENREPLAY_PROJECT_KEY": `"${process.env.OPENREPLAY_PROJECT_KEY}"`
})

Ce plugin s’exécutera côté backend pendant le processus de bundling, ce qui rend tout cela possible. Si vous souhaitez inspecter le contenu complet de ce fichier de configuration, vous pouvez le consulter ici.

Vous pouvez consulter ce dépôt pour obtenir le code source complet d’une application fonctionnelle basée sur Svelte avec le Tracker.

Si vous rencontrez des problèmes lors de la configuration du Tracker dans votre projet Svelte, contactez-nous sur notre communauté Slack et posez directement vos questions à nos développeurs !