🥇Sentry monitoraggio remoto di bug in applicazioni frontend React

Avemu esploratu cù Sentry cù React.

Questu articulu face parte di una seria chì principia cù l'errore di Sentry cù un esempiu: Parte di 1.

Implementazione di React

Prima avemu bisognu di aghjunghje un novu prughjettu Sentry per questa applicazione; da u situ web di Sentry. In questu casu avemu sceltu React.

Riimplementeremu i nostri dui buttoni, Salute è Errore, in una applicazione cù React. Cuminciamu creendu a nostra applicazione iniziale:

npx create-react-app react-app

Allora impurtate u pacchettu Sentry:

yarn add @sentry/browser

è iniziali:

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

Osservazioni:

Durante u sviluppu, avemu altri meccanismi per i prublemi di monitoraghju, cum'è a cunsola, cusì attivemu solu Sentry per e custruzzioni di produzzione.

In seguitu implementemu i nostri buttoni Hello è Errore è aghjunghje à l'applicazione:

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;

Prublemu (Source Maps)

Pudemu pruvà Sentry cù una custruzzione di produzzione inserendu:

yarn build

è da u cartulare di creazione entre:

npx http-server -c-1

U prublema chì avemu subitu subitu hè chì i registri d'errore di Sentry riferenu à i numeri di linea in u batch minified; micca assai utile.

U serviziu Sentry spiega questu tirando i mape di fonte per u pacchettu ridottu dopu avè ricevutu un errore. In questu casu simu in esecuzione da localhost (micca accessibile da u serviziu Sentry).

Soluzioni (Source Maps)

A suluzione à stu prublema hè di eseguisce l'applicazione da un servitore web publicu. Un buttone di risposta simplice per utilizà u serviziu di Pagine GitHub (gratuitu). I passi da aduprà sò generalmente i seguenti:

Copia u cuntenutu di u cartulare custruisce à u cartulare docs Francisca in u cartulare radicali di u repository.
Accende Pagine GitHub in u repository (da GitHub) per aduprà u cartulare docs in Maestru rami
Push cambiamenti à GitHub

Vita: dopu avè capitu ciò chì aghju bisognu di utilizà create-create-app funzione home page per lancià l'applicazione. Hè ghjuntu à aghjunghje i seguenti à package.json:

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

A versione finale di l'applicazione in esecuzione hè dispunibule à:

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

Illustrazione di Caught Bugs

Andemu attraversu clicchendu u buttone Hello.

Cù un errore chì appare cusì:

Osservazioni:

Stu rapportu di bug ùn pudia esse più chjaru, BRAVO.

L'illustrazione di l'errori incunificati

Cume, andemu à traversu u buttone cliccate Error.

Cù un errore chì appare cusì:

Gestione megliu di l'errori micca contabilizzati (renduzione)

Introduzione di Limiti di Errore

Un errore JavaScript in parte di l'interfaccia d'utilizatore ùn deve micca rompe tutta l'applicazione. Per risolve stu prublema per l'utilizatori di React, React 16 introduce un novu cuncettu chjamatu "limiti d'errore".

I limiti di l'errore sò cumpunenti di React chì catturanu errori JavaScript in ogni locu in u so arbulu di cumpunenti di u zitellu, registranu quelli errori, è rendenu una UI di fallback invece di l'arburu di cumpunenti chì hè cascatu. I cunfini di l'errore catturanu l'errori durante u rendering, in i metudi di u ciclu di vita, è in i custruttori di l'arburu sanu sottu à elli.

...

Cumportamentu novu per errori micca rilevati

Stu cambiamentu hè significativu. A partire da React 16, l'errori chì ùn sò micca stati catturati da alcuna frontiera di l'errore resultarà in tuttu l'arburu di cumpunenti React esse smontatu.

- Dan Abramov - Trattamentu di errore in React 16

Una chiarificazione impurtante chì m'hà pigliatu un pocu di tempu prima ch'e aghju realizatu questu hè questu u cumpurtamentu sopra solu funziona cù l'errori lanciati in u metudu di rende (o più prubabile in qualsiasi di i metudi di u ciclu di vita). Per esempiu, l'usu di cunfini d'errore ùn faria micca bè cù u nostru buttone Error; stu errore era in u gestore di clic.

Creemu un esempiu di errore di rendering è dopu aduprate i limiti di errore per trattà l'errore più grazia.

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

Osservazione:

Quandu appughjà u buttone, React serà affissatu bandiera.busted.falsa, chì genera un errore
Senza un cunfini d'errore, l'arburu di cumpunenti tutale serà smuntatu

Allora scrivemu u nostru codice di limitu di errore (utilice u novu metudu di ciclu di vita cumpunenteDidCatch); questu hè essenzialmente l'esempiu datu in l'articulu di 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;
  }
}

Infine usemu stu cumpunente:

react-app/src/App.js

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

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

Tuttavia, clicchendu u buttone Render Error mostra a UI di fallback è informa un errore à Sentry.

Finalizazione

Spergu chì avete trovu questu utile.

PS Link à l'uriginale

PS Telegram chat via Sentry https://t.me/sentry_ru

Source: www.habr.com

Monitoraggio remoto di Sentry di bug in l'applicazioni frontend React

Add a comment annuler risponde