Sentry: O aliado ideal para detectar erros em produção.

Você lança um site, tudo parece certo. Mas aí um botão para de funcionar. Um formulário trava. Alguém clica e nada acontece.
Você só descobre quando o usuário vai embora.

É aí que o Sentry entra: ele mostra os erros antes que eles virem prejuízo.

O que o Sentry faz?

O Sentry monitora o que está acontecendo com seu site em tempo real.
Sempre que algo dá errado — um erro de JavaScript, uma exception no backend ou um componente quebrado — ele te avisa com:

• Stack trace completo do erro
• Linha exata do código que causou o problema
• Informações do navegador, SO e versão
• Breadcrumbs: ações do usuário antes do erro acontecer

Você vê tudo isso numa interface clara, fácil de entender, sem precisar sair debugando às cegas.

É só para devs?

Não. O Sentry é feito para equipes de desenvolvimento, mas também é útil para quem cuida da estabilidade e experiência do site:

• Gerentes de produto conseguem acompanhar o impacto dos erros.
• Times de suporte podem antecipar chamados.
• Devs corrigem com base em dados concretos.

O melhor: tem plano gratuito

Se você está começando ou tem um projeto pequeno/médio, o Sentry oferece um plano gratuito com volume mensal de eventos, suporte a várias linguagens (JavaScript, React, Node.js, Python, etc.) e integrações com Slack, GitHub, Jira e outras ferramentas.

Você pode começar sem cartão de crédito e testar tudo que ele oferece de forma prática.

Capturando erros em uma página HTML

1. Adicione o Sentry ao seu HTML:

<script src="https://browser.sentry-cdn.com/7.118.0/bundle.min.js" integrity="sha384-bHu6yF2FNhR4iX1nqUAv27EeFrN/dM80QogApWHDbWDy+QAA8FyqW0qvlfXZyEjo" crossorigin="anonymous"></script>
<script>
  Sentry.init({
    dsn: 'https://SEU_DSN@sentry.io/SEU_PROJETO',
  });
</script>

Substitua SEU_DSN@sentry.io/SEU_PROJETO pelo DSN real do seu projeto (você encontra no painel do Sentry ao criar um projeto JavaScript).

Capturando erros Manualmente

Se quiser registrar erros específicos, você pode usar:

<script>
  try {
    // código com erro
    throw new Error("Erro manual");
  } catch (err) {
    Sentry.captureException(err);
  }
</script>

Erros automáticos

Qualquer erro JavaScript que acontecer no navegador será automaticamente capturado e exibido no seu painel do Sentry, incluindo:

• Mensagem do erro
• Linha e arquivo onde ocorreu
• Navegador, sistema operacional e URL
• Stack trace completo

Capturando erros no React

npm install @sentry/react @sentry/tracing
# ou
yarn add @sentry/react @sentry/tracing

import * as Sentry from '@sentry/react';
import { BrowserTracing } from '@sentry/tracing';

Sentry.init({
  dsn: 'https://SEU_DSN@sentry.io/PROJETO_ID',
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0, // Ajuste para 0.1 em produção para economizar
});