🥇Monitoramento remoto de bugs em aplicações frontend React

Estamos explorando o uso do Sentry com React.

Este artigo faz parte de uma série que começa relatando erros do Sentry usando um exemplo: Часть 1.

Implementação de Reagir

Primeiro precisamos adicionar um novo projeto Sentry para esta aplicação; do site Sentry. Neste caso escolhemos React.

Iremos reimplementar nossos dois botões, Hello e Error, em uma aplicação com React. Começamos criando nosso aplicativo inicial:

npx create-react-app react-app

Em seguida, importamos o pacote Sentry:

yarn add @sentry/browser

e inicialize-o:

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://[email protected]/1289887',
    release: RELEASE,
  });
}
...

Observações:

Durante o desenvolvimento, temos outros mecanismos para monitorar problemas, como o console, por isso habilitamos o Sentry apenas para compilações 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}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } 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}
        >
          Error
        </button>
      </div>
    )
  }

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

react-app/src/App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

Problema (mapas de origem)

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

yarn build

e na pasta build digite:

npx http-server -c-1

O problema que encontramos imediatamente é que os registros de erro do Sentry referem-se a números de linha no lote reduzido; não é muito útil.

O serviço Sentry explica isso extraindo os mapas de origem do pacote reduzido após receber um erro. Neste caso estamos rodando a partir de localhost (não acessível pelo serviço Sentry).

Soluções (mapas de origem)

A solução para este problema é executar o aplicativo a partir de um servidor web público. Um botão de resposta simples para usar o serviço GitHub Pages (gratuito). As etapas de uso geralmente são as seguintes:

Copie o conteúdo da pasta construir para a pasta docs no diretório raiz do repositório.
Ligar Páginas GitHub no repositório (do GitHub) para usar a pasta docs em dominar filiais
Enviar alterações para GitHub

Nota: depois que descobri o que preciso usar criar-criar-aplicativo função de página inicial para iniciar o aplicativo. Resumiu-se a adicionar o seguinte ao package.json:

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

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

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

Ilustração de insetos capturados

Vamos prosseguir clicando no botão Olá.

Com um erro aparecendo assim:

Observações:

Este relatório de bug não poderia ser mais claro, BRAVO.

Ilustração de erros não contabilizados

Da mesma forma, vamos passar pelo botão clicar erro.

Com um erro aparecendo assim:

Melhor tratamento de erros não contabilizados (renderização)

Introdução de limites de erro

Um erro de JavaScript em parte da interface do usuário não deve interromper todo o aplicativo. Para resolver este problema para usuários do React, o React 16 introduz um novo conceito chamado “limites de erro”.

Limites de erro são componentes React que capturam erros de JavaScript em qualquer lugar em sua árvore de componentes filho, registram esses erros e renderizam uma UI substituta em vez da árvore de componentes que travou. Os limites de erro detectam erros durante a renderização, nos métodos do ciclo de vida e nos construtores de toda a árvore abaixo deles.

...

Novo comportamento para erros não detectados

Esta mudança é significativa. A partir do React 16, erros que não foram detectados por nenhum limite de erro resultarão na desmontagem de toda a árvore de componentes do React.

- Dan Abramov- Tratamento de erros no React 16

Um esclarecimento importante que demorei um pouco para perceber isso é que o comportamento acima só funciona com erros gerados no método de renderização (ou mais provavelmente em qualquer um dos métodos de ciclo de vida). Por exemplo, usar limites de erro não ajudaria em nada com nosso botão erro; esse erro estava no manipulador de cliques.

Vamos criar um exemplo de erro de renderização e, em seguida, usar limites de erro para lidar com o erro de maneira 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}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

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

Observação:

Quando você pressiona o botão, Reagir será mostrado bandeira.busted.bogus, o que gera um erro
Sem um limite de erro, toda a árvore de componentes será desmontada

Em seguida, escrevemos nosso código de limite de erro (usa o novo método de ciclo de vida componenteDidCatch); este é essencialmente o exemplo dado 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>Something went wrong.</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>
    );
  }
}
...

No entanto, clicar no botão Erro de renderização exibe a interface de usuário substituta e relata um erro ao Sentry.

Realização

Eu espero que tenha achado isto útil.

PS Link para o original

Bate-papo do PS Telegram via Sentry https://t.me/sentry_ru

Fonte: habr.com

Monitoramento remoto Sentry de bugs em aplicativos frontend React

Adicionar um comentário cancelar resposta