¿Qué es BugDump? Reportes de bugs para sitios web con una etiqueta script

reportes de bugs

BugDump es un widget para reportar bugs en sitios web. Añades una etiqueta script, aparece un botón flotante de bug en una esquina de tu app y, desde ese momento, tus usuarios pueden enviar reportes de bugs que llegan con el contexto que de verdad necesitas para corregirlos: logs de consola, solicitudes de red, una repetición de sesión, detalles del entorno y una captura de pantalla anotada.

Este artículo explica qué hace BugDump, cómo es un reporte y dónde encaja en tu flujo de trabajo.

El problema que resuelve

La mayoría de los reportes de bugs de usuarios reales son así: «La página no funciona». Sin URL, sin versión del navegador, sin pasos, sin mensaje de error. Respondes pidiendo detalles, el usuario ya pasó a otra cosa y el bug se queda sin corregir hasta que alguien de tu propio equipo se lo encuentra por casualidad.

La información que necesitabas existía en el momento en que ocurrió el bug: en la consola, en la pestaña de red, en el DOM. Solo que nadie la capturó. El trabajo de BugDump es capturarla automáticamente, para que una queja de una línea se convierta en un expediente completo.

Cómo se instala

La instalación es una sola línea de HTML:

HTML
<script src="https://bugdump.com/sdk/latest.js" async data-api-key="your-api-key"></script>

El script se inicializa solo a partir del atributo data-api-key: sin llamadas al SDK, sin paso de build y sin requisitos de framework. Funciona con React, Vue o JavaScript puro, porque no toca el código de tu aplicación. Si prefieres una dependencia empaquetada, hay un paquete npm (@bugdump/sdk) con tipos completos de TypeScript y un modo de inicialización manual para controlarlo desde código.

El widget se renderiza dentro de un Shadow DOM, así que sus estilos nunca se filtran a tu app y tu CSS nunca rompe el widget. Puedes fijar el tema (claro, oscuro o el del sistema operativo), cambiar el icono del botón, moverlo de sitio u ocultarlo del todo, y sustituir cada texto de la interfaz, algo útil si tu producto no está en inglés.

Qué hay dentro de un reporte

Cuando un usuario pulsa el botón de bug, describe el problema y lo envía, el reporte que llega a tu panel incluye automáticamente:

  • Registros de consola: las últimas 300 entradas (2000 durante una grabación), con errores y advertencias resaltados, y con búsqueda.

  • Solicitudes de red: las últimas 150 solicitudes (1000 durante una grabación) con sus códigos de estado; las fallidas se marcan. Los cuerpos de solicitud y respuesta se pueden incluir si lo activas.

  • Repetición de sesión: instantáneas del DOM basadas en rrweb de lo que hizo el usuario antes del bug, que puedes recorrer como un video.

  • Entorno: navegador, sistema operativo, dispositivo, tamaño de pantalla, viewport y URL de la página.

  • Métricas de rendimiento: TTFB, FCP, tiempo hasta DOM listo, tiempo de carga y uso del heap de JS.

Además del contexto automático, los usuarios pueden adjuntar una captura de pantalla (con herramientas de anotación: flechas, rectángulos, dibujo a mano alzada, texto y desenfoque para ocultar datos sensibles), una grabación de pantalla, una nota de voz o archivos. Nada de eso es obligatorio: el reporte mínimo es una frase y un clic, y la telemetría llega igual.

Si tu app tiene usuarios con sesión iniciada, bugdump('identify', { email }) añade la identidad de quien reporta, así sabes quién se topó con el problema sin pedirle que escriba su correo.

Del reporte a la corrección

Los reportes llegan a un panel donde se convierten en tareas de un tablero kanban. A partir de ahí:

  • Las integraciones envían los bugs a las herramientas que ya usas: Telegram, Slack, Discord, GitHub Issues, Jira, Asana y más en los planes de pago. En el plan Gratis, los reportes nuevos te llegan por correo y en la app.

  • El servidor MCP conecta tu proyecto con Claude Code, Cursor o cualquier cliente compatible con MCP, para que un asistente de IA lea todo el contexto de un bug (reportes, consola, red, capturas de pantalla) y lo investigue en lenguaje natural.

  • Un portal público (opcional) permite a quienes reportan ver los reportes, y puedes publicar al lado una hoja de ruta y un registro de cambios.

Cuánto cuesta

El precio depende de cuántos reportes recibes, no de cuántas personas usan la herramienta, y no hay ningún plan de «contacta con ventas».

  • Gratis: 0 US$ para siempre. 500 reportes al mes por proyecto, 1 GB de almacenamiento, 3 proyectos, notificaciones por correo, el servidor MCP para Claude Code y todo lo que recoge el widget (captura de pantalla, repetición, consola, red).

  • Pro: 4,99 US$ al mes. 10.000 reportes al mes por proyecto, 10 GB de almacenamiento, 20 proyectos, la lista completa de integraciones, webhooks y la opción de quitar la marca de BugDump del widget.

  • Ultra: 9,99 US$ al mes. 100.000 reportes al mes por proyecto, 50 GB de almacenamiento, 100 proyectos y los límites de solicitudes más altos, pensado para productos con mucho volumen y agencias que gestionan muchos sitios de clientes.

Los precios no incluyen impuestos; Paddle, que gestiona la facturación, añade los impuestos que correspondan al pagar. El plan Gratis no pide tarjeta de crédito, así que puedes probar todo el flujo (widget, reporte, panel) antes de pagar nada.

Para quién es

BugDump está pensado a propósito para proyectos pequeños. Si tienes un proyecto personal, un SaaS indie o un equipo de producto pequeño, seguramente no quieres configurar un gestor de incidencias pesado solo para enterarte de que hay botones rotos. Una etiqueta script y un tablero kanban son todo el sistema.

También encaja con agencias y con equipos que hacen programas beta: quien reporta sin perfil técnico nunca ve un formulario que le pida la «versión del navegador» o los «pasos para reproducir»; pulsa un botón, escribe una frase y el widget reúne por él la mitad técnica del reporte.

Por dónde empezar

Crea una cuenta gratis, crea un proyecto y pega la etiqueta script en tu sitio. El botón aparece al instante, y el primer reporte que te envíes a ti mismo es la forma más rápida de ver cómo serán los reportes de tus usuarios. Si quieres ir más allá, el SDK admite activar y desactivar funciones, filtros de ruido para scripts de terceros que llenan la consola, traducciones propias y control desde código, pero la configuración por defecto está pensada para ser la que use la mayoría de los sitios.

Te puede interesar