react-native-qalink 0.4.1 → 0.5.0

package/README.md

@@ -1,354 +1,483 @@
 # react-native-qalink 🔍
 
-SDK de captura de errores en tiempo real para React Native. Se instala en la app y transmite al servidor QALink cada request de red, error JS, log de consola y error del runtime — permitiendo al equipo de QA ver en tiempo real si un bug es del **frontend** o del **backend**, sin necesidad de Android Studio ni logs técnicos.
+SDK de captura de errores en tiempo real para React Native. Captura errores, logs, eventos custom, requests HTTP y screenshots — permitiendo al equipo de QA ver en tiempo real qué está pasando en la app, sin necesidad de Android Studio ni logs técnicos.
 
-La conexión WebSocket apunta siempre a **wss://ws.airbites.org**; no es necesario configurar la URL.
+La conexión WebSocket apunta siempre a **wss://ws.airbites.org**.
 
 ---
 
-## ¿Cómo identifica los requests a la API?
+## 📦 Instalación
 
-La librería usa **dos estrategias de interceptación simultáneas**:
+```bash
+npm install react-native-qalink
+# o
+yarn add react-native-qalink
+```
 
-### 1. Monkey-patch de `fetch` global
-Al llamar `QALink.init()`, la librería reemplaza el `fetch` nativo del entorno JavaScript por su propia versión instrumentada. Cualquier llamada a `fetch(...)` en toda la app pasa primero por QALink, que registra el request y la respuesta antes de devolver el control al código original.
+### Dependencia opcional para capturas de pantalla:
 
+```bash
+npm install react-native-view-shot
+cd ios && pod install
 ```
-Tu código          →   fetch('/api/users')
-                            ↓
-QALink intercepta  →   registra método, URL, tiempo de inicio
-                            ↓
-Ejecuta fetch real →   espera respuesta del servidor
-                            ↓
-QALink registra    →   status code, body, duración, clasificación
-                            ↓
-Devuelve al código →   response (sin modificarla)
-```
-
-### 2. Interceptores de Axios
-Axios expone un sistema oficial de interceptores (`.interceptors.request` y `.interceptors.response`). QALink se engancha en ambos para capturar cada request antes de que salga y cada respuesta antes de que llegue al código de la app. Funciona con la instancia global y con instancias personalizadas.
 
 ---
 
-## ¿Cómo captura los logs de Metro y el runtime de React Native?
+## 🚀 Inicio rápido
 
-Hay tres capas adicionales que se activan automáticamente con `init()`:
+```typescript
+import QALink from 'react-native-qalink';
 
-### 3. Monkey-patch de `console`
-QALink reemplaza `console.log`, `console.warn` y `console.error` con versiones instrumentadas. **Metro sigue mostrando todo normalmente** (se llama al original primero), pero cada mensaje se envía también al dashboard. Los mensajes se clasifican automáticamente:
+// 1. Inicializar el SDK
+QALink.init({
+  apiKey: 'qlk_your_api_key_here',
+  appVersion: '1.0.0',
+  environment: 'dev',
+  debug: true,
+});
 
-```
-console.log('Productos cargados', data)      →  🔵 user_log
-console.warn('componentWillMount deprecated') →  🟡 rn_warning
-console.error('Invariant Violation: ...')     →  🔴 rn_error
-console.error('Unable to resolve module')     →  🔴 rn_error (Metro)
+// 2. Configurar contexto de usuario
+QALink.setUserContext({
+  userId: '12345',
+  email: 'user@example.com',
+  plan: 'premium'
+});
+
+// 3. Configurar contexto custom
+QALink.setCustomContext({
+  experimentVariant: 'new_checkout_flow',
+  featureFlags: { darkMode: true }
+});
+
+// 4. Usar los nuevos métodos de logging
+QALink.debug('User opened settings');
+QALink.info('Payment initiated', { amount: 99.99 });
+QALink.warn('Slow API response', { duration: 3500 });
+QALink.error('Payment failed', { code: 'CARD_DECLINED' });
+QALink.critical('App about to crash');
+
+// 5. Eventos custom
+QALink.logEvent('checkout_completed', {
+  items: 3,
+  totalAmount: 299.99,
+  paymentMethod: 'credit_card'
+});
+
+// 6. Captura de pantalla (requiere react-native-view-shot)
+await QALink.captureScreen('before_payment');
 ```
 
