Ce que rrweb enregistre, et comment fonctionnent ses options de confidentialité

Qu'est-ce que rrweb ?

La bibliothèque open source rrweb, abréviation de "record and replay the web", enregistre la session d'un utilisateur dans le navigateur sous forme de JSON structuré et la rejoue comme une reconstruction regardable de la page. Le README du projet la décrit comme "a tool for recording and replaying users' interactions on the web." Elle se trouve sur github.com/rrweb-io/rrweb, le dépôt a été créé en octobre 2018, et le code est écrit en TypeScript pour que l'enregistreur et le lecteur partagent un même format d'événements typé.

rrweb est une bibliothèque, pas un produit. Elle vous donne un enregistreur qui émet des événements et un lecteur qui les consomme. Où vont ces événements, combien de temps vous les gardez et qui peut les regarder, c'est le travail de votre code. Cette séparation explique pourquoi tant d'outils de replay commerciaux partent d'elle, et pourquoi le session replay en général se ressemble autant d'un éditeur à l'autre.

rrweb enregistre-t-il de la vidéo ?

Non. rrweb enregistre l'état de la page, pas ses pixels. Au démarrage, l'enregistreur parcourt le DOM et le sérialise en un arbre de nœuds, chacun avec un id numérique unique. La documentation de sérialisation du projet qualifie ce résultat de "descriptive" : les scripts sont remplacés par des balises noscript de substitution, les valeurs des champs sont copiées dans un attribut value, les URL relatives deviennent absolues, et les feuilles de style externes sont intégrées pour que le replay s'affiche encore quand le CSS d'origine est inaccessible.

Après ce snapshot complet, tout est un diff. L'enregistreur attache un MutationObserver et un ensemble d'écouteurs, et la documentation de l'observer liste ce qu'il capture :

• Changements du DOM : création et suppression de nœuds, changements d'attributs et de texte
• Mouvements de souris
• Interactions souris : mouse up et down, clic, double clic, menu contextuel, focus, blur, et touch start, move et end
• Défilement de la page ou d'un élément
• Changements de taille de la fenêtre
• Saisies

Chaque événement porte un timestamp et un type numérique. Les types d'événements sont DomContentLoaded, Load, FullSnapshot, IncrementalSnapshot, Meta et Custom, et les événements incrémentaux ajoutent un champ data.source qui indique si le changement était une mutation, un mouvement de souris, un défilement, etc.

Le replayer reconstruit le snapshot dans une iframe et applique les événements incrémentaux dans l'ordre. Il n'exécute jamais le JavaScript de la page enregistrée. La documentation sandbox de rrweb explique que l'attribut sandbox de l'iframe bloque l'envoi de formulaires, les pop-ups comme window.open, et les scripts, y compris les gestionnaires inline et les URL javascript:. Comme la page est reconstruite à partir de nœuds, le texte d'un replay est du vrai texte que vous pouvez sélectionner. Si vous avez vraiment besoin d'un fichier vidéo, le monorepo fournit rrvideo, qu'il décrit comme "a tool for transforming the session recorded by rrweb into a video."

La même dépendance à MutationObserver fixe le plancher navigateur de rrweb. Le guide indique que "rrweb does not support IE11 and below because it uses the MutationObserver API".

Quels paquets rrweb installer ?

Le guide de rrweb recommande @rrweb/record plus @rrweb/replay pour la plupart des projets, et @rrweb/all si vous voulez un seul import pour l'enregistrement, le replay et le packer. Le tableau liste les principaux paquets du monorepo tels que leur README les décrit. Tous étaient en version 2.1.6 sur npm, publiée le 18 septembre 2026, au moment de la rédaction de cette page.

