Was rrweb aufzeichnet und wie seine Datenschutzoptionen funktionieren

Was ist rrweb?

Die Open-Source-Bibliothek rrweb, kurz für "record and replay the web", zeichnet die Sitzung eines Nutzers im Browser als strukturiertes JSON auf und spielt sie als ansehbare Rekonstruktion der Seite wieder ab. Das README des Projekts beschreibt sie als "a tool for recording and replaying users' interactions on the web." Sie liegt unter github.com/rrweb-io/rrweb, das Repository wurde im October 2018 angelegt, und der Code ist in TypeScript geschrieben, sodass Recorder und Player ein gemeinsames typisiertes Event-Format teilen.

rrweb ist eine Bibliothek, kein Produkt. Sie liefert Ihnen einen Recorder, der Events ausgibt, und einen Player, der sie verarbeitet. Wohin diese Events gehen, wie lange Sie sie aufbewahren und wer sie ansehen darf, ist Aufgabe Ihres Codes. Diese Trennung ist der Grund, warum so viele kommerzielle Replay-Tools darauf aufbauen, und warum Session Replay im Allgemeinen von Anbieter zu Anbieter so ähnlich aussieht.

Zeichnet rrweb Video auf?

Nein. rrweb zeichnet den Zustand der Seite auf, nicht ihre Pixel. Beim Start durchläuft der Recorder das DOM und serialisiert es in einen Baum aus Knoten, jeder mit einer eindeutigen numerischen ID. Das Serialisierungs-Dokument des Projekts nennt diese Ausgabe "descriptive": Skripte werden durch Platzhalter-Tags noscript ersetzt, Eingabewerte in ein value-Attribut kopiert, relative URLs werden absolut, und externe Stylesheets werden inline eingebettet, damit das Replay auch dann rendert, wenn das ursprüngliche CSS nicht erreichbar ist.

Nach diesem vollständigen Snapshot ist alles ein Diff. Der Recorder hängt einen MutationObserver und eine Reihe von Listenern an, und das Observer-Dokument listet auf, was er erfasst:

• DOM-Änderungen: Erzeugen und Löschen von Knoten, Attributänderungen und Textänderungen
• Mausbewegungen
• Mausinteraktionen: Maustaste hoch und runter, Klick, Doppelklick, Kontextmenü, Fokus, Blur sowie Touch-Start, -Bewegung und -Ende
• Scrollen der Seite oder eines Elements
• Änderungen der Fenstergröße
• Eingaben

Jedes Event trägt einen timestamp und einen numerischen type. Die Event-Typen sind DomContentLoaded, Load, FullSnapshot, IncrementalSnapshot, Meta und Custom, und inkrementelle Events ergänzen ein Feld data.source, das angibt, ob die Änderung eine Mutation, eine Mausbewegung, ein Scrollen und so weiter war.

Der Replayer baut den Snapshot in einem iframe nach und wendet die inkrementellen Events der Reihe nach an. Er führt das JavaScript der aufgezeichneten Seite nie aus. Das Sandbox-Dokument von rrweb erklärt, dass das sandbox-Attribut des iframe Formularübermittlungen, Pop-ups wie window.open und Skripte blockiert, Inline-Handler und javascript:-URLs eingeschlossen. Weil die Seite aus Knoten nachgebaut wird, ist Text in einem Replay echter Text, den Sie markieren können. Wenn Sie doch eine Videodatei brauchen, liefert das Monorepo rrvideo mit, das es als "a tool for transforming the session recorded by rrweb into a video" beschreibt.

Dieselbe Abhängigkeit von MutationObserver legt die Browser-Untergrenze von rrweb fest. Der Guide stellt fest: "rrweb does not support IE11 and below because it uses the MutationObserver API".

Welche rrweb-Pakete sollten Sie installieren?

Der rrweb-Guide empfiehlt für die meisten Projekte @rrweb/record plus @rrweb/replay und @rrweb/all, wenn Sie einen einzigen Import für Aufzeichnung, Replay und Packer wollen. Die Tabelle listet die wichtigsten Pakete im Monorepo so, wie das Paket-README sie beschreibt. Jedes davon stand beim Schreiben dieser Seite auf npm bei Version 2.1.6, veröffentlicht am 18 September 2026.