-### 4. `ErrorUtils.setGlobalHandler` — Pantalla roja (Red Screen)
-React Native expone `ErrorUtils` para capturar errores **antes** de que la app crashee y muestre la pantalla roja. QALink se registra ahí para enviar el error al dashboard con todo el stack trace, y luego llama al handler original para que RN siga comportándose normalmente.
+---
 
+## 🔧 Configuración HTTP avanzada
+
+El SDK captura automáticamente todas las peticiones HTTP (fetch y axios). Puedes configurar qué capturar:
+
+```typescript
+QALink.init({
+  apiKey: 'qlk_xxx',
+  appVersion: '1.0.0',
+  httpConfig: {
+    // Captura requests y responses
+    captureRequests: true,
+    captureResponses: true,
+    
+    // Filtrar por URL
+    includeUrls: ['/api/payment', '/api/checkout'],
+    excludeUrls: ['/api/analytics', '/health'],
+    
+    // Filtrar por método HTTP
+    methods: ['POST', 'PUT', 'DELETE'], // ignorar GETs
+    
+    // Sanitización de datos sensibles
+    sanitizeHeaders: ['Authorization', 'X-API-Key'],
+    sanitizeRequestBody: ['password', 'creditCard', 'cvv'],
+    sanitizeResponseBody: ['token', 'secret'],
+    
+    // Capturar solo errores HTTP (4xx, 5xx)
+    captureOnlyErrors: true,
+    minStatusCode: 400,
+    
+    // Límite de tamaño de body
+    maxBodySize: 5000, // bytes
+    
+    // Performance monitoring
+    captureTimings: true,
+    slowRequestThreshold: 2000, // marcar requests > 2s como lentos
+  }
+});
 ```
-Error fatal en JS
-       ↓
-QALink captura → envía al dashboard con stack trace completo
-       ↓
-ErrorUtils original → React Native muestra la pantalla roja
+
+### Actualizar configuración HTTP en runtime:
+
+```typescript
+QALink.configureHTTP({
+  captureOnlyErrors: true,
+  slowRequestThreshold: 1000
+});
 ```
 
-### 5. LogBox — Cajas amarillas (Yellow Box)
-En React Native ≥ 0.64, los warnings se manejan internamente via `LogBox`. QALink se engancha al método interno `__warn` de LogBox para capturar cada warning antes de que aparezca en pantalla.
+---
 
-### Clasificación de errores de runtime
+## 📝 API de Logging
 
-| Tipo                     | Categoría       | Ejemplo                                      |
-|--------------------------|-----------------|----------------------------------------------|
-| Error fatal              | `red_screen`    | `Invariant Violation`, `undefined is not...` |
-| Warning de RN            | `yellow_box`    | `componentWillMount is deprecated`           |
-| Módulo nativo            | `native_module` | `NativeModule X is null`                     |
-| Bridge JS↔Native          | `bridge`        | `RCTBridge error`                            |
-| Promise sin .catch()     | `unknown`       | `Unhandled Promise Rejection`                |
-| Error de Metro/bundler   | `rn_error`      | `Unable to resolve module`, `SyntaxError`    |
+Todos los métodos de logging hacen **console.log nativo** (visible en Metro) **Y** envían al servidor QALink:
 
----
+```typescript
+// Acepta múltiples argumentos como console.log
+QALink.debug('User action', { screen: 'Settings' }, 'Extra data');
 
-## Instalación
+QALink.info('API call started', {
+  endpoint: '/api/users',
+  method: 'GET'
+});
 
-```bash
-npm install react-native-qalink
-# o
-yarn add react-native-qalink
+QALink.warn('Memory warning', { 
+  available: '50MB',
+  threshold: '100MB' 
+});
+
+QALink.error('Validation failed', {
+  field: 'email',
+  reason: 'Invalid format'
+});
+
+QALink.critical('Unrecoverable error', {
+  code: 'FATAL_001',
+  message: 'Cannot connect to database'
+});
 ```
 
+**Niveles de log:**
+- `debug` → desarrollo y debugging
+- `info` → información general
+- `warn` → advertencias y problemas no críticos
+- `error` → errores recuperables
+- `critical` → errores fatales que pueden causar crash
+
 ---
 
-## Uso rápido
+## 🎯 Eventos Custom
 
-```tsx
-import { QALink } from 'react-native-qalink';
-import axios from 'axios';
+Registra eventos de negocio importantes:
 
