Qué graba rrweb y cómo funcionan sus opciones de privacidad

¿Qué es rrweb?

La librería open source rrweb, abreviatura de "record and replay the web", graba la sesión de un usuario en el navegador como JSON estructurado y la reproduce como una reconstrucción de la página que se puede ver. El README del proyecto la describe como "a tool for recording and replaying users' interactions on the web." Vive en github.com/rrweb-io/rrweb, el repositorio se creó en octubre de 2018 y el código está escrito en TypeScript, así que el grabador y el reproductor comparten un mismo formato de eventos tipado.

rrweb es una librería, no un producto. Te da un grabador que emite eventos y un reproductor que los consume. Adónde van esos eventos, cuánto tiempo los guardas y quién puede verlos es trabajo de tu código. Esa separación es la razón por la que tantas herramientas comerciales de repetición parten de ella, y por la que la session replay en general se parece tanto de un proveedor a otro.

¿rrweb graba vídeo?

No. rrweb graba el estado de la página, no sus píxeles. Al arrancar, el grabador recorre el DOM y lo serializa en un árbol de nodos, cada uno con un id numérico único. La documentación de serialización del proyecto llama a esta salida "descriptive": los scripts se sustituyen por etiquetas noscript de marcador, los valores de los inputs se copian a un atributo value, las URL relativas pasan a ser absolutas y las hojas de estilo externas se incrustan para que la repetición siga renderizándose cuando el CSS original no está disponible.

Después de ese snapshot completo, todo es un diff. El grabador engancha un MutationObserver y un conjunto de listeners, y la documentación del observer enumera lo que captura:

• Cambios en el DOM: creación y eliminación de nodos, cambios de atributos y cambios de texto
• Movimiento del ratón
• Interacción con el ratón: mouse up y down, clic, doble clic, menú contextual, focus, blur, y touch start, move y end
• Scroll de la página o de un elemento
• Cambios de tamaño de la ventana
• Input

Cada evento lleva un timestamp y un type numérico. Los tipos de evento son DomContentLoaded, Load, FullSnapshot, IncrementalSnapshot, Meta y Custom, y los eventos incrementales añaden un campo data.source que indica si el cambio fue una mutación, un movimiento del ratón, un scroll, etcétera.

El reproductor reconstruye el snapshot dentro de un iframe y aplica los eventos incrementales en orden. Nunca ejecuta el JavaScript de la página grabada. La documentación del sandbox de rrweb explica que el atributo sandbox del iframe bloquea el envío de formularios, las ventanas emergentes como window.open y los scripts, incluidos los manejadores inline y las URL javascript:. Como la página se reconstruye a partir de nodos, el texto de una repetición es texto real que puedes seleccionar. Si necesitas un archivo de vídeo, el monorepo incluye rrvideo, que describe como "a tool for transforming the session recorded by rrweb into a video."

La misma dependencia de MutationObserver fija el mínimo de navegador de rrweb. La guía afirma que "rrweb does not support IE11 and below because it uses the MutationObserver API".

¿Qué paquetes de rrweb deberías instalar?

La guía de rrweb recomienda @rrweb/record más @rrweb/replay para la mayoría de los proyectos, y @rrweb/all cuando quieres una sola importación para la grabación, la repetición y el packer. La tabla recoge los paquetes principales del monorepo tal como los describe su README de paquetes. Todos estaban en la versión 2.1.6 en npm, publicada el 18 September 2026, cuando se escribió esta página.

Paquete	Qué hace
@rrweb/record	El código de grabación, pensado para ejecutarse en tu app front-end o en tu página
@rrweb/replay	Reconstruye y reproduce los eventos grabados en un iframe
@rrweb/all	Grabación, repetición y el packer en un solo paquete, sin plugins
rrweb-player	Una interfaz de reproducción con pausa, avance rápido y búsqueda, construida sobre @rrweb/replay
rrweb-snapshot	Serializa el DOM y lo reconstruye, la base del evento FullSnapshot
@rrweb/packer	Compresión por evento antes de la transferencia por red
@rrweb/types, @rrweb/utils	Tipos y utilidades compartidos
rrdom, rrdom-nodejs	Un DOM virtual que se usa para avanzar rápido por las mutaciones durante la repetición, más una versión para Node.js
rrvideo	Convierte una grabación en un vídeo
rrweb	El paquete original, con grabación y repetición juntas

El paquete rrweb original es donde la documentación y el registro no coinciden. La guía dice: "The rrweb package is deprecated. It still works, but new projects should use @rrweb/record and @rrweb/replay." En npm, rrweb 2.1.6 no lleva ningún aviso de obsolescencia, y sigue superando en descargas a su sustituto: la API de descargas de npm contó 1,874,214 descargas de rrweb en la semana del 15 al 21 de septiembre de 2026, frente a 498,366 de @rrweb/record. Quien lo instala no recibe ningún aviso. Si empiezas de cero, sigue la guía e instala los paquetes separados, porque el paquete rrweb es el que los mantenedores planean adelgazar y retirar.