Paquet	Rôle
@rrweb/record	Le code d'enregistrement, prévu pour tourner dans votre application front-end ou votre page
@rrweb/replay	Reconstruit et rejoue les événements enregistrés dans une iframe
@rrweb/all	Enregistrement, replay et packer dans un seul paquet, sans plugins
rrweb-player	Une interface de lecture avec pause, avance rapide et navigation, construite sur @rrweb/replay
rrweb-snapshot	Sérialise le DOM et le reconstruit, la base de l'événement FullSnapshot
@rrweb/packer	Compression par événement avant l'envoi réseau
@rrweb/types, @rrweb/utils	Types et utilitaires partagés
rrdom, rrdom-nodejs	Un DOM virtuel utilisé pour faire défiler rapidement les mutations pendant le replay, plus une version Node.js
rrvideo	Convertit un enregistrement en vidéo
rrweb	Le paquet d'origine, avec enregistrement et replay ensemble

C'est sur le paquet rrweb d'origine que la documentation et le registre ne sont pas d'accord. Le guide dit : "The rrweb package is deprecated. It still works, but new projects should use @rrweb/record and @rrweb/replay." Sur npm, rrweb 2.1.6 ne porte aucun avis de dépréciation, et il se télécharge toujours plus que son remplaçant : l'API de téléchargements de npm a compté 1,874,214 téléchargements de rrweb sur la semaine du 15 au 21 septembre 2026, contre 498,366 pour @rrweb/record. Quiconque l'installe ne reçoit aucun avertissement. Si vous partez de zéro, suivez le guide et installez les paquets séparés, parce que le paquet rrweb est celui que les mainteneurs prévoient d'alléger puis de retirer.

Sous quelle licence rrweb est-il publié ?

rrweb est publié sous licence MIT. Le fichier LICENSE du dépôt commence par "Copyright (c) 2018 Contributors", et npm indique MIT pour chacun des paquets ci-dessus. La licence MIT vous permet d'utiliser, de modifier et de distribuer rrweb dans un logiciel commercial fermé, à condition de conserver l'avis de copyright et le texte de la licence.

Cette licence permissive explique les forks. Le paquet de replay de Sentry dépend de @sentry/rrweb et @sentry/rrweb-snapshot, d'après son package.json dans le dépôt sentry-javascript. Le SDK navigateur de PostHog dépend de @posthog/rrweb et @posthog/rrweb-record. Les deux éditeurs maintiennent leur propre copie, donc un correctif dans rrweb en amont n'atteint leurs utilisateurs qu'une fois fusionné par l'éditeur, et les noms d'options et les valeurs par défaut de leurs SDK diffèrent de ceux de rrweb.

Quelles options de rrweb contrôlent la confidentialité ?

rrweb expose ses contrôles de confidentialité sous forme d'options de record(). Les noms et valeurs par défaut ci-dessous sont copiés du tableau Record Options de guide.md.

Option	Défaut	Rôle
blockClass	'rr-block'	Éléments à bloquer, sous forme de chaîne ou de RegExp
blockSelector	null	Un sélecteur pour les éléments à bloquer
ignoreClass	'rr-ignore'	Éléments dont les événements de saisie sont ignorés, sous forme de chaîne ou de RegExp
ignoreSelector	null	Un sélecteur pour les éléments à ignorer
maskTextClass	'rr-mask'	Éléments dont le texte est masqué, sous forme de chaîne ou de RegExp
maskTextSelector	null	Un sélecteur pour les éléments à masquer
maskAllInputs	false	Masque tout le contenu des champs par des *
maskInputOptions	{ password: true }	Masque certains types de champs
maskInputFn	aucun	Logique personnalisée pour masquer le contenu des champs
maskTextFn	aucun	Logique personnalisée pour masquer le contenu texte
ignoreCSSAttributes	null	Un tableau d'attributs CSS à ignorer
recordCanvas	false	Enregistrer ou non les éléments canvas
recordCrossOriginIframes	false	Enregistrer ou non les iframes cross-origin, ce qui exige d'injecter rrweb dans chaque frame enfant

