getsentry/sentry-react-setup

¿Qué hace sentry-react-setup?

Configura Sentry en aplicaciones React. Úsalo cuando se solicite agregar Sentry a React, instalar @sentry/react o configurar monitoreo de errores, límites de error, reproducción de sesiones o trazado del navegador para aplicaciones React.

Instalación

Para instalar el paquete necesario, ejecuta:

npm install @sentry/react

o con yarn:

yarn add @sentry/react

Configuración inicial

Importa e inicializa Sentry en el punto de entrada de tu aplicación (generalmente index.js o App.js):

import * as Sentry from '@sentry/react';

Sentry.init({
  dsn: 'TU_DSN_DE_SENTRY',
  integrations: [
    new Sentry.BrowserTracing(),
    new Sentry.Replay(),
  ],
  tracesSampleRate: 1.0,
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});

Límites de error (Error Boundaries)

Envuelve componentes con Sentry.ErrorBoundary para capturar errores de renderizado:

import { ErrorBoundary } from '@sentry/react';

function App() {
  return (
    <ErrorBoundary fallback={<p>Algo salió mal</p>}>
      <MainComponent />
    </ErrorBoundary>
  );
}

Uso recomendado

• Utiliza este skill siempre que necesites agregar Sentry a un proyecto React nuevo o existente.
• Asegúrate de configurar correctamente el DSN desde tu cuenta de Sentry.
• Para entornos de producción, ajusta tracesSampleRate a un valor menor (por ejemplo, 0.2).

Para más detalles, consulta la documentación oficial de Sentry para React.