Paket	Was es tut
@rrweb/record	Der Aufzeichnungscode, gedacht für den Einsatz in Ihrer Frontend-App oder Seite
@rrweb/replay	Baut aufgezeichnete Events in einem iframe nach und spielt sie ab
@rrweb/all	Aufzeichnung, Replay und Packer in einem Paket, ohne Plugins
rrweb-player	Eine Wiedergabe-Oberfläche mit Pause, Vorspulen und Springen, gebaut auf @rrweb/replay
rrweb-snapshot	Serialisiert das DOM und baut es nach, die Grundlage des FullSnapshot-Events
@rrweb/packer	Kompression pro Event vor der Netzwerkübertragung
@rrweb/types, @rrweb/utils	Gemeinsame Typen und Hilfsfunktionen
rrdom, rrdom-nodejs	Ein virtuelles DOM, mit dem Mutationen während des Replays vorgespult werden, plus eine Node.js-Version
rrvideo	Wandelt eine Aufzeichnung in ein Video um
rrweb	Das ursprüngliche Paket mit Aufzeichnung und Replay zusammen

Beim ursprünglichen Paket rrweb widersprechen sich Dokumentation und Registry. Der Guide sagt: "The rrweb package is deprecated. It still works, but new projects should use @rrweb/record and @rrweb/replay." Auf npm trägt rrweb 2.1.6 keinen Deprecation-Hinweis, und es wird weiterhin häufiger heruntergeladen als sein Nachfolger: Die Download-API von npm zählte in der Woche vom 15 bis 21 September 2026 1,874,214 Downloads von rrweb gegenüber 498,366 für @rrweb/record. Wer es installiert, bekommt keine Warnung. Wenn Sie neu anfangen, folgen Sie dem Guide und installieren Sie die getrennten Pakete, denn das Paket rrweb ist dasjenige, das die Maintainer verschlanken und entfernen wollen.

Unter welcher Lizenz steht rrweb?

rrweb steht unter der MIT License. Die Datei LICENSE im Repository beginnt mit "Copyright (c) 2018 Contributors", und npm führt für jedes der Pakete oben MIT. MIT erlaubt Ihnen, rrweb in proprietärer kommerzieller Software zu nutzen, zu verändern und auszuliefern, solange Sie den Copyright- und Lizenzhinweis beibehalten.

Diese freizügige Lizenz erklärt die Forks. Das Replay-Paket von Sentry hängt laut seiner package.json im Repository sentry-javascript von @sentry/rrweb und @sentry/rrweb-snapshot ab. Das Browser-SDK von PostHog hängt von @posthog/rrweb und @posthog/rrweb-record ab. Beide Anbieter pflegen eine eigene Kopie, ein Fix im Upstream-rrweb erreicht deren Nutzer also erst, wenn der Anbieter ihn übernimmt, und die Optionsnamen und Standardwerte in ihren SDKs weichen von denen von rrweb ab.

Welche rrweb-Optionen steuern den Datenschutz?

rrweb stellt seine Datenschutzkontrollen als Optionen von record() bereit. Die Namen und Standardwerte unten stammen aus der Tabelle Record Options in guide.md.

Option	Standard	Was sie tut
blockClass	'rr-block'	Zu blockierende Elemente, als String oder RegExp
blockSelector	null	Ein Selector für zu blockierende Elemente
ignoreClass	'rr-ignore'	Elemente, deren Eingabe-Events ignoriert werden, als String oder RegExp
ignoreSelector	null	Ein Selector für zu ignorierende Elemente
maskTextClass	'rr-mask'	Elemente, deren Text maskiert wird, als String oder RegExp
maskTextSelector	null	Ein Selector für zu maskierende Elemente
maskAllInputs	false	Maskiert alle Eingabeinhalte als *
maskInputOptions	{ password: true }	Maskiert bestimmte Arten von Eingaben
maskInputFn	keiner	Eigene Logik zum Maskieren von Eingabeinhalten
maskTextFn	keiner	Eigene Logik zum Maskieren von Textinhalten
ignoreCSSAttributes	null	Ein Array von CSS-Attributen, die ignoriert werden
recordCanvas	false	Ob canvas-Elemente aufgezeichnet werden
recordCrossOriginIframes	false	Ob Cross-Origin-iframes aufgezeichnet werden, wofür rrweb in jeden Kind-Frame eingebunden sein muss

