🥇Sentry monitoreo remoto de errores en aplicaciones frontend de React

Estamos explorando el uso de Sentry con React.

Este artículo es parte de una serie que comienza informando errores de Sentry usando un ejemplo: Часть 1.

Implementación de reaccionar

Primero necesitamos agregar un nuevo proyecto Sentry para esta aplicación; del sitio web de Sentry. En este caso elegimos React.

Volveremos a implementar nuestros dos botones, Hola y Error, en una aplicación con React. Comenzamos creando nuestra aplicación de inicio:

npx create-react-app react-app

Luego importamos el paquete Sentry:

yarn add @sentry/browser

e inicializarlo:

reaccionar-aplicación/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,
  });
}
...

Observaciones:

Durante el desarrollo, tenemos otros mecanismos para monitorear problemas, como la consola, por lo que solo habilitamos Sentry para compilaciones de producción.

A continuación implementamos nuestros botones Hola y Error y los agregamos a la aplicación:

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

reaccionar-aplicación/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');
  }
}

reaccionar-aplicación/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 fuente)

Podemos probar Sentry con una versión de producción ingresando:

yarn build

y desde la carpeta de compilación ingrese:

npx http-server -c-1

El problema con el que nos encontramos inmediatamente es que los registros de error de Sentry se refieren a números de línea en el lote minimizado; no muy útil.

El servicio Sentry explica esto extrayendo los mapas de origen del paquete reducido después de recibir un error. En este caso estamos ejecutando desde localhost (no accesible por el servicio Sentry).

Soluciones (mapas fuente)

La solución a este problema es ejecutar la aplicación desde un servidor web público. Un simple botón de respuesta para utilizar el servicio GitHub Pages (gratis). Los pasos a utilizar suelen ser los siguientes:

Copie el contenido de la carpeta. build a la carpeta documentos en el directorio raíz del repositorio.
Encender Páginas de GitHub en el repositorio (de GitHub) para usar la carpeta de documentos en dominar ramas
Enviar cambios a GitHub

Nota: después de descubrir lo que necesito usar crear-crear-aplicación Función de página de inicio para iniciar la aplicación. Se redujo a agregar lo siguiente a package.json:

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

La versión final de la aplicación en ejecución está disponible en:

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

Ilustración de insectos atrapados

Veamos cómo hacer clic en el botón Hola.

Con un error que aparece como este:

Observaciones:

Este informe de error no podría ser más claro. BRAVO.

Ilustración de errores no contabilizados

Del mismo modo, repasemos el clic del botón. Error.

Con un error que aparece como este:

Mejor manejo de errores no contabilizados (renderizado)

Introducción de límites de error

Un error de JavaScript en parte de la interfaz de usuario no debería dañar toda la aplicación. Para resolver este problema para los usuarios de React, React 16 introduce un nuevo concepto llamado "límites de error".

Los límites de error son componentes de React que detectan errores de JavaScript en cualquier parte de su árbol de componentes secundarios, registran esos errores y representan una interfaz de usuario alternativa en lugar del árbol de componentes que falló. Los límites de error detectan errores durante la renderización, en los métodos del ciclo de vida y en los constructores de todo el árbol debajo de ellos.

...

Nuevo comportamiento para errores no detectados

Este cambio es significativo. A partir de React 16, los errores que no fueron detectados por ningún límite de error provocarán que se desmonte todo el árbol de componentes de React.

- Dan Abramov- Manejo de errores en React 16

Una aclaración importante que me tomó un tiempo antes de darme cuenta de esto es que El comportamiento anterior solo funciona con errores generados en el método de renderizado (o más probablemente en cualquiera de los métodos del ciclo de vida).. Por ejemplo, usar límites de error no serviría de nada con nuestro botón Error; Este error estaba en el controlador de clic.

Creemos un ejemplo de error de renderizado y luego usemos límites de error para manejar el error de manera más elegante.

reaccionar-aplicación/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:

Cuando presionas el botón, Reaccionar será mostrado bandera.reventada.falsa, lo que genera un error
Sin un límite de error, se desmontará todo el árbol de componentes

Luego escribimos nuestro código de límite de error (usa el nuevo método de ciclo de vida componenteDidCatch); Este es esencialmente el ejemplo dado en el artículo de Dan Abramov:

reaccionar-aplicación/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:

reaccionar-aplicación/src/App.js

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

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

Sin embargo, al hacer clic en el botón Renderizar error se muestra la interfaz de usuario alternativa y se informa un error a Sentry.

Terminación

Espero que hayas encontrado esto util.

PS Enlace al original

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

Fuente: habr.com

Monitoreo remoto Sentry de errores en aplicaciones frontend de React

Añadir un comentario Cancelar respuesta