Documentación

Configuración

Todas las opciones de wutbug.init(), con su tipo, valor por defecto y para qué sirven.

wutbug.init(options) recibe un objeto. Solo projectKey es obligatorio. Las opciones de apariencia también se pueden editar en el dashboard: lo que pases en código siempre gana sobre el dashboard (ver Apariencia).

TypeScript

import wutbug from '@wutbug/sdk';

wutbug.init({
  projectKey: 'pk_tu_key',
  endpoint: 'https://api.wutbug.dev',
  release: '2026.11.3',
  locale: 'es',
  position: 'bottom-right',
  launcherLabel: '¿Algo no funciona?',
  theme: { accent: '#ea580c', mode: 'auto', radius: 'round' },
  privacy: { redactKeys: ['rut', 'dni'], blockSelector: '.datos-tarjeta' },
  ignoreUrls: ['https://analytics.example.com', /\/health$/],
  beforeSend: (report) => report,
});

Opciones generales

Opción	Tipo	Por defecto	Descripción
`projectKey`	`string`	—	Obligatoria. Key pública del proyecto (`pk_…`).
`endpoint`	`string`	—	URL de la API de Wutbug. Sin ella, el SDK funciona en modo local: descarga el reporte como JSON en vez de enviarlo.
`release`	`string`	—	Versión de tu app (SHA del commit o `2026.11.3`). Debe coincidir con la que usas al subir source maps. Máximo 100 caracteres.
`locale`	`'en' \| 'es' \| 'auto'`	`'auto'`	Idioma del widget. `auto` usa `navigator.language` (español si empieza con `es`, si no inglés).
`position`	`'bottom-right' \| 'bottom-left' \| 'top-right' \| 'top-left'`	`'bottom-right'`	Esquina del botón flotante. El formulario se abre desde la misma esquina.
`launcher`	`boolean`	`true`	`false` oculta el botón flotante. Abre el formulario con `wutbug.open()` o con un elemento `data-wutbug-open`.
`launcherLabel`	`string`	—	Texto del botón. Vacío: solo el ícono, y el texto aparece al pasar el mouse.
`theme`	`object`	ver abajo	Colores, modo claro/oscuro, bordes y fuente.
`remoteConfig`	`boolean`	`true`	Descarga la apariencia configurada en el dashboard. `false` usa solo lo que pongas en código.
`bufferMs`	`number`	`120000`	Cuánta historia (en ms) se guarda en memoria para replay, consola y network.
`capture`	`object`	todo `true`	Qué se captura: `{ replay, console, network }`.
`privacy`	`object`	ver abajo	Enmascarado y redacción. Ver Privacidad.
`ignoreUrls`	`(string \| RegExp)[]`	`[]`	Requests que nunca se registran. Un string se compara como prefijo de la URL.
`beforeSend`	`(report) => report \| null`	—	Última oportunidad para editar el reporte o descartarlo (devuelve `null`). Puede ser `async`.
`autoCapture`	`object`	`{ mode: 'off' }`	Reportes automáticos o sugeridos cuando ocurre un error. Gana sobre lo configurado en el dashboard, campo por campo. Ver Captura automática.
`debug`	`boolean`	`false`	Registra el funcionamiento interno del SDK en la consola.

`theme`

Opción	Tipo	Por defecto	Descripción
`accent`	`string` (hex)	`#6d5dfc`	Color principal: botón flotante, botones y foco.
`accentDark`	`string` (hex)	`#8b7dff`	Color principal en modo oscuro. Si defines `accent` en código y no `accentDark`, se usa `accent` en ambos modos.
`mode`	`'auto' \| 'light' \| 'dark'`	`'auto'`	`auto` sigue la preferencia del sistema del usuario.
`radius`	`'sharp' \| 'default' \| 'round'`	`'default'`	Redondeo de bordes.
`font`	`'system' \| 'inherit'`	`'system'`	`inherit` usa la fuente de tu página en lugar de la del sistema.

El color del texto sobre el botón (blanco o negro) se elige solo, según el contraste con accent.

`capture`

Opción	Tipo	Por defecto	Descripción
`replay`	`boolean`	`true`	Graba el DOM con rrweb (se carga cuando el navegador está libre).
`console`	`boolean`	`true`	Registra `console.*`, errores no capturados, promesas rechazadas y recursos que no cargaron.
`network`	`boolean`	`true`	Registra `fetch` y `XMLHttpRequest`.
`behavior`	`boolean`	`true`	Señales de comportamiento: rage clicks, dead clicks, tareas largas y Web Vitals. Ver Captura automática.

`privacy`

Opción	Tipo	Por defecto	Descripción
`maskAllInputs`	`boolean`	`true`	Enmascara el valor de todos los inputs, textareas y selects en el replay y la captura. Las contraseñas se enmascaran siempre.
`maskTextSelector`	`string`	—	Selector CSS adicional cuyo texto se enmascara (además de `.wutbug-mask`).
`blockSelector`	`string`	—	Selector CSS adicional de elementos que se ocultan por completo (además de `.wutbug-block`).
`redactHeaders`	`string[]`	ver Privacidad	Headers cuyo valor se reemplaza por `[REDACTED]`. Se suman a los de por defecto.
`redactKeys`	`string[]`	ver Privacidad	Fuentes de regex (sin distinguir mayúsculas) para nombres de claves JSON, campos de formulario y parámetros de URL. Se suman a las de por defecto.
`redactPatterns`	`RegExp[]`	`[]`	Expresiones extra que se reemplazan en todo texto capturado (consola, URLs, bodies).
`captureBodies`	`boolean`	`true`	Captura los bodies de requests y respuestas. `false` guarda solo método, URL, status, tiempos y headers.
`maxBodyLength`	`number`	`10000`	Máximo de caracteres por body. Lo que exceda se trunca.

`beforeSend`

Recibe el reporte completo justo antes de enviarlo. Devuelve el reporte (modificado o no) para enviarlo, o null para descartarlo. Si la función lanza un error, el reporte no se envía.

TypeScript

wutbug.init({
  projectKey: 'pk_tu_key',
  endpoint: 'https://api.wutbug.dev',
  beforeSend(report) {
    // No enviar reportes desde entornos de prueba
    if (location.hostname.endsWith('.local')) return null;
    // Quitar un dato de la metadata
    delete report.metadata.internalId;
    return report;
  },
});

El reporte incluye description, reporterEmail, environment, user, metadata, console, network, replay, screenshot y video. Ver Datos capturados.

Precedencia

Opciones pasadas a init() en código.
Apariencia guardada en el dashboard (si remoteConfig es true).
Valores por defecto.

La apariencia del dashboard se descarga de GET /v1/widget-config y se guarda 5 minutos por pestaña, así que los cambios llegan a tus usuarios sin volver a desplegar.

← AnteriorGuías por framework Siguiente →API de JavaScript

Configuración

#Opciones generales

#theme

#capture

#privacy