¿Bajo qué licencia se publica rrweb?

rrweb se publica bajo la MIT License. El archivo LICENSE del repositorio empieza con "Copyright (c) 2018 Contributors", y npm indica MIT para cada uno de los paquetes de arriba. MIT te permite usar, modificar y distribuir rrweb en software comercial de código cerrado siempre que mantengas el aviso de copyright y de licencia.

Esa licencia permisiva explica los forks. El paquete de replay de Sentry depende de @sentry/rrweb y @sentry/rrweb-snapshot, según su package.json en el repositorio sentry-javascript. El SDK de navegador de PostHog depende de @posthog/rrweb y @posthog/rrweb-record. Los dos proveedores mantienen su propia copia, así que un arreglo en el rrweb original no llega a sus usuarios hasta que el proveedor lo fusiona, y los nombres de las opciones y los valores por defecto de sus SDK difieren de los del propio rrweb.

¿Qué opciones de rrweb controlan la privacidad?

rrweb expone sus controles de privacidad como opciones de record(). Los nombres y los valores por defecto de abajo están copiados de la tabla Record Options de guide.md.

Opción	Por defecto	Qué hace
blockClass	'rr-block'	Elementos que se bloquean, como string o RegExp
blockSelector	null	Un selector para los elementos que se bloquean
ignoreClass	'rr-ignore'	Elementos cuyos eventos de input se ignoran, como string o RegExp
ignoreSelector	null	Un selector para los elementos que se ignoran
maskTextClass	'rr-mask'	Elementos cuyo texto se enmascara, como string o RegExp
maskTextSelector	null	Un selector para los elementos que se enmascaran
maskAllInputs	false	Enmascara todo el contenido de los inputs como *
maskInputOptions	{ password: true }	Enmascara algunos tipos de input
maskInputFn	ninguno	Lógica personalizada para enmascarar el contenido de los inputs
maskTextFn	ninguno	Lógica personalizada para enmascarar el contenido de texto
ignoreCSSAttributes	null	Un array de atributos CSS que se ignoran
recordCanvas	false	Si se graban los elementos canvas
recordCrossOriginIframes	false	Si se graban los iframes cross-origin, lo que exige inyectar rrweb en cada frame hijo

Las tres clases se comportan de forma distinta, y la gente las confunde. La sección de privacidad de la guía lo deja claro. Un elemento con .rr-block "will not be recorded. Instead, it will replay as a placeholder with the same dimension." Un elemento con .rr-ignore "will not record its input events." Y "all text of elements with the class name .rr-mask and their children will be masked." Bloquear elimina el elemento. Ignorar mantiene el elemento pero descarta lo que el usuario escribe en él. Enmascarar mantiene el layout y sustituye los caracteres.

Tres clases de privacidad, tres efectos

blockClassElimina el elemento, reproduce un marcador de posición

ignoreClassMantiene el elemento, descarta sus eventos de entrada

maskTextClassMantiene el elemento, sustituye su texto

¿Qué enmascara rrweb por defecto?

rrweb enmascara una sola cosa por defecto: el valor de los campos de contraseña. La guía lo dice en una línea, "input[type="password"] will be masked by default", y el código del grabador lo confirma: cuando maskAllInputs no es true y no pasas maskInputOptions, el grabador recurre a { password: true }.

Todo lo demás, incluidos los campos de email, teléfono, dirección y texto libre, sale del navegador tal como se escribió salvo que configures más. maskInputOptions acepta estas claves, sacadas de MaskInputOptions en los tipos de rrweb-snapshot: color, date, datetime-local, email, month, number, range, search, tel, text, time, url, week, textarea, select y password. Poner maskAllInputs: true las activa todas a la vez.

No existe ninguna opción para desenmascarar un hijo dentro de un padre enmascarado. rrweb no tiene ajuste unmask ni unblock, así que los proveedores que ofrecen uno lo han construido en su fork. Si comparas librerías por sus valores por defecto, nuestro desglose de dónde dejan expuestos los datos los valores por defecto de redacción de PII pone rrweb junto a Sentry y Clarity.

Una regla práctica para una instalación nueva: empieza con maskAllInputs: true, añade maskTextClass o maskTextSelector a cualquier contenedor que renderice datos de la cuenta y pon blockClass en los widgets de terceros que no tienes motivo para ver.

¿Cómo se reduce el tamaño de una grabación de rrweb?

La receta de almacenamiento de rrweb enumera tres estrategias: bloquear los elementos del DOM que emiten muchos eventos, usar la configuración sampling para descartar eventos y comprimir o deduplicar lo que guardas.

