Plugins Oficiales

Rozenite ofrece plugins oficiales para las tareas de debugging más comunes.

Lista de Plugins

Instalación de Todos

npm install @rozenite/network @rozenite/storage @rozenite/performance

Configuración Completa

import { RozeniteProvider } from '@rozenite/core';
import { NetworkPlugin } from '@rozenite/network';
import { StoragePlugin } from '@rozenite/storage';
import { PerformancePlugin } from '@rozenite/performance';

const plugins = [
  NetworkPlugin,
  StoragePlugin,
  PerformancePlugin,
];

export default function App() {
  return (
    <RozeniteProvider plugins={plugins}>
      <MyApp />
    </RozeniteProvider>
  );
}

Network Plugin

Captura automáticamente:

• Peticiones fetch/XMLHttpRequest
• Headers de request/response
• Body de request/response
• Tiempo de respuesta
• Status codes

Storage Plugin

Soporta:

• AsyncStorage
• MMKV
• SecureStore (Expo)
• Edición en tiempo real

Performance Plugin

Monitorea:

• FPS en tiempo real
• Uso de memoria
• Re-renders de componentes
• Tiempo de startup

Ejercicio Práctico

Objetivo

Configurar los 3 plugins oficiales principales.

Pasos

1. Instala Network, Storage y Performance
2. Configura todos en el Provider
3. Genera actividad (fetch, storage, renders)
4. Observa cada panel capturando datos

import { useState, useEffect } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

function TestPlugins() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Network
    fetch('https://api.github.com/users/octocat');

    // Storage
    AsyncStorage.setItem('test', 'value');
  }, []);

  return (
    <Button
      title={`Renders: ${count}`}
      onPress={() => setCount(c => c + 1)}
    />
  );
}

Criterios de Éxito

• 3 plugins instalados
• Network captura peticiones
• Storage muestra datos
• Performance muestra métricas

Navegación

• ← Anterior: Primeros Pasos
• Índice del Tutorial
• Siguiente: Network Inspector →