getsentry/sentry-react-sdk

O que sentry-react-sdk faz?

Configuração completa do SDK do Sentry para React. Use quando solicitado a "adicionar Sentry ao React", "instalar @sentry/react" ou configurar monitoramento de erros, rastreamento, replay de sessão, perfilamento ou registro de logs para aplicações React. Suporta React 16+, React Router v5-v7 no modo não framework, TanStack Router, Redux, Vite e webpack.

Como usar

Para adicionar o Sentry à sua aplicação React, execute o comando:

npx @sentry/wizard -s -i react

Isso irá instalar o pacote @sentry/react e configurar automaticamente o cliente Sentry.

Configuração manual

Alternativamente, você pode configurar manualmente:

1. Instale o pacote:

npm install @sentry/react

2. No arquivo principal da sua aplicação (ex: App.js, index.js ou main.jsx), importe e configure o Sentry:

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

Sentry.init({
  dsn: "SUA_DSN_DO_SENTRY",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
    Sentry.reactRouterV6BrowserTracingIntegration({
      useEffect: React.useEffect,
      useLocation: ReactRouter.useLocation,
      useNavigationType: ReactRouter.useNavigationType,
      createRoutesFromChildren: ReactRouter.createRoutesFromChildren,
      matchRoutes: ReactRouter.matchRoutes,
    }),
  ],
  tracesSampleRate: 1.0, // Ajuste para produção (ex: 0.2)
  replaysSessionSampleRate: 0.1, // Amostragem de replay de sessão
  replaysOnErrorSampleRate: 1.0, // Replay em caso de erro
});

3. Opcionalmente, configure o Error Boundary do Sentry:

import { createRoot } from "react-dom/client";

const root = createRoot(document.getElementById("root"));
root.render(
  <Sentry.ErrorBoundary fallback={<p>Ocorreu um erro.</p>}>
    <App />
  </Sentry.ErrorBoundary>
);

Suporte a roteadores

React Router v5 - v7 (modo não framework)

A integração com React Router no modo não framework requer a passagem explícita das funções de roteamento. O wizard do Sentry detecta automaticamente a versão instalada e configura a integração apropriada.

TanStack Router

Para TanStack Router, use:

import { sentryRouterInstrumentation } from "@sentry/react";

Sentry.init({
  dsn: "SUA_DSN_DO_SENTRY",
  integrations: [
    sentryRouterInstrumentation({
      router: seuRouterInstance,
    }),
  ],
  tracesSampleRate: 1.0,
});

Suporte a Redux

Para Redux, adicione o middleware do Sentry:

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

const sentryReduxEnhancer = Sentry.createReduxEnhancer();

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(thunk), sentryReduxEnhancer)
);

Uso com Vite

Com Vite, você pode usar a integração automática ou manual. Exemplo:

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  build: {
    sourcemap: true, // Necessário para sentry
  },
});

Uso com webpack

Com webpack, certifique-se de gerar sourcemaps:

// webpack.config.js
module.exports = {
  devtool: "source-map",
  // ...
};

Variáveis de ambiente

Variável	Descrição
SENTRY_DSN	Chave DSN do projeto Sentry
SENTRY_ENVIRONMENT	Ambiente (ex: "production", "staging")
SENTRY_RELEASE	Identificador da versão (ex: "1.0.0")

Links úteis

• Documentação oficial do Sentry para React
• Exemplos de configuração
• Pacote npm @sentry/react