Die drei Klassen verhalten sich unterschiedlich, und sie werden oft verwechselt. Der Datenschutzabschnitt des Guides erklärt es genau. Ein Element mit .rr-block "will not be recorded. Instead, it will replay as a placeholder with the same dimension." Ein Element mit .rr-ignore "will not record its input events." Und "all text of elements with the class name .rr-mask and their children will be masked." Blockieren entfernt das Element. Ignorieren behält das Element, verwirft aber, was der Nutzer hineintippt. Maskieren behält das Layout und ersetzt die Zeichen.

Drei Datenschutzklassen, drei Effekte

blockClassEntfernt das Element, spielt einen Platzhalter ab

ignoreClassBehält das Element, verwirft seine Eingabe-Events

maskTextClassBehält das Element, ersetzt seinen Text

Was maskiert rrweb standardmäßig?

rrweb maskiert standardmäßig genau eine Sache: den Wert von Passwortfeldern. Der Guide sagt es in einer Zeile, "input[type="password"] will be masked by default", und der Quellcode des Recorders bestätigt es: Wenn maskAllInputs nicht true ist und Sie keine maskInputOptions übergeben, greift der Recorder auf { password: true } zurück.

Alles andere, E-Mail-, Telefon-, Adress- und Freitextfelder eingeschlossen, verlässt den Browser so, wie es getippt wurde, es sei denn, Sie konfigurieren mehr. maskInputOptions akzeptiert diese Schlüssel aus MaskInputOptions in den Typen von rrweb-snapshot: color, date, datetime-local, email, month, number, range, search, tel, text, time, url, week, textarea, select und password. maskAllInputs: true schaltet alle auf einmal ein.

Es gibt keine Option, ein Kind innerhalb eines maskierten Elternelements wieder sichtbar zu machen. rrweb hat keine Einstellung unmask oder unblock, Anbieter, die so etwas anbieten, haben es also in ihren Fork eingebaut. Wenn Sie Bibliotheken nach ihren Standardwerten vergleichen, stellt unsere Aufschlüsselung, wo die Standardwerte der PII-Schwärzung Daten offenlegen, rrweb neben Sentry und Clarity.

Eine praktische Regel für eine neue Installation: Beginnen Sie mit maskAllInputs: true, ergänzen Sie maskTextClass oder maskTextSelector an jedem Container, der Kontodaten rendert, und setzen Sie blockClass auf Drittanbieter-Widgets, die Sie nicht sehen müssen.

Wie verkleinern Sie eine rrweb-Aufzeichnung?

Das Speicher-Rezept von rrweb nennt drei Strategien: DOM-Elemente blockieren, die viele Events auslösen, mit der sampling-Konfiguration Events verwerfen und das, was Sie behalten, komprimieren oder deduplizieren.

Die Option sampling dünnt Events innerhalb einer Aufzeichnung aus, statt auszuwählen, welche Sitzungen aufgezeichnet werden. Ihre Schlüssel stammen aus dem Typ SamplingStrategy. mousemove nimmt false oder einen Throttle-Schwellenwert, mouseInteraction nimmt false oder eine Zuordnung pro Interaktion, scroll und media nehmen Throttle-Schwellenwerte, input nimmt 'all' oder 'last', und canvas nimmt 'all' oder eine Snapshot-Rate zwischen 1 und 60 pro Sekunde. Das Beispiel im Rezept setzt scroll: 150 mit dem Kommentar "do not emit twice in 150ms" und input: 'last', um nur den Endwert einer getippten Folge zu behalten. Das ist Sampling auf Event-Ebene, ein anderer Hebel als die Session-Replay-Sampling-Rate, die Anbieter anbieten.

Für die Kompression liefert @rrweb/packer eine Funktion pack, die Sie als packFn übergeben, und das passende unpack geht als unpackFn an den Replayer. Das Rezept merkt an, dass die Kompression der ganzen Sitzung im Backend meist besser abschneidet als die Kompression pro Event. slimDOMOptions entfernt Teile des DOM wie Skripte und Kommentare, und checkoutEveryNth oder checkoutEveryNms erstellen in Abständen einen frischen vollständigen Snapshot, sodass Sie nur den letzten Abschnitt einer Sitzung behalten können, wenn ein Fehler auftritt. Der Guide warnt, dass das nur ungefähr gilt: Mit checkoutEveryNth: 200 senden Sie am Ende "the last 200 to 400 events".