La opción sampling aclara los eventos dentro de una grabación en lugar de elegir qué sesiones grabar. Sus claves vienen del tipo SamplingStrategy. mousemove acepta false o un umbral de throttle, mouseInteraction acepta false o un mapa por interacción, scroll y media aceptan umbrales de throttle, input acepta 'all' o 'last', y canvas acepta 'all' o una tasa de snapshots de entre 1 y 60 por segundo. El ejemplo de la receta fija scroll: 150 con el comentario "do not emit twice in 150ms" e input: 'last' para quedarse solo con el valor final de una secuencia tecleada. Eso es muestreo a nivel de evento, una palanca distinta de la tasa de muestreo de session replay que exponen los proveedores.

Para la compresión, @rrweb/packer ofrece una función pack que pasas como packFn, y el unpack correspondiente va al reproductor como unpackFn. La receta señala que comprimir la sesión entera en el backend suele ganar a la compresión por evento. slimDOMOptions elimina partes del DOM como scripts y comentarios, y checkoutEveryNth o checkoutEveryNms toman un snapshot completo nuevo a intervalos, lo que te permite quedarte solo con el último tramo de una sesión cuando salta un error. La guía advierte de que esto es aproximado: con checkoutEveryNth: 200 acabas enviando "the last 200 to 400 events".

El coste de grabar también es una cuestión de velocidad de página. Las cifras publicadas sobre lo que un grabador añade al tamaño del bundle y al tiempo del hilo principal están recopiladas en cuánto ralentiza un sitio la session replay.

Preguntas frecuentes

¿rrweb es gratis para uso comercial?

Sí. rrweb tiene licencia MIT, así que puedes usarlo y modificarlo en software comercial de código cerrado. Tienes que mantener el aviso de copyright y el texto de la licencia junto al código que distribuyes.

¿rrweb captura lo que escriben los usuarios?

Sí, salvo que lo enmascares. rrweb graba los eventos input y por defecto solo enmascara input[type="password"]. Pon maskAllInputs: true o enumera tipos de input concretos en maskInputOptions para enmascarar más.

¿Cuál es la diferencia entre blockClass y maskTextClass en rrweb?

blockClass (por defecto 'rr-block') elimina un elemento de la grabación y reproduce un marcador del mismo tamaño. maskTextClass (por defecto 'rr-mask') mantiene el elemento y sustituye el texto dentro de él y de sus hijos.

¿Debería instalar rrweb o @rrweb/record?

Instala @rrweb/record para grabar y @rrweb/replay para reproducir. La guía de rrweb declara obsoleto el paquete combinado rrweb, aunque npm no muestra ningún aviso de obsolescencia en él.

¿Puede rrweb grabar canvas e iframes?

Sí, pero las dos cosas están desactivadas por defecto. recordCanvas: false y recordCrossOriginIframes: false son los valores por defecto, y los iframes cross-origin además necesitan que rrweb se inyecte en cada frame hijo.

¿Qué navegadores soporta rrweb?

rrweb soporta los navegadores que implementan MutationObserver. Su guía afirma que no soporta Internet Explorer 11 ni versiones anteriores.

¿Cómo reduce el tamaño de una grabación la opción sampling de rrweb?

La configuración sampling reduce los eventos dentro de una sesión en lugar de descartar grabaciones enteras. scroll y media toman un umbral de limitación, mousemove también, y input acepta 'last' para conservar solo el último valor de una secuencia escrita. El ejemplo de la receta de almacenamiento fija scroll: 150, de modo que un desplazamiento solo se emite una vez cada 150 milisegundos.

¿Se puede convertir una grabación de rrweb en un archivo de vídeo?

El monorepo de rrweb incluye rrvideo, descrito como "a tool for transforming the session recorded by rrweb into a video." Esto convierte una grabación hecha de un snapshot del DOM y mutaciones en un archivo de vídeo real. rrweb en sí sigue sin grabar vídeo; rrvideo es un paso de conversión aparte que se ejecuta después.

¿Cuántas descargas tiene el paquete rrweb obsoleto frente a @rrweb/record?

En la semana del 15 al 21 de septiembre de 2026, npm contó 1,874,214 descargas del paquete rrweb frente a 498,366 de @rrweb/record. La guía llama obsoleto a rrweb, pero npm no muestra ningún aviso de obsolescencia en él, así que instalarlo no muestra ninguna advertencia. El paquete antiguo sigue descargándose muchas más veces que su sustituto.

¿Sentry y PostHog usan el paquete rrweb original directamente?

Sentry y PostHog mantienen cada uno su propio fork en lugar de depender de rrweb directamente. El paquete de replay de Sentry depende de @sentry/rrweb y @sentry/rrweb-snapshot, y el SDK de navegador de PostHog depende de @posthog/rrweb y @posthog/rrweb-record. Una corrección en el rrweb original solo llega a sus usuarios cuando el proveedor la fusiona, y los nombres y valores por defecto de las opciones de cada fork difieren de los de rrweb.