Les trois classes se comportent différemment, et on les confond souvent. La section confidentialité du guide le détaille. Un élément avec .rr-block "will not be recorded. Instead, it will replay as a placeholder with the same dimension." Un élément avec .rr-ignore "will not record its input events." Et "all text of elements with the class name .rr-mask and their children will be masked." Bloquer supprime l'élément. Ignorer garde l'élément mais abandonne ce que l'utilisateur y tape. Masquer garde la mise en page et remplace les caractères.

Trois classes de confidentialité, trois effets

blockClassSupprime l'élément, rejoue un espace réservé

ignoreClassConserve l'élément, ignore ses événements de saisie

maskTextClassConserve l'élément, remplace son texte

Que masque rrweb par défaut ?

rrweb masque une seule chose par défaut : la valeur des champs de mot de passe. Le guide le dit en une ligne, "input[type="password"] will be masked by default", et le code source de l'enregistreur le confirme : quand maskAllInputs n'est pas true et que vous ne passez aucun maskInputOptions, l'enregistreur se rabat sur { password: true }.

Tout le reste, y compris les champs d'e-mail, de téléphone, d'adresse et de texte libre, quitte le navigateur tel que saisi, sauf si vous configurez davantage. maskInputOptions accepte ces clés, tirées de MaskInputOptions dans les types de rrweb-snapshot : color, date, datetime-local, email, month, number, range, search, tel, text, time, url, week, textarea, select et password. Définir maskAllInputs: true les active toutes d'un coup.

Aucune option ne permet de démasquer un enfant à l'intérieur d'un parent masqué. rrweb n'a aucun réglage unmask ou unblock, donc les éditeurs qui en proposent un l'ont construit dans leur fork. Si vous comparez les bibliothèques sur leurs valeurs par défaut, notre analyse des réglages par défaut de la censure des PII qui laissent des données exposées place rrweb à côté de Sentry et Clarity.

Une règle pratique pour une nouvelle installation : commencez avec maskAllInputs: true, ajoutez maskTextClass ou maskTextSelector à tout conteneur qui affiche des données de compte, et mettez blockClass sur les widgets tiers que vous n'avez aucune raison de voir.

Comment réduire la taille d'un enregistrement rrweb ?

La recette de stockage de rrweb liste trois stratégies : bloquer les éléments du DOM qui émettent beaucoup d'événements, utiliser la configuration sampling pour abandonner des événements, et compresser ou dédupliquer ce que vous gardez.

L'option sampling allège les événements à l'intérieur d'un enregistrement plutôt que de choisir quelles sessions enregistrer. Ses clés viennent du type SamplingStrategy. mousemove prend false ou un seuil de throttling, mouseInteraction prend false ou une table par interaction, scroll et media prennent des seuils de throttling, input prend 'all' ou 'last', et canvas prend 'all' ou une fréquence de snapshots entre 1 et 60 par seconde. L'exemple de la recette définit scroll: 150 avec le commentaire "do not emit twice in 150ms" et input: 'last' pour ne garder que la valeur finale d'une séquence tapée. C'est de l'échantillonnage au niveau des événements, un levier différent du taux d'échantillonnage du session replay que proposent les éditeurs.

Pour la compression, @rrweb/packer fournit une fonction pack que vous passez en packFn, et le unpack correspondant va au replayer en unpackFn. La recette note que compresser toute la session côté backend est généralement plus efficace que la compression par événement. slimDOMOptions retire des parties du DOM comme les scripts et les commentaires, et checkoutEveryNth ou checkoutEveryNms prennent un nouveau snapshot complet à intervalles réguliers, ce qui vous permet de ne garder que la dernière portion d'une session quand une erreur se déclenche. Le guide prévient que c'est approximatif : avec checkoutEveryNth: 200, vous finissez par envoyer "the last 200 to 400 events".

