🥇Vixilancia remota de erros de Sentry nas aplicacións frontend de React

Estamos explorando usar Sentry con React.

Este artigo forma parte dunha serie que comeza co informe de erros de Sentry mediante un exemplo: Часть 1.

Implementación de React

Primeiro necesitamos engadir un novo proxecto Sentry para esta aplicación; dende o sitio web de Sentry. Neste caso escollemos React.

Implementaremos de novo os nosos dous botóns, Ola e Erro, nunha aplicación con React. Comezamos creando a nosa aplicación de inicio:

npx create-react-app react-app

Despois importamos o paquete Sentry:

yarn add @sentry/browser

e inicialízao:

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,
  });
}
...

Observacións:

Durante o desenvolvemento, temos outros mecanismos para supervisar problemas, como a consola, polo que só activamos Sentry para as versións de produción

A continuación implementamos os nosos botóns Ola e Erro e engadímolos á aplicación:

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 fonte)

Podemos probar Sentry cunha compilación de produción introducindo:

yarn build

e desde o cartafol de compilación introduza:

npx http-server -c-1

O problema co que nos atopamos inmediatamente é que os rexistros de erros de Sentry fan referencia aos números de liña do lote reducido; non moi útil.

O servizo Sentry explica isto tirando dos mapas de orixe para o paquete reducido despois de recibir un erro. Neste caso estamos executando desde localhost (non accesible polo servizo Sentry).

Solucións (Mapas Fontes)

A solución a este problema é executar a aplicación desde un servidor web público. Un simple botón de resposta para usar o servizo de páxinas de GitHub (gratuíto). Os pasos a usar normalmente son os seguintes:

Copia o contido do cartafol construír á carpeta docs no directorio raíz do repositorio.
Acende Páxinas GitHub no repositorio (de GitHub) para usar o cartafol docs mestre ramas
Enviar cambios a GitHub

Nota: despois de descubrir o que teño que usar crear-crear-aplicación función de páxina de inicio para iniciar a aplicación. Reduciuse a engadir o seguinte a package.json:

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

A versión final da aplicación en execución está dispoñible en:

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

Ilustración de Caught Bugs

Imos facer clic no botón Ola.

Con un erro que aparece como este:

Observacións:

Este informe de erros non pode ser máis claro, BEN FEITO.

Ilustración de erros non contabilizados

Do mesmo xeito, imos facer clic no botón erro.

Con un erro que aparece como este:

Mellor manexo dos erros non contabilizados (renderizado)

Introdución de límites de erro

Un erro de JavaScript en parte da interface de usuario non debería romper toda a aplicación. Para resolver este problema para os usuarios de React, React 16 introduce un novo concepto chamado "límites de erro".

Os límites de erro son compoñentes de React que detectan erros de JavaScript en calquera parte da súa árbore de compoñentes fillos, rexistran eses erros e representan unha IU alternativa en lugar da árbore de compoñentes que fallou. Os límites dos erros detectan erros durante a representación, nos métodos de ciclo de vida e nos construtores de toda a árbore que están debaixo deles.

...

Novo comportamento para erros non detectados

Este cambio é significativo. A partir de React 16, os erros que non foron detectados por ningún límite de erro provocarán que se desmonte toda a árbore de compoñentes de React.

- Dan Abramov - Tratamento de erros en React 16

Unha aclaración importante que me levou un tempo antes de darme conta é que o comportamento anterior só funciona con erros lanzados no método de renderizado (ou máis probable nalgún dos métodos de ciclo de vida). Por exemplo, usar límites de erro non serviría de nada co noso botón erro; este erro estaba no manejador de clics.

Imos crear un exemplo de erro de renderizado e, a continuación, use os límites de erro para xestionar o erro con máis gracia.

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,
    });
  }
}

Observación:

Cando preme o botón, Reaccionar mostrarase bandeira.rebentada.falsa, que xera un erro
Sen un límite de erro, desmontarase toda a árbore de compoñentes

Despois escribimos o noso código de límite de erro (usa o novo método de ciclo de vida componentDidCatch); este é esencialmente 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 compoñente:

react-app/src/App.js

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

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

Non obstante, ao facer clic no botón Error de renderización móstrase a IU alternativa e infórmase dun erro a Sentry.

Realización

Espero que che resulte útil.

PS Ligazón ao orixinal

Chat de PS Telegram a través de Sentry https://t.me/sentry_ru

Fonte: www.habr.com

Monitorización remota de erros de Sentry nas aplicacións frontend de React

Engadir un comentario Cancelar resposta