Documentación
Introducción
Qué es Wutbug, cómo funciona y qué recibe tu equipo en cada reporte.
Wutbug es un widget de reporte de bugs para apps web. Lo instalas una vez en tu app y cualquier persona que la use puede reportar un problema desde el navegador que ya usa, sin instalar extensiones ni crear cuentas. Tu equipo recibe un reporte reproducible: qué dijo el usuario, qué hizo y qué pasó en el navegador.
Cómo funciona
- Instalas el SDK con una etiqueta
<script>o con el paquete npm@wutbug/sdk. Desde ese momento, el SDK guarda en la memoria del navegador los últimos 2 minutos de la sesión: el replay del DOM, la consola y las requests. - El usuario reporta. Toca el botón flotante (o el que tú pongas), escribe qué pasó y, si quiere, anota la captura de pantalla o graba su pantalla. Al abrir el formulario, el SDK congela lo que tenía en memoria, así que lo que el usuario hace mientras escribe no empuja el error fuera de la ventana.
- Se envía el reporte. Solo cuando la persona presiona Enviar reporte el SDK sube los datos, ya enmascarados en el navegador. Antes de eso no sale nada.
- Tu equipo lo revisa en el dashboard: replay sincronizado con la consola y la network, pasos del usuario, dispositivo, captura anotada y resumen con IA. Desde ahí lo asignas, lo mueves por el tablero, creas la tarea en Linear, Jira, Notion o Asana, o se lo pasas a tu asistente de código por MCP.
Qué incluye cada reporte
| Dato | Detalle |
|---|---|
| Descripción | Lo que escribió el usuario y, opcionalmente, su email. |
| Replay | Grabación del DOM (rrweb) de los últimos 2 minutos. No es video: es liviano y nítido, y los inputs van enmascarados. |
| Consola | console.log/info/warn/error/debug, errores no capturados, promesas rechazadas y recursos que no cargaron, con stack trace. |
| Network | Cada fetch y XMLHttpRequest: método, URL, status, duración, headers y bodies (con secretos enmascarados). |
| Pasos | Clics, campos en los que escribió y navegación, reconstruidos desde el replay. |
| Captura | Captura de la pantalla visible que el usuario puede anotar con flechas, rectángulos y texto, o quitar. |
| Grabación de pantalla | Opcional, hasta 2 minutos, solo si el usuario la inicia y da permiso al navegador. |
| Dispositivo y entorno | Navegador, sistema, tipo de dispositivo, pantalla, idioma, zona horaria, red, batería (Chromium) y más. Ver Datos capturados. |
| Usuario y metadata | Lo que tu app entregue con setUser() y setMetadata(). |
| Versión | El release de tu app, para traducir stack traces con source maps. |
Qué tan liviano es
El script inicial pesa unos 7 KB comprimido y solo instala los ganchos de captura. La interfaz del widget y el grabador del replay se descargan cuando el navegador está libre; la captura de pantalla y el editor de anotaciones, cuando el usuario los usa.
| Parte | Cuándo se carga | Tamaño (gzip) |
|---|---|---|
wutbug.js y ganchos de captura | Al cargar la página | ~7 KB |
| Interfaz del widget | Cuando el navegador está libre | ~14 KB |
| Grabador de replay (rrweb) | Cuando el navegador está libre | ~23 KB |
| Captura de pantalla | Al abrir el formulario | ~10 KB |
| Editor de anotaciones | Al tocar Anotar | ~2 KB |
Siguientes pasos
- Instala el SDK en 2 minutos.
- Revisa la guía de tu framework.
- Entiende qué se enmascara antes de salir a producción.
- Conecta tu asistente de código con MCP.