-// En el arranque de la app (p. ej. App.tsx useEffect)
-await QALink.init({
-  apiKey: 'qlk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
-  appVersion: '1.2.3',
-  environment: 'dev',
-  debug: __DEV__,
+```typescript
+// Evento simple
+QALink.logEvent('user_login');
+
+// Evento con datos
+QALink.logEvent('purchase_completed', {
+  productId: 'SKU-123',
+  price: 29.99,
+  currency: 'USD',
+  quantity: 2
 });
 
-QALink.interceptAxios(axios);
+QALink.logEvent('feature_used', {
+  featureName: 'dark_mode',
+  enabled: true,
+  timestamp: Date.now()
+});
 ```
 
-No hace falta pasar `serverUrl`: la conexión usa siempre **wss://ws.airbites.org**.
+**Los eventos incluyen automáticamente:**
+- User context (userId, email, etc.)
+- Custom context (feature flags, experiments)
+- Screen actual
+- Session ID
+- Device ID
+- Timestamp
 
 ---
 
-## API pública
+## 👤 Context API
 
-Todo lo que puede usar quien instala la librería:
+### User Context
+Información del usuario que se adjunta a **todos** los eventos:
+
+```typescript
+QALink.setUserContext({
+  userId: '12345',
+  email: 'john@example.com',
+  username: 'john_doe',
+  plan: 'premium',
+  region: 'LATAM'
+});
+
+// Actualizar parcialmente
+QALink.setUserContext({ plan: 'enterprise' });
+
+// Limpiar
+QALink.clearContext();
+```
 
-| Método | Descripción |
-|--------|-------------|
-| **`QALink.init(config)`** | Inicializa el SDK. Conecta a QALink, intercepta `fetch`, consola y runtime. Requiere `apiKey` y `appVersion`. |
-| **`QALink.interceptAxios(axiosInstance)`** | Registra una instancia de Axios para capturar sus requests/respuestas. Llamar después de `init()`. |
-| **`QALink.setScreen(screenName)`** | Indica la pantalla actual. Genera un breadcrumb `NAVIGATE → screenName`. |
-| **`QALink.addBreadcrumb(action, data?)`** | Envía un breadcrumb (acción + datos opcionales) a la línea de tiempo del dashboard. |
-| **`QALink.logRequest(options)`** | Registra manualmente una petición de red (método, URL, status, payloads, duración). Útil si no usas fetch ni Axios. |
-| **`QALink.getDeviceId()`** | Devuelve el `deviceId` que usa el SDK en esta sesión. |
-| **`QALink.getStatus()`** | Devuelve el estado de la conexión WebSocket (p. ej. `'connected'`, `'not initialized'`). |
-| **`QALink.destroy()`** | Desconecta, elimina todos los interceptores y deja el SDK no inicializado. |
+### Custom Context
+Datos custom que se adjuntan a todos los eventos:
 
-Además se exporta la función de utilidad **`getSourceLabel`** (para clasificación de fuentes de error) y todos los **tipos** TypeScript (`QALinkConfig`, `LogRequestOptions`, `QALinkEvent`, etc.).
+```typescript
+QALink.setCustomContext({
+  experimentVariant: 'new_ui_v2',
+  featureFlags: {
+    darkMode: true,
+    newCheckout: false
+  },
+  build: 'staging-142'
+});
+```
 
 ---
 
-## Configuración (`QALinkConfig`)
-
-Opciones que acepta `QALink.init(config)`:
-
-| Campo | Tipo | Requerido | Descripción |
-|-------|------|-----------|-------------|
-| **`apiKey`** | `string` | ✅ | API key del proyecto (formato: `qlk_` + 64 caracteres hex). |
-| **`appVersion`** | `string` | ✅ | Versión de la app (p. ej. `'1.2.3'`). |
-| **`enabled`** | `boolean` | No | Activa/desactiva el SDK. Por defecto `true`. |
-| **`environment`** | `'dev' \| 'prod'` | No | Entorno. Por defecto `'dev'`. |
-| **`logNetworkBodies`** | `boolean` | No | Incluir cuerpos de request/response en eventos de red. Por defecto `false`. |
-| **`sensitiveHeaders`** | `string[]` | No | Cabeceras a redactar (p. ej. `['Authorization']`). |
-| **`sensitiveUrlPatterns`** | `string[]` | No | Patrones de URL a tratar como sensibles (se redactan). |
-| **`sensitiveBodyFields`** | `string[]` | No | Campos del body a redactar (p. ej. `['password', 'token']`). |
-| **`console`** | `ConsoleConfig` | No | Captura de logs y filtros (ver abajo). |
-| **`captureRuntimeErrors`** | `boolean` | No | Capturar pantalla roja, yellow box, etc. Por defecto `true`. |
-| **`captureMetroErrors`** | `boolean` | No | Capturar errores de Metro. Por defecto `true`. |
-| **`onEvent`** | `(event: QALinkEvent) => void` | No | Callback por cada evento enviado. |
-| **`debug`** | `boolean` | No | Logs internos del SDK en consola. Por defecto `false`. |
-
-**`console`** (`ConsoleConfig`):
-
-| Campo | Tipo | Descripción |
-|-------|------|-------------|
-| **`captureLogs`** | `boolean` | Capturar `console.log`. Por defecto `true`. |
-| **`captureWarnings`** | `boolean` | Capturar `console.warn`. Por defecto `true`. |
-| **`captureErrors`** | `boolean` | Capturar `console.error`. Por defecto `true`. |
-| **`ignorePatterns`** | `string[]` | Mensajes que contengan estos patrones no se envían. |
-| **`includePatterns`** | `string[]` | Si se define, solo se envían mensajes que coincidan con estos patrones. |
+## 📸 Captura de Pantalla
+
+**Requisito:** `react-native-view-shot`
+
+```typescript
+// Capturar pantalla completa
+await QALink.captureScreen('before_payment');
+await QALink.captureScreen('error_state');
+
+// Capturar componente específico
+import { useRef } from 'react';
+
+const MyComponent = () => {
+  const viewRef = useRef(null);
+  
+  const handleCapture = async () => {
+    await QALink.captureRef(viewRef, 'form_error');
+  };
+  
+  return (
+    <View ref={viewRef}>
+      {/* contenido */}
+    </View>
+  );
+};
+```
+
+**Configuración:**
+
+```typescript
+QALink.init({
+  apiKey: 'qlk_xxx',
+  appVersion: '1.0.0',
+  enableScreenCapture: true, // ← activar
+});
+```
 
 ---
 
-## Ejemplos
+## 🔌 Interceptores HTTP
+
+### Fetch (automático)
+El SDK intercepta **todos** los `fetch()` automáticamente. No necesitas hacer nada.
 
-### Setup básico
+### Axios
+Si usas Axios, puedes interceptar instancias específicas:
 
-```tsx
-// App.tsx
-import { useEffect } from 'react';
-import { QALink } from 'react-native-qalink';
+```typescript
 import axios from 'axios';
+import QALink from 'react-native-qalink';
 
-export default function App() {
-  useEffect(() => {
-    QALink.init({
-      apiKey: 'qlk_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
-      appVersion: '1.2.3',
-      captureRuntimeErrors: true,
-      console: {
-        captureLogs: true,
-        captureWarnings: true,
-        captureErrors: true,
-      },
-      debug: __DEV__,
-    });
-
-    QALink.interceptAxios(axios);
-  }, []);
-
-  return <RootNavigator />;
-}
+const apiClient = axios.create({
+  baseURL: 'https://api.example.com'
+});
+
+// Interceptar esta instancia de Axios
+QALink.interceptAxios(apiClient);
 ```
 
-### Filtrar logs de librerías
+---
+
+## 🛠️ Configuración completa
+
+```typescript
+import QALink from 'react-native-qalink';
 
-```tsx
 QALink.init({
-  apiKey: 'qlk_...',
+  // ── Requerido ──────────────────────────────────
+  apiKey: 'qlk_your_64_char_hex_key',
   appVersion: '1.2.3',
-  console: {
-    captureLogs: true,
-    captureWarnings: true,
-    captureErrors: true,
-    ignorePatterns: [
-      '[react-query]',
-      '[redux]',
-      'Reanimated',
-      'Gesture Handler',
-      '[MMKV]',
-    ],
+
+  // ── Básico ─────────────────────────────────────
+  enabled: true,              // habilitar/deshabilitar SDK
+  environment: 'dev',         // 'dev' | 'prod'
+  debug: true,                // logs de debug en consola
+
+  // ── HTTP Interceptors ──────────────────────────
+  httpConfig: {
+    captureRequests: true,
+    captureResponses: true,
+    includeUrls: ['/api/'],
+    excludeUrls: ['/health', '/metrics'],
+    methods: ['POST', 'PUT', 'DELETE'],
+    sanitizeHeaders: ['Authorization'],
+    sanitizeRequestBody: ['password', 'token', 'creditCard'],
+    sanitizeResponseBody: ['secret', 'apiKey'],
+    captureOnlyErrors: false,
+    minStatusCode: 200,
+    maxBodySize: 5000,
+    captureTimings: true,
+    slowRequestThreshold: 2000,
   },
-});
-```
 
-### Solo logs marcados para QA
+  // ── Legacy Network (compatibilidad) ────────────
+  logNetworkBodies: false,
+  sensitiveHeaders: ['Authorization'],
+  sensitiveUrlPatterns: ['/auth/', '/login'],
+  sensitiveBodyFields: ['password', 'token'],
 
-```tsx
-QALink.init({
-  apiKey: 'qlk_...',
-  appVersion: '1.2.3',
+  // ── Console ─────────────────────────────────────
   console: {
     captureLogs: true,
     captureWarnings: true,
     captureErrors: true,
-    includePatterns: ['[QA]', '[FLOW]', '[ERROR]'],
+    ignorePatterns: ['Ignore this'],
+    includePatterns: [],
   },
-});
-
-// En tu código:
-console.log('[QA] Usuario llegó al checkout', { userId, cartTotal });
-console.log('[FLOW] Pago procesado', { orderId });
-```
 
-### Múltiples instancias de Axios
+  // ── Errors ──────────────────────────────────────
+  captureRuntimeErrors: true,  // red screen / yellow box
+  captureMetroErrors: true,    // bundler errors
 
-```tsx
-const apiPrincipal = axios.create({ baseURL: 'https://api.miapp.com/v1' });
-const apiPagos = axios.create({ baseURL: 'https://pagos.miapp.com' });
+  // ── Screen Capture ──────────────────────────────
+  enableScreenCapture: true,   // requiere react-native-view-shot
 
-await QALink.init({ apiKey: 'qlk_...', appVersion: '1.2.3' });
-QALink.interceptAxios(apiPrincipal);
-QALink.interceptAxios(apiPagos);
+  // ── Callbacks ───────────────────────────────────
+  onEvent: (event) => {
+    console.log('Event sent:', event.type);
+  }
+});
 ```
 
-### React Navigation + pantalla actual
+---
 
-```tsx
-<NavigationContainer
-  ref={navigationRef}
-  onStateChange={() => {
-    const routeName = navigationRef.current?.getCurrentRoute()?.name ?? '';
-    QALink.setScreen(routeName);
-  }}
->
-```
+## 📊 Tipos de eventos capturados
+
+El SDK captura automáticamente:
+
+| Tipo | Descripción |
+|------|-------------|
+| `session_start` | Inicio de sesión |
+| `http_request` | Request HTTP (fetch/axios) |
+| `user_log` | Logs con debug/info/warn/error/critical |
+| `custom_event` | Eventos custom con logEvent() |
+| `console_log` | console.log |
+| `console_warn` | console.warn |
+| `console_error` | console.error |
+| `runtime_error` | Red screen / Yellow box |
+| `metro_error` | Errores de Metro Bundler |
+| `js_error` | Errores de JavaScript |
+| `breadcrumb` | Navegación y acciones |
+| `screen_capture` | Screenshots |
 
-### Breadcrumbs en acciones críticas
+---
 
-```tsx
-const handleConfirmarCompra = async () => {
-  QALink.addBreadcrumb('TAP → Confirmar Compra', {
-    cartId: cart.id,
-    items: cart.items.length,
-    total: cart.total,
-  });
+## 🔐 Compatibilidad con fetch-blob
 
-  console.log('[QA] Iniciando checkout', { cartId: cart.id });
-  try {
-    const result = await apiPagos.post('/checkout', { cartId: cart.id });
-    console.log('[QA] Checkout exitoso', { orderId: result.data.orderId });
-  } catch (error) {
-    console.error('[QA] Checkout falló', error);
-  }
-};
-```
+El interceptor de fetch es **100% compatible** con `fetch-blob`:
 
-### Registrar request manualmente (`logRequest`)
+```typescript
+import { fetch, Blob } from 'react-native-fetch-blob';
 
-Si usas un cliente que no es fetch ni Axios:
+// QALink detecta automáticamente Blobs y no intenta serializarlos
+const blob = new Blob([...], { type: 'image/jpeg' });
 
-```tsx
-QALink.logRequest({
+await fetch('https://api.example.com/upload', {
   method: 'POST',
-  url: 'https://api.example.com/order',
-  statusCode: 200,
-  requestPayload: { items: [1, 2, 3] },
-  responsePayload: { orderId: 'abc123' },
-  durationMs: 450,
+  body: blob
 });
+
+// En el dashboard verás:
+// body: { _type: 'Blob', size: 12345, type: 'image/jpeg' }
 ```
 
-### Ver estado de conexión
+---
 
-```tsx
-if (QALink.getStatus() === 'connected') {
-  console.log('QALink grabando. Device:', QALink.getDeviceId());
-}
-```
+## 🎯 Casos de uso
 
-### Build solo para QA (ej. con react-native-config)
-
-```tsx
-import Config from 'react-native-config';
-
-if (Config.QALINK_ENABLED === 'true') {
-  await QALink.init({
-    apiKey: Config.QALINK_API_KEY,
-    appVersion: Config.VERSION_NAME ?? '0.0.0',
-    logNetworkBodies: true,
-    captureRuntimeErrors: true,
-    console: {
-      captureLogs: true,
-      captureWarnings: true,
-      captureErrors: true,
-      ignorePatterns: ['[react-query]'],
-    },
-    sensitiveHeaders: ['Authorization'],
-    sensitiveUrlPatterns: ['/auth/refresh'],
+### 1. Tracking de flujo de checkout
+```typescript
+QALink.setUserContext({ userId: user.id, email: user.email });
+
+QALink.logEvent('checkout_started', { cartTotal: 299.99 });
+QALink.info('Loading payment methods');
+
+// ... usuario selecciona método de pago ...
+QALink.logEvent('payment_method_selected', { method: 'credit_card' });
+
+try {
+  const response = await processPayment();
+  QALink.logEvent('payment_success', { 
+    orderId: response.orderId,
+    amount: 299.99 
+  });
+} catch (error) {
+  QALink.error('Payment failed', { 
+    reason: error.message,
+    code: error.code 
   });
-  QALink.interceptAxios(axios);
+  await QALink.captureScreen('payment_error');
 }
 ```
 
----
+### 2. Debugging de API lenta
+```typescript
+QALink.configureHTTP({
+  captureTimings: true,
+  slowRequestThreshold: 1500, // 1.5s
+});
+
+// Los requests > 1.5s aparecerán marcados en el dashboard
+```
 
-## Qué ve el QA en el dashboard
+### 3. Tracking de experimentos A/B
+```typescript
+const variant = getExperimentVariant('new_ui');
 
-Cada sesión incluye una línea de tiempo unificada con todos los eventos:
+QALink.setCustomContext({
+  experiment: 'new_ui',
+  variant: variant, // 'A' or 'B'
+});
 
-| Ícono | Tipo              | Fuente                |
-|-------|-------------------|------------------------|
-| ✅    | Request exitoso   | fetch / Axios          |
-| ❌    | Error de red      | fetch / Axios          |
-| 🔴    | Error fatal (RN)  | ErrorUtils / LogBox    |
-| 🟡    | Warning (RN)      | LogBox / console       |
-| 🔵    | Log de consola    | console.log            |
-| 📍    | Breadcrumb        | `QALink.addBreadcrumb` |
-| 📱    | Pantalla          | `QALink.setScreen`     |
+QALink.logEvent('experiment_viewed', { 
+  experiment: 'new_ui',
+  variant 
+});
+```
 
 ---
 
-## Tipos exportados
+## 🚨 Troubleshooting
 
-Puedes importar tipos para TypeScript:
+### Los logs no aparecen en el dashboard
+- Verifica que `apiKey` sea correcto (formato: `qlk_<64 hex>`)
+- Verifica que `enabled: true`
+- Revisa la consola: `QALink.getStatus()` debe ser `'connected'`
 
-```ts
-import type {
-  QALinkConfig,
-  LogRequestOptions,
-  QALinkEvent,
-  BreadcrumbEvent,
-  NetworkLogEvent,
-  ConsoleConfig,
-} from 'react-native-qalink';
-```
+### Screen capture no funciona
+- Instala: `npm install react-native-view-shot`
+- Habilita: `enableScreenCapture: true` en config
+- iOS: `cd ios && pod install`
+
+### Axios no se intercepta
+- Llama `QALink.interceptAxios(axiosInstance)` **después** de `QALink.init()`
+
+---
+
+## 📖 Recursos
+
+- **Dashboard:** https://qalink.airbites.org
+- **Documentación completa:** (próximamente)
+- **GitHub:** (próximamente)
 
 ---
 
-## Licencia
+## 📄 Licencia
 
 MIT
+
+---
+
+## 🤝 Contribuir
+
+Pull requests son bienvenidos. Para cambios mayores, abre primero un issue.