← Volver al listado de tecnologías

Capítulo 7: Network Requests

Por: Siempre Listo
reactotronnetworkhttpapi

Network Requests

Reactotron captura automáticamente las peticiones HTTP para inspección.

Habilitación Automática

Reactotron
  .configure()
  .useReactNative({
    networking: {
      ignoreUrls: /logs|analytics/,
    },
  })
  .connect();

Vista en Timeline

┌─────────────────────────────────────┐
│ 10:30:01  API  GET /api/users       │
│           Status: 200               │
│           Duration: 145ms           │
│           ► Request Headers         │
│           ► Response Body           │
└─────────────────────────────────────┘

Información Capturada

Filtrar Peticiones

Reactotron
  .useReactNative({
    networking: {
      ignoreUrls: /\.(png|jpg|svg)$/,
      ignoreContentTypes: /^image\//,
    },
  })

Debugging de Errores

Peticiones fallidas se resaltan en rojo:

│ 10:30:05  API  POST /api/login  ❌  │
│           Status: 401               │
│           Response: {               │
│             "error": "Invalid..."   │
│           }                         │

Axios Interceptor Personalizado

import axios from 'axios';
import Reactotron from './ReactotronConfig';

axios.interceptors.response.use(
  (response) => {
    Reactotron.apiResponse(
      response.config.url,
      response.data,
      response.status
    );
    return response;
  },
  (error) => {
    Reactotron.error('API Error', error.response?.data);
    return Promise.reject(error);
  }
);

Ejercicio Práctico

Objetivo

Monitorear peticiones API y debuggear errores.

Pasos

  1. Habilita networking en configuración
  2. Realiza varias peticiones (éxito y error)
  3. Inspecciona headers y body en Reactotron
  4. Identifica causa de un error 401
Ver solución 
// Configuración
Reactotron
  .configure({ name: 'API Debug' })
  .useReactNative({
    networking: {
      ignoreUrls: /analytics/,
    },
  })
  .connect();

// Componente de prueba
function ApiTest() {
  const testRequests = async () => {
    // Request exitoso
    await fetch('https://jsonplaceholder.typicode.com/posts/1');

    // Request con error
    await fetch('https://httpstat.us/401');
  };

  return <Button title="Test API" onPress={testRequests} />;
}

En Reactotron verás ambas peticiones con sus detalles.

Criterios de Éxito

← Volver al listado de tecnologías