🥇Sentry monitoring op afstand van bugs in React frontend-applicaties

We onderzoeken het gebruik van Sentry met React.

Dit artikel maakt deel uit van een serie die begint met het rapporteren van Sentry-fouten aan de hand van een voorbeeld: Часть 1.

Implementatie van React

Eerst moeten we een nieuw Sentry-project voor deze toepassing toevoegen; van de Sentry-website. In dit geval kiezen we voor Reageren.

We zullen onze twee knoppen, Hallo en Fout, opnieuw implementeren in een applicatie met React. We beginnen met het maken van onze starterapplicatie:

npx create-react-app react-app

Vervolgens importeren we het Sentry-pakket:

yarn add @sentry/browser

en initialiseer het:

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

Waarnemingen:

Tijdens de ontwikkeling hebben we andere mechanismen voor het monitoren van problemen, zoals de console, dus we schakelen Sentry alleen in voor productiebuilds

Vervolgens implementeren we onze Hallo- en Foutknoppen en voegen ze toe aan de applicatie:

react-app/src/Hallo.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');
  }
}

reageer-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;

Probleem (bronkaarten)

We kunnen Sentry testen met een productiebuild door het volgende in te voeren:

yarn build

en voer vanuit de build-map het volgende in:

npx http-server -c-1

Het probleem waar we meteen tegenaan lopen is dat de foutrecords van Sentry verwijzen naar regelnummers in de verkleinde batch; niet erg nuttig.

De Sentry-service legt dit uit door de bronkaarten voor het beperkte pakket op te halen nadat er een fout is ontvangen. In dit geval draaien we vanaf localhost (niet toegankelijk voor de Sentry-service).

Oplossingen (bronkaarten)

De oplossing voor dit probleem is om de applicatie vanaf een openbare webserver uit te voeren. Eén eenvoudige antwoordknop om de GitHub Pages-service te gebruiken (gratis). De te gebruiken stappen zijn meestal als volgt:

Kopieer de inhoud van de map bouw naar map docs in de hoofdmap van de repository.
Schakel in GitHub-pagina's in de repository (van GitHub) om de map docs in te gebruiken meester takken
Push wijzigingen naar GitHub

Noot: nadat ik had uitgezocht wat ik moest gebruiken maak-maak-app startpaginafunctie om de applicatie te starten. Het kwam neer op het toevoegen van het volgende aan package.json:

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

De definitieve versie van de actieve applicatie is beschikbaar op:

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

Illustratie van gevangen insecten

Laten we eens kijken hoe u op de knop Hallo klikt.

Met een fout die als volgt verschijnt:

Waarnemingen:

Dit bugrapport kan niet duidelijker zijn, BRAVO.

Illustratie van niet-verantwoorde fouten

Laten we op dezelfde manier de knopklikken doorlopen Fout.

Met een fout die als volgt verschijnt:

Betere afhandeling van niet-verantwoorde fouten (rendering)

Introductie van foutlimieten

Een JavaScript-fout in een deel van de gebruikersinterface mag niet de hele applicatie kapot maken. Om dit probleem voor React-gebruikers op te lossen, introduceert React 16 een nieuw concept genaamd "error bounds".

Foutgrenzen zijn React-componenten die JavaScript-fouten overal in hun onderliggende componentenboom opvangen, die fouten registreren en een fallback-UI weergeven in plaats van de componentenboom die is gecrasht. Foutgrenzen vangen fouten op tijdens het renderen, in levenscyclusmethoden en in de constructors van de hele boom eronder.

...

Nieuw gedrag voor niet-gedetecteerde fouten

Deze verandering is aanzienlijk. Vanaf React 16 zullen fouten die niet door een foutgrens worden opgevangen, ertoe leiden dat de volledige React-componentenboom wordt ontkoppeld.

- Dan Abramov - Foutafhandeling in React 16

Een belangrijke verduidelijking waardoor het een tijdje duurde voordat ik dit besefte, is dat het bovenstaande gedrag werkt alleen als er fouten optreden in de rendermethode (of waarschijnlijker in een van de levenscyclusmethoden). Het gebruik van foutgrenzen zou bijvoorbeeld geen enkel nut hebben voor onze knop Fout; deze fout zat in de klikhandler.

Laten we een voorbeeld van een weergavefout maken en vervolgens foutgrenzen gebruiken om de fout op een elegantere manier af te handelen.

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

Observatie:

Wanneer u op de knop drukt, Reageren zullen worden tentoongesteld flag.busted.bogus, wat een fout genereert
Zonder een foutgrens wordt de gehele componentenboom ontkoppeld

Vervolgens schrijven we onze foutgrenscode (gebruikt de nieuwe levenscyclusmethode onderdeelDidCatch); dit is in wezen het voorbeeld dat wordt gegeven in het artikel van 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;
  }
}

Tenslotte gebruiken we dit onderdeel:

reageer-app/src/App.js

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

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

Als u echter op de knop Render Error klikt, wordt de fallback-gebruikersinterface weergegeven en wordt een fout aan Sentry gerapporteerd.

Voltooiing

Ik hoop dat je dit nuttig vond.

PS Link naar origineel

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

Bron: www.habr.com

Sentry monitoring op afstand van bugs in React frontend-applicaties

Voeg een reactie Reactie annuleren