🥇Sentry monitoraggio remoto dei bug nelle applicazioni frontend React

Stiamo esplorando l'utilizzo di Sentry con React.

Questo articolo fa parte di una serie che inizia con la segnalazione degli errori Sentry utilizzando un esempio: Parte 1.

Implementazione di React

Per prima cosa dobbiamo aggiungere un nuovo progetto Sentry per questa applicazione; dal sito web di Sentry. In questo caso scegliamo React.

Reimplementeremo i nostri due pulsanti, Hello ed Error, in un'applicazione con React. Iniziamo creando la nostra applicazione iniziale:

npx create-react-app react-app

Quindi importiamo il pacchetto Sentry:

yarn add @sentry/browser

e inizializzarlo:

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 lo sviluppo, disponiamo di altri meccanismi per monitorare i problemi, come la console, quindi abilitiamo Sentry solo per le build di produzione

Successivamente implementiamo i nostri pulsanti Hello ed Error e li aggiungiamo all'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;

Problema (mappe di origine)

Possiamo testare Sentry con una build di produzione inserendo:

yarn build

e dalla cartella build inserisci:

npx http-server -c-1

Il problema che incontriamo immediatamente è che i record di errore di Sentry si riferiscono a numeri di riga nel batch minimizzato; non molto utile.

Il servizio Sentry spiega questo estraendo le mappe di origine per il pacchetto ridotto dopo aver ricevuto un errore. In questo caso stiamo eseguendo da localhost (non accessibile dal servizio Sentry).

Soluzioni (mappe di origine)

La soluzione a questo problema è eseguire l'applicazione da un server Web pubblico. Un semplice pulsante di risposta per utilizzare il servizio GitHub Pages (gratuito). I passaggi da utilizzare sono solitamente i seguenti:

Copia il contenuto della cartella costruire nella cartella docs nella directory principale del repository.
Accendi Pagine GitHub nel repository (da GitHub) per utilizzare la cartella docs in Mastercard rami
Invia le modifiche a GitHub

Nota: dopo aver capito cosa devo usare crea-crea-app funzione home page per avviare l'applicazione. È arrivato il momento di aggiungere quanto segue a package.json:

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

La versione finale dell'applicazione in esecuzione è disponibile all'indirizzo:

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

Illustrazione degli insetti catturati

Esaminiamo facendo clic sul pulsante Ciao.

Con un errore simile al seguente:

osservazioni:

Questa segnalazione di bug non potrebbe essere più chiara, BRAVO.

Illustrazione degli errori non contabilizzati

Allo stesso modo, esaminiamo il clic del pulsante Errore.

Con un errore simile al seguente:

Migliore gestione degli errori non contabilizzati (rendering)

Introduzione dei limiti di errore

Un errore JavaScript in una parte dell'interfaccia utente non dovrebbe interrompere l'intera applicazione. Per risolvere questo problema per gli utenti React, React 16 introduce un nuovo concetto chiamato "limiti di errore".

I limiti degli errori sono componenti React che rilevano errori JavaScript ovunque nell'albero dei componenti figlio, registrano tali errori ed eseguono il rendering di un'interfaccia utente di fallback invece dell'albero dei componenti che si è bloccato. I confini degli errori rilevano gli errori durante il rendering, nei metodi del ciclo di vita e nei costruttori dell'intero albero sottostante.

...

Nuovo comportamento per gli errori non rilevati

Questo cambiamento è significativo. A partire da React 16, gli errori che non sono stati rilevati da alcun limite di errore comporteranno lo smontaggio dell'intero albero dei componenti di React.

- Dan Abramov - Gestione degli errori in React 16

Un chiarimento importante che mi ha richiesto un po' di tempo prima che realizzassi che è quello il comportamento di cui sopra funziona solo con gli errori generati nel metodo render (o più probabilmente in uno qualsiasi dei metodi del ciclo di vita). Ad esempio, l'utilizzo dei limiti di errore non servirebbe a nulla con il nostro pulsante Errore; questo errore era nel gestore dei clic.

Creiamo un errore di rendering di esempio e quindi utilizziamo i limiti di errore per gestire l'errore con maggiore garbo.

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:

Quando premi il pulsante, Reagire sarà mostrato flag.sballato.fasullo, che genera un errore
Senza un limite di errore, l'intero albero dei componenti verrà smontato

Quindi scriviamo il nostro codice limite di errore (utilizza il nuovo metodo del ciclo di vita componenteDidCatch); questo è essenzialmente l'esempio fornito nell'articolo 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 utilizziamo questo componente:

react-app/src/App.js

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

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

Tuttavia, facendo clic sul pulsante Errore di rendering viene visualizzata l'interfaccia utente di fallback e viene segnalato un errore a Sentry.

Completamento

Spero che tu l'abbia trovato utile.

PS Link all'originale

Chatta PS Telegram tramite Sentry https://t.me/sentry_ru

Fonte: habr.com

Monitoraggio remoto Sentry dei bug nelle applicazioni frontend React

Aggiungi un commento Cancella risposta