Le coût de l'enregistrement est aussi une question de vitesse de page. Les chiffres publiés sur ce qu'un enregistreur ajoute à la taille du bundle et au temps du thread principal sont réunis dans de combien le session replay ralentit un site.

Questions fréquentes

rrweb est-il gratuit pour un usage commercial ?

Oui. rrweb est sous licence MIT, vous pouvez donc l'utiliser et le modifier dans un logiciel commercial fermé. Vous devez conserver l'avis de copyright et le texte de la licence avec le code que vous distribuez.

rrweb capture-t-il ce que tapent les utilisateurs ?

Oui, sauf si vous le masquez. rrweb enregistre les événements input et ne masque par défaut que input[type="password"]. Définissez maskAllInputs: true ou listez des types de champs précis dans maskInputOptions pour masquer davantage.

Quelle est la différence entre blockClass et maskTextClass dans rrweb ?

blockClass (par défaut 'rr-block') retire un élément de l'enregistrement et rejoue un placeholder de même taille. maskTextClass (par défaut 'rr-mask') garde l'élément et remplace le texte qu'il contient ainsi que celui de ses enfants.

Faut-il installer rrweb ou @rrweb/record ?

Installez @rrweb/record pour l'enregistrement et @rrweb/replay pour la lecture. Le guide de rrweb qualifie le paquet combiné rrweb de déprécié, même si npm n'affiche aucun avertissement de dépréciation dessus.

rrweb peut-il enregistrer le canvas et les iframes ?

Oui, les deux sont désactivés par défaut. recordCanvas: false et recordCrossOriginIframes: false sont les valeurs par défaut, et les iframes cross-origin exigent en plus d'injecter rrweb dans chaque frame enfant.

Quels navigateurs rrweb prend-il en charge ?

rrweb prend en charge les navigateurs qui implémentent MutationObserver. Son guide indique qu'il ne prend pas en charge Internet Explorer 11 et les versions antérieures.

Comment l'option sampling de rrweb réduit-elle la taille d'un enregistrement ?

La configuration sampling réduit le nombre d'événements à l'intérieur d'une session plutôt que d'éliminer des enregistrements entiers. scroll et media prennent un seuil de limitation, mousemove aussi, et input accepte 'last' pour ne garder que la dernière valeur d'une séquence saisie. L'exemple de la recette de stockage fixe scroll: 150, de sorte qu'un défilement n'est émis qu'une fois toutes les 150 millisecondes.

Peut-on convertir un enregistrement rrweb en fichier vidéo ?

Le monorepo rrweb inclut rrvideo, décrit comme "a tool for transforming the session recorded by rrweb into a video." Cela transforme un enregistrement composé d'un instantané du DOM et de mutations en un véritable fichier vidéo. rrweb lui-même n'enregistre toujours aucune vidéo ; rrvideo est une étape de conversion séparée, exécutée après coup.

Combien de téléchargements le paquet rrweb obsolète compte-t-il face à @rrweb/record ?

Pendant la semaine du 15 au 21 septembre 2026, npm a compté 1 874 214 téléchargements du paquet rrweb contre 498 366 pour @rrweb/record. Le guide qualifie rrweb d'obsolète, mais npm n'affiche aucun avertissement de dépréciation dessus, donc son installation n'affiche aucun avertissement. L'ancien paquet reste téléchargé bien plus souvent que son remplaçant.

Sentry et PostHog utilisent-ils directement le paquet rrweb original ?

Sentry et PostHog maintiennent chacun leur propre fork plutôt que de dépendre directement de rrweb. Le paquet de replay de Sentry dépend de @sentry/rrweb et @sentry/rrweb-snapshot, et le SDK navigateur de PostHog dépend de @posthog/rrweb et @posthog/rrweb-record. Un correctif dans le rrweb d'origine n'atteint leurs utilisateurs qu'une fois que l'éditeur l'a fusionné, et les noms d'options et valeurs par défaut de chaque fork diffèrent de ceux de rrweb.