🥇Vigilància remota de Sentry d'errors a les aplicacions frontend de React

Estem explorant l'ús de Sentry amb React.

Aquest article forma part d'una sèrie que comença per informar d'errors de Sentry mitjançant un exemple: Часть 1.

Implementació de React

Primer hem d'afegir un nou projecte Sentry per a aquesta aplicació; del lloc web de Sentry. En aquest cas escollim Reaccionar.

Tornarem a implementar els nostres dos botons, Hola i Error, en una aplicació amb React. Comencem creant la nostra aplicació inicial:

npx create-react-app react-app

A continuació, importem el paquet Sentry:

yarn add @sentry/browser

i inicialitzeu-lo:

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

Observacions:

Durant el desenvolupament, tenim altres mecanismes per controlar problemes, com ara la consola, de manera que només habilitem Sentry per a les versions de producció.

A continuació, implementem els nostres botons Hola i Error i els afegim a l'aplicació:

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 (mapes font)

Podem provar Sentry amb una compilació de producció introduint:

yarn build

i des de la carpeta de compilació introduïu:

npx http-server -c-1

El problema amb què ens trobem immediatament és que els registres d'error de Sentry fan referència als números de línia del lot minificat; no gaire útil.

El servei Sentry ho explica mitjançant l'extracció dels mapes d'origen per al paquet reduït després de rebre un error. En aquest cas estem executant des de localhost (no accessible pel servei Sentry).

Solucions (mapes font)

La solució a aquest problema és executar l'aplicació des d'un servidor web públic. Un simple botó de resposta per utilitzar el servei de pàgines de GitHub (gratuït). Els passos a utilitzar solen ser els següents:

Copieu el contingut de la carpeta construir a la carpeta docs al directori arrel del repositori.
Encendre Pàgines de GitHub al repositori (de GitHub) per utilitzar la carpeta de documents mestre branques
Premeu els canvis a GitHub

Nota: després d'haver esbrinat què he d'utilitzar crear-crear-aplicació funció de pàgina d'inici per iniciar l'aplicació. Es va reduir a afegir el següent a package.json:

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

La versió final de l'aplicació en execució està disponible a:

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

Il·lustració de Caught Bugs

Anem a fer clic al botó Hola.

Amb un error que apareix així:

Observacions:

Aquest informe d'error no podria ser més clar, BRAVO.

Il·lustració d'errors no explicats

De la mateixa manera, anem a fer clic al botó error.

Amb un error que apareix així:

Millor maneig dels errors no contabilitzats (renderització)

Introducció de límits d'error

Un error de JavaScript en part de la interfície d'usuari no hauria de trencar tota l'aplicació. Per resoldre aquest problema per als usuaris de React, React 16 introdueix un nou concepte anomenat "límits d'error".

Els límits d'error són components de React que detecten errors de JavaScript a qualsevol part del seu arbre de components secundaris, registren aquests errors i representen una interfície d'usuari alternativa en lloc de l'arbre de components que s'ha bloquejat. Els límits d'error capturen errors durant la representació, en els mètodes de cicle de vida i en els constructors de tot l'arbre que hi ha a sota.

...

Nou comportament per a errors no detectats

Aquest canvi és significatiu. A partir de React 16, els errors que no s'han detectat per cap límit d'error provocaran que es desmunti tot l'arbre de components de React.

- Dan Abramov - Gestió d'errors a React 16

Un aclariment important que em va portar una estona abans d'adonar-me d'això és això el comportament anterior només funciona amb errors llançats en el mètode de renderització (o més probable en qualsevol dels mètodes de cicle de vida). Per exemple, utilitzar límits d'error no serviria de res amb el nostre botó error; aquest error es trobava al gestor de clics.

Creem un exemple d'error de representació i després utilitzem els límits d'error per gestionar l'error amb més gràcia.

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ó:

Quan premeu el botó, Reaccionar es mostrarà bandera.rebentada.falsa, que genera un error
Sense un límit d'error, es desmuntarà tot l'arbre de components

A continuació, escrivim el nostre codi de límit d'error (utilitza el nou mètode de cicle de vida componentDidCatch); aquest és essencialment l'exemple donat a l'article 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;
  }
}

Finalment fem servir aquest component:

react-app/src/App.js

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

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

Tanmateix, si feu clic al botó Error de renderització, es mostra la interfície d'usuari alternativa i s'informa d'un error a Sentry.

Terminació

Espero que us hagi resultat útil.

PS Enllaç a l'original

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

Font: www.habr.com

Monitorització remota de Sentry d'errors a les aplicacions frontals de React

Afegeix comentari Cancel resposta