🥇Sentry remote monitering van foute in React frontend toepassings

Ons verken die gebruik van Sentry met React.

Hierdie artikel is deel van 'n reeks wat begin met die rapportering van Sentry-foute deur 'n voorbeeld te gebruik: 1 deel.

Implementering van React

Eerstens moet ons 'n nuwe Sentry-projek vir hierdie toepassing byvoeg; vanaf die Sentry-webwerf. In hierdie geval kies ons Reageer.

Ons sal ons twee knoppies, Hello en Error, weer in 'n toepassing met React implementeer. Ons begin deur ons beginnerstoepassing te skep:

npx create-react-app react-app

Dan voer ons die Sentry-pakket in:

yarn add @sentry/browser

en inisialiseer dit:

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

Waarnemings:

Tydens ontwikkeling het ons ander meganismes om kwessies te monitor, soos die konsole, dus aktiveer ons slegs Sentry vir produksiebou.

Volgende implementeer ons ons Hello en Error-knoppies en voeg dit by die toepassing:

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

reageer-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 (Bronkaarte)

Ons kan Sentry toets met 'n produksiebou deur die volgende in te voer:

yarn build

en van die bou-lêergids voer in:

npx http-server -c-1

Die probleem wat ons dadelik raakloop, is dat Sentry se foutrekords na lynnommers in die verkleinde bondel verwys; nie baie nuttig nie.

Die Sentry-diens verduidelik dit deur die bronkaarte vir die verminderde pakkie te trek nadat 'n fout ontvang is. In hierdie geval loop ons vanaf localhost (nie toeganklik vir die Sentry-diens nie).

Oplossings (Bronkaarte)

Die oplossing vir hierdie probleem is om die toepassing vanaf 'n publieke webbediener te laat loop. Een eenvoudige antwoordknoppie om die GitHub Pages-diens (gratis) te gebruik. Die stappe om te gebruik is gewoonlik soos volg:

Kopieer die inhoud van die gids bou na die gids Dokumente in die wortelgids van die bewaarplek.
Sit aan GitHub-bladsye in die bewaarplek (vanaf GitHub) om die docs-lêergids in te gebruik meester takke
Druk veranderinge na GitHub

Let daarop: nadat ek uitgevind het wat ek moet gebruik skep-skep-app tuisbladfunksie om die toepassing te begin. Het afgekom om die volgende by package.json by te voeg:

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

Die finale weergawe van die lopende toepassing is beskikbaar by:

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

Illustrasie van Gevang Goggas

Kom ons stap deur op die Hallo-knoppie te klik.

Met 'n fout wat soos volg verskyn:

Waarnemings:

Hierdie foutverslag kon nie duideliker wees nie, BRAVO.

Illustrasie van Onverantwoorde foute

Net so, kom ons gaan deur die knoppie klik fout.

Met 'n fout wat soos volg verskyn:

Beter hantering van onverantwoorde foute (weergawe)

Bekendstelling van foutlimiete

'n JavaScript-fout in 'n deel van die gebruikerskoppelvlak behoort nie die hele toepassing te breek nie. Om hierdie probleem vir React-gebruikers op te los, stel React 16 'n nuwe konsep bekend genaamd "error bounds".

Foutgrense is React-komponente wat JavaScript-foute op enige plek in hul kinderkomponentboom opvang, daardie foute aanteken en 'n terugval-UI lewer in plaas van die komponentboom wat neergestort het. Foutgrense vang foute op tydens lewering, in lewensiklusmetodes en in die konstrukteurs van die hele boom daaronder.

...

Nuwe gedrag vir onopgemerkte foute

Hierdie verandering is betekenisvol. Vanaf React 16 sal foute wat nie deur enige foutgrens opgevang is nie, daartoe lei dat die hele React-komponentboom gedemonteer word.

- Dan Abramov - Fouthantering in React 16

'n Belangrike verduideliking wat my 'n rukkie geneem het voordat ek dit besef het, is dit bogenoemde gedrag werk slegs met foute wat in die leweringmetode gegooi word (of meer waarskynlik in enige van die lewensiklusmetodes). Byvoorbeeld, die gebruik van foutgrense sal niks help met ons knoppie nie fout; hierdie fout was in die klikhanteerder.

Kom ons skep 'n voorbeeldweergawe fout en gebruik dan foutgrense om die fout meer grasieus te hanteer.

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

Waarneming:

Wanneer jy die knoppie druk, reageer sal vertoon word vlag.busted.bedrog, wat 'n fout genereer
Sonder 'n foutgrens sal die hele komponentboom gedemonteer word

Dan skryf ons ons foutgrenskode (gebruik die nuwe lewensiklusmetode komponentDidCatch); dit is in wese die voorbeeld wat in Dan Abramov se artikel gegee word:

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

Ten slotte gebruik ons hierdie komponent:

reageer-app/src/App.js

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

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

As u egter op die Gee fout-knoppie klik, word die terugval-UI vertoon en 'n fout aan Sentry gerapporteer.

Voltooiing

Ek hoop jy het dit nuttig gevind.

PS Skakel na oorspronklike

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

Bron: will.com

Sentry-afgeleë monitering van foute in React-voorkanttoepassings

Voeg 'n opmerking Kanselleer antwoord