Die Kosten der Aufzeichnung sind auch eine Frage der Ladegeschwindigkeit. Die veröffentlichten Zahlen dazu, was ein Recorder an Bundle-Größe und Main-Thread-Zeit hinzufügt, sind unter wie stark Session Replay eine Website verlangsamt gesammelt.

Häufig gestellte Fragen

Ist rrweb kommerziell kostenlos nutzbar?

Ja. rrweb steht unter der MIT-Lizenz, Sie können es also in proprietärer kommerzieller Software nutzen und verändern. Sie müssen den Copyright-Hinweis und den Lizenztext mit dem ausgelieferten Code beibehalten.

Erfasst rrweb, was Nutzer tippen?

Ja, es sei denn, Sie maskieren es. rrweb zeichnet input-Events auf und maskiert standardmäßig nur input[type="password"]. Setzen Sie maskAllInputs: true oder listen Sie bestimmte Eingabetypen in maskInputOptions auf, um mehr zu maskieren.

Was ist der Unterschied zwischen blockClass und maskTextClass in rrweb?

blockClass (Standard 'rr-block') entfernt ein Element aus der Aufzeichnung und spielt einen gleich großen Platzhalter ab. maskTextClass (Standard 'rr-mask') behält das Element und ersetzt den Text darin und in seinen Kindern.

Sollte ich rrweb oder @rrweb/record installieren?

Installieren Sie @rrweb/record für die Aufzeichnung und @rrweb/replay für die Wiedergabe. Der rrweb-Guide bezeichnet das kombinierte Paket rrweb als deprecated, obwohl npm dafür keine Deprecation-Warnung anzeigt.

Kann rrweb Canvas und iframes aufzeichnen?

Ja, beides ist standardmäßig ausgeschaltet. recordCanvas: false und recordCrossOriginIframes: false sind die Standardwerte, und Cross-Origin-iframes brauchen zusätzlich rrweb in jedem Kind-Frame.

Welche Browser unterstützt rrweb?

rrweb unterstützt Browser, die MutationObserver implementieren. Sein Guide stellt fest, dass es Internet Explorer 11 und älter nicht unterstützt.

Wie verkleinert die Sampling-Option von rrweb eine Aufzeichnung?

Die sampling-Konfiguration dünnt Events innerhalb einer Sitzung aus, statt ganze Aufzeichnungen zu verwerfen. scroll und media nehmen einen Drosselungswert, mousemove ebenfalls, und input akzeptiert 'last', um nur den letzten Wert einer Eingabesequenz zu behalten. Das Beispiel aus dem Storage-Rezept setzt scroll: 150, sodass ein Scroll nur alle 150 Millisekunden ausgelöst wird.

Kann man eine rrweb-Aufzeichnung in eine Videodatei umwandeln?

Das rrweb-Monorepo enthält rrvideo, beschrieben als "a tool for transforming the session recorded by rrweb into a video." Damit wird eine Aufzeichnung aus DOM-Snapshot und Mutationen in eine echte Videodatei umgewandelt. rrweb selbst zeichnet weiterhin kein Video auf; rrvideo ist ein separater Konvertierungsschritt im Nachhinein.

Wie viele Downloads hat das veraltete rrweb-Paket im Vergleich zu @rrweb/record?

In der Woche vom 15. bis 21. September 2026 zählte npm 1.874.214 Downloads des Pakets rrweb gegenüber 498.366 für @rrweb/record. Der Guide bezeichnet rrweb als veraltet, aber npm zeigt keinen Deprecation-Hinweis dafür an, sodass bei der Installation keine Warnung erscheint. Das ältere Paket wird weiterhin deutlich häufiger heruntergeladen als sein Nachfolger.

Verwenden Sentry und PostHog das ursprüngliche rrweb-Paket direkt?

Sentry und PostHog pflegen jeweils einen eigenen Fork, statt direkt von rrweb abzuhängen. Das Replay-Paket von Sentry hängt von @sentry/rrweb und @sentry/rrweb-snapshot ab, und das Browser-SDK von PostHog von @posthog/rrweb und @posthog/rrweb-record. Ein Fix im Upstream-rrweb erreicht deren Nutzer erst, wenn der Anbieter ihn übernimmt, und die Optionsnamen und Standardwerte jedes Forks weichen von denen von rrweb ab.