← Volver al listado de tecnologías

Capítulo 4: Logging y Timeline

Por: Siempre Listo
reactotronloggingtimelinedebugging

Logging y Timeline

La timeline es el corazón de Reactotron. Aprenderás a usar logs avanzados.

Tipos de Logs

import Reactotron from './ReactotronConfig';

// Log simple
Reactotron.log('Mensaje simple');

// Log con objeto
Reactotron.log('Usuario:', { id: 1, name: 'Juan' });

// Warning
Reactotron.warn('Esto es una advertencia');

// Error
Reactotron.error('Esto es un error', new Error('Detalles'));

// Display (objeto expandible)
Reactotron.display({
  name: 'API Response',
  value: { users: [...] },
  preview: '5 users loaded',
});

Benchmarking

Medir tiempo de ejecución:

const benchmark = Reactotron.benchmark('Carga de datos');

// ... operación costosa ...
await fetchLargeDataset();

benchmark.stop(); // Muestra tiempo en timeline

Categorías Personalizadas

Reactotron.display({
  name: 'PAYMENT',
  value: { amount: 99.99, currency: 'USD' },
  preview: 'Payment processed',
  important: true, // Resaltado en timeline
});

Timeline Visual

┌─────────────────────────────────────┐
│ Timeline                            │
├─────────────────────────────────────┤
│ 10:30:01  LOG      App started      │
│ 10:30:02  API      GET /users 200   │
│ 10:30:02  REDUX    SET_USERS        │
│ 10:30:05  WARN     Cache miss       │
│ 10:30:10  BENCH    Load: 245ms      │
└─────────────────────────────────────┘

Ejercicio Práctico

Objetivo

Implementar logging estructurado en tu app.

Pasos

  1. Crea logs para diferentes eventos
  2. Usa display para datos complejos
  3. Implementa benchmark para una operación
  4. Observa todo en la timeline
Ver solución 
import Reactotron from './ReactotronConfig';

function ProductsScreen() {
  const loadProducts = async () => {
    const bench = Reactotron.benchmark('Load Products');

    Reactotron.log('Iniciando carga de productos');

    try {
      const response = await fetch('/api/products');
      const products = await response.json();

      Reactotron.display({
        name: 'PRODUCTS',
        value: products,
        preview: `${products.length} productos`,
      });

      bench.stop();
    } catch (error) {
      Reactotron.error('Error cargando productos', error);
    }
  };

  return <Button onPress={loadProducts} title="Cargar" />;
}

Criterios de Éxito

← Volver al listado de tecnologías