Capítulo 5: Network Inspector

21 de enero de 2025 Por: Siempre Listo

rozenitenetworkhttpdebugging

Network Inspector

El plugin Network permite inspeccionar todas las peticiones HTTP en tiempo real.

Características

Captura automática de fetch y XMLHttpRequest
Vista de headers completos
Inspección de body (JSON formateado)
Filtrado por método, status, URL
Timing de cada petición

Interfaz del Panel

┌─────────────────────────────────────┐
│ Network                    [Clear]  │
├─────────────────────────────────────┤
│ [Filter: ________] [GET] [POST]     │
├─────────────────────────────────────┤
│ GET  /api/users     200   45ms      │
│ POST /api/login     401   120ms     │
│ GET  /api/posts     200   80ms      │
└─────────────────────────────────────┘

Configuración Avanzada

import { NetworkPlugin } from '@rozenite/network';

const networkConfig = {
  // Ignorar ciertas URLs
  ignoreUrls: [/analytics/, /logs/],

  // Máximo de requests guardados
  maxRequests: 100,

  // Capturar body de request
  captureRequestBody: true,

  // Capturar body de response
  captureResponseBody: true,
};

<RozeniteProvider
  plugins={[NetworkPlugin.configure(networkConfig)]}
>

Debugging de Errores

Al seleccionar una petición fallida:

┌─────────────────────────────────┐
│ POST /api/login - 401           │
├─────────────────────────────────┤
│ Request Headers:                │
│   Content-Type: application/json│
│   Authorization: Bearer xxx     │
├─────────────────────────────────┤
│ Request Body:                   │
│   { "email": "[email protected]" }  │
├─────────────────────────────────┤
│ Response Body:                  │
│   { "error": "Invalid token" }  │
└─────────────────────────────────┘

Ejercicio Práctico

Objetivo

Debuggear una petición fallida usando Network Inspector.

Pasos

Configura Network Plugin con opciones avanzadas
Realiza una petición que falle (401 o 404)
Inspecciona headers y body de la petición
Identifica la causa del error

Ver solución

function DebugNetwork() {
  const testFailedRequest = async () => {
    try {
      const response = await fetch('https://httpstat.us/401', {
        headers: {
          'Authorization': 'Bearer invalid-token',
        },
      });
      console.log('Status:', response.status);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <Button title="Test 401" onPress={testFailedRequest} />
  );
}

En Network Inspector verás:

Status: 401
Headers enviados
Response body con el error

Criterios de Éxito

Petición fallida capturada
Headers visibles
Causa del error identificada