🥇Sentry monitoramento remoto de bugs em aplicações front-end React

Estamos explorando o uso do Sentry com React.

Este artigo é parte de uma série que começa com um relato de erros do Sentry usando: Parte 1.

Implementação do React

Primeiro, precisamos adicionar um novo projeto Sentry para este aplicativo; no site do Sentry. Neste caso, escolhemos React.

Nós vamos implementar novamente nossos dois botões, Hello e Error, no aplicativo React. Começamos criando nosso aplicativo inicial:

npx create-react-app react-app

Em seguida, importamos o pacote Sentry:

yarn add @sentry/browser

e o inicializamos:

react-app / src / index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

Observações:

Durante o desenvolvimento, temos outros mecanismos para observar problemas, como o console, então ativamos o Sentry apenas para builds de produção.

Em seguida, implementamos nossos botões Hello e Error e os adicionamos ao aplicativo:

react-app / src / Hello.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Olá
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Olá Mundo',
    });
    try {
      throw new Error('Capturado');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

react-app / src / MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Erro
        </button>
      </div>
    )
  }

  handleClick = () =&gt; {
    throw new Error('Uncaught');
  }
}

react-app / src / App.js

...importar Hello de './Hello';
importar MyError de './MyError';

classe App estende Componente {
  renderizar() {
    retornar (
      <div classname="App">
        ...
        <hello />
        <myerror />
      </div>
    );
  }
}

exportar padrão App;

Problema (Mapas de Origem)

Podemos testar o Sentry com uma build de produção, digitando:

yarn build

e a partir da pasta build, digite:

npx http-server -c-1

O problema que enfrentamos imediatamente é que os registros de erro do Sentry referenciam números de linha no pacote minimizado; não é muito útil.

O serviço Sentry explica isso puxando os mapas de origem para o pacote minimizado após a obtenção do erro. Neste caso, estamos fugindo do localhost (não acessível pelo Sentry).

Soluções (Mapas de Origem)

A solução para esse problema envolve rodar o aplicativo em um servidor web público. Uma solução simples para isso é usar o serviço GitHub Pages (grátis). Normalmente, os passos são os seguintes:

Copie o conteúdo da pasta build para a pasta docs para o diretório raiz do repositório.
Ative o GitHub Pages no repositório (do GitHub) para usar a pasta docs na master branch
Envie as alterações para o GitHub

Nota: depois que percebi que precisava usar create-create-app a função homepage para rodar o aplicativo. Isso se resumia a adicionar o seguinte ao package.json:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

A versão final do aplicativo rodante está disponível em:

https://larkintuckerllc.github.io/hello-sentry/

Ilustração de Erros Capturados

Vamos passar pelo clique no botão Hello.

Com o erro aparecendo da seguinte forma:

Observações:

Esse relato de erro não pode ser mais claro, BRAVO.

Ilustração de Erros Não Capturados

Da mesma forma, vamos passar pelo clique no botão Erro.

Com o erro aparecendo da seguinte forma:

A melhor manipulação de erros não capturados (renderização)

Introdução às Fronteiras de Erros
Um erro JavaScript na parte da interface do usuário não deve interromper o funcionamento de toda a aplicação. Para resolver esse problema para usuários do React, o React 16 introduz o novo conceito de "fronteiras de erros".
As fronteiras de erros são componentes React que capturam erros JavaScript em qualquer lugar de sua árvore de componentes filhos, registram esses erros e exibem uma interface do usuário de reserva em vez da árvore de componentes que deixou de funcionar. As fronteiras de erros capturam erros durante a renderização, nos métodos de ciclo de vida e nos construtores de toda a árvore abaixo delas.
…
Novo comportamento para erros não detectados
Esta mudança é significativa. A partir do React 16, erros que não forem capturados por qualquer fronteira de erro levarão ao descarte de toda a árvore de componentes do React.
— Dan Abramov — Tratamento de Erros no React 16

Uma importante observação que levou algum tempo para eu entender é que o comportamento acima só se aplica a erros gerados no método de renderização (ou, mais provavelmente, em qualquer um dos métodos de ciclo de vida). Por exemplo, usar fronteiras de erros não ajudaria com nosso botão Erro; esse erro estava no manipulador de cliques.

Vamos criar um exemplo de erro de renderização e depois usar fronteiras de erros para um tratamento de erro mais elegante.

react-app / src / MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onclick="{this.handleClick}"
        >
          Erro de Renderização
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      flag: true,
    });
  }
}

Observação:

Ao clicar no botão, React será exibido flag.busted.bogus, que gera um erro
Sem uma fronteira de erros, toda a árvore de componentes será desmontada

Em seguida, escrevemos nosso código de fronteira de erro (usa o novo método de ciclo de vida componentDidCatch); isso é praticamente um exemplo apresentado no artigo de Dan Abramov:

react-app / src / ErrorBoundary.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Algo deu errado.</h1>;
    }
    return this.props.children;
  }
}

Finalmente, usamos este componente:

react-app / src / App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <errorboundary>
        <div classname="App">
          ...
        </div>
      </errorboundary>
    );
  }
}
...

Assim, ao clicar no botão Render Error, a interface do usuário de reserva é exibida e o erro é relatado ao Sentry.