ProHoster > Blog > Administração > Rastreamento de erros em aplicativos React com Sentry

Rastreamento de erros em aplicativos React com Sentry

Rastreamento de erros em aplicativos React com Sentry

Hoje eu vou falar sobre o monitoramento de erros em tempo real em aplicações React. Normalmente, a interface do usuário não é utilizada para o monitoramento de erros. Algumas empresas frequentemente adiam o monitoramento de erros, voltando a ele somente após a documentação, testes e outras coisas. No entanto, se você pode melhorar seu produto, então simplesmente faça isso!

1. Por que você precisa do Sentry?

Suponho que você esteja interessado em monitorar erros durante o processo de produção.

Você acha que isso é insuficiente?

Bem, vamos olhar os detalhes.

Principais razões para usar o Sentry para desenvolvedores:

  • Permite eliminar riscos ao implantar código com erros.
  • Apoio ao QA na teste do código.
  • Receber notificações rápidas sobre problemas.
  • Possibilidade de corrigir erros rapidamente.
  • Obtenção de uma visualização conveniente de erros no painel de administração.
  • Classificação de erros por segmentos de usuário / navegador.

Principais razões para CEOs / Líderes de projeto.

  • Economia de dinheiro (o Sentry pode ser instalado em seus servidores).
  • Receber feedback dos usuários.
  • Compreensão do que está errado com seu projeto em tempo real.
  • Entender a quantidade de problemas que as pessoas estão enfrentando com seu aplicativo.
  • Ajudar a identificar onde seus desenvolvedores cometeram erros.

Acredito que os desenvolvedores estariam mais interessados neste artigo. Você também pode usar esta lista de razões para convencer a alta administração a integrar o Sentry.

Cuidado com o último item da lista para os negócios.

Já está interessado?

Rastreamento de erros em aplicativos React com Sentry

O que é o Sentry?

O Sentry é uma aplicação de monitoramento de erros de código aberto que ajuda desenvolvedores a rastrear e corrigir falhas em tempo real. Não se esqueça que a aplicação também aumenta a eficiência e melhora a experiência do usuário. O Sentry suporta JavaScript, Node, Python, PHP, Ruby, Java e outras linguagens de programação.

Rastreamento de erros em aplicativos React com Sentry

2. Faça login e crie um projeto.

  • Abra sua conta Sentry. Você pode precisar fazer login. (Lembre-se de que o Sentry pode ser instalado em seus servidores.)
  • O próximo passo é criar um projeto.
  • Escolha sua linguagem na lista. (Vamos escolher React. Clique em "Criar projeto".)

Rastreamento de erros em aplicativos React com Sentry

Configure sua aplicação. Um exemplo básico de como integrar o Sentry em um contêiner pode ser visto abaixo:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https:>"
// });
// deveria ter sido chamado antes de usá-lo aqui
// idealmente, antes mesmo de renderizar seu aplicativo react 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope =&gt; {
        Object.keys(errorInfo).forEach(key =&gt; {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            // renderizar UI de fallback
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Reportar feedback</a>
            );
        } else {
            // quando não há erro, renderizar filhos inalterados
            return this.props.children;
        }
    }
}

O Sentry tem um Assistente útil que ajudará você a entender o que deve fazer em seguida. Você pode seguir os seguintes passos. Quero mostrar como criar seu primeiro manipulador de erros. Ótimo, criamos o projeto! Vamos para o próximo passo.

3. Integração do React com Sentry

Você deve instalar o pacote npm em seu projeto.

npm i @sentry/browser

Inicialize o Sentry em seu contêiner:

Sentry.init({
  // dsn: #dsnUrl,
});

O DSN pode ser encontrado em Projetos -> Configurações -> Chaves do Cliente. Você pode encontrar as chaves do cliente na barra de pesquisa.

Rastreamento de erros em aplicativos React com Sentry

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
  });
}

4. Rastreando o primeiro erro

Por exemplo, eu usei um aplicativo musical simples com a API do Deezer. Você pode ver isso. aqui. Precisamos criar um erro. Uma maneira é acessar uma propriedade "undefined".

Devemos criar um botão que chama console.log com user.email. Após essa ação, devemos receber uma mensagem de erro: Uncaught TypeError (não é possível ler a propriedade de indefinido email) por causa da ausência do objeto usuário. Você também pode usar exceção JavaScript.

Todo o contêiner se parece com isso:

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "..\/store\/actions\/getList";

const Search = Input.Search;

const mapState = state =&gt; ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https:\/\/fc0edcf6927a4397855797a033f04085@sentry.io\/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope =&gt; {
      Object.keys(errorInfo).forEach(key =&gt; {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div classname="App">
        <button
          type="button"
          onclick="{()" > console.log(user.email)}
        &gt;
          erro de teste1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Relatar feedback1</div>
        <h1>Encontrador de Música</h1>
        <br />
        <search onsearch="{value" > getList(value)} enterButton \/&gt;
        {loading &amp;&amp; <skeleton avatar title="{false}" loading="{true}" active />}
        {!loading &amp;&amp; (
          <list
            itemlayout="horizontal"
            datasource="{list}"
            locale="{{" emptytext: <div /> }}
            renderItem={item =&gt; (
              <List.Item>
                &lt;List.Item.Meta
                  avatar={<avatar src="{item.artist.picture}" />}
                  title={item.title}
                  description={item.artist.name}
                \/&gt;
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

Após a integração deste botão, você deve testá-lo no navegador.

Rastreamento de erros em aplicativos React com Sentry

Temos nosso primeiro erro

Rastreamento de erros em aplicativos React com Sentry

Uhuul!

Rastreamento de erros em aplicativos React com Sentry

Se você clicar no erro do cabeçalho, verá a rastreação da pilha.

Rastreamento de erros em aplicativos React com Sentry

As mensagens parecem ruins. Claro, vimos mensagens de erro sem entender de onde vem esse código. Por padrão, isso se refere ao mapa fonte no ReactJS, pois eles não estão configurados.

Eu também gostaria de fornecer instruções sobre como configurar o mapa fonte, mas isso tornaria este artigo muito mais longo do que eu planejava.

Você pode explorar este tópico aqui. Se você está interessado neste artigo, Dmitry Nozhenko publicará a segunda parte sobre a integração do mapa fonte. Então, curta mais e inscreva-se Dmitry Nozhenko, para não perder a segunda parte.

5. Usando Sentry com o ponto final API

Ok. Abordamos a exceção JavaScript nas seções anteriores. No entanto, o que faremos com erros de XHR?

O Sentry também tem um tratamento de erros personalizado. Eu o utilizei para rastrear erros de API.

Sentry.captureException(err)

Você pode configurar o nome do erro, o nível, adicionar dados, dados únicos do usuário com seu aplicativo, e-mail, etc.

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Eu gostaria de usar uma função genérica para a captura de API.

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

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - Se você quiser obter o feedback dos usuários sobre o erro
  return Sentry.captureException(error);
};

Importe essa função na chamada da API.

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

Vamos verificar os métodos:

  • setLevel permite inserir um erro de nível no painel de controle do Sentry. Ele tem propriedades - ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’).
  • setUser ajuda a armazenar quaisquer dados do usuário (id, endereço de e-mail, plano de pagamento, etc.).
  • setExtra permite especificar quaisquer dados que você precisar, como a loja.

Se você deseja obter feedback dos usuários sobre o erro, deve usar a função showReportDialog.

Sentry.showReportDialog();

Conclusão:

Hoje, descrevemos uma das maneiras de integrar o Sentry em um aplicativo React.

→ Chat no Telegram sobre Sentry

Fonte: habr.com

Compre hospedagem confiável para sites com proteção contra DDoS, servidores VPS VDS 🔥 Compre hospedagem confiável para sites com proteção contra DDoS, servidores VPS VDS | ProHoster