🥇Sentry Fern Iwwerwaachung vu Bugs a React Frontend Uwendungen

Mir exploréieren Sentry mat React ze benotzen.

Dësen Artikel ass en Deel vun enger Serie, déi ufänkt mat Berichterstattung vu Sentry Feeler mat engem Beispill: Deel vun 1.

Ëmsetzung vum React

Als éischt musse mir en neie Sentry-Projet fir dës Applikatioun addéieren; vun der Sentry Websäit. An dësem Fall wielen mir React.

Mir wäerten eis zwee Knäppercher nei ëmsetzen, Hallo a Feeler, an enger Applikatioun mat React. Mir fänken un mat eiser Startapplikatioun ze kreéieren:

npx create-react-app react-app

Da importéiere mir de Sentry Package:

yarn add @sentry/browser

an initialiséieren et:

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

Observatioune:

Wärend der Entwécklung hu mir aner Mechanismen fir Probleemer ze iwwerwaachen, sou wéi d'Konsole, sou datt mir nëmmen Sentry fir Produktiounsbaut aktivéieren

Als nächst implementéiere mir eis Hallo a Feeler Knäppercher a fügen se un d'Applikatioun:

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;

Problem (Source Maps)

Mir kënnen Sentry mat engem Produktiounsbau testen andeems Dir gitt:

yarn build

an aus dem Build Dossier gitt:

npx http-server -c-1

De Problem dee mir direkt lafen ass datt dem Sentry seng Fehlerrecords op Linnnummeren an der minifizéierter Batch bezéien; net ganz nëtzlech.

De Sentry Service erkläert dëst andeems Dir d'Quellkaarte fir de reduzéierte Paket zitt nodeems en e Feeler kritt huet. An dësem Fall lafe mir vum localhost (net zougänglech vum Sentry Service).

Léisungen (Source Maps)

D'Léisung fir dëse Problem ass d'Applikatioun vun engem ëffentleche Webserver auszeféieren. Een einfachen Äntwert Knäppchen fir de GitHub Pages Service ze benotzen (gratis). D'Schrëtt fir ze benotzen sinn normalerweis wéi follegt:

Kopéiert den Inhalt vum Dossier bauen an den Dossier dobei am Root Verzeechnes vum Repository.
Uschalten GitHub Säiten am Repository (vum GitHub) fir den Dossier Dossier ze benotzen Meeschtesch Agence
Push Ännerungen op GitHub

Remarque: nodeems ech erausfonnt wat ech muss benotzen schafen-schafen-App Homepage Funktioun fir d'Applikatioun ze starten. Kommt erof fir déi folgend op package.json derbäi ze ginn:

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

Déi lescht Versioun vun der lafender Applikatioun ass verfügbar op:

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

Illustratioun vun Caught Bugs

Loosst eis duerch klickt op den Hallo Knäppchen.

Mat engem Feeler erschéngt esou:

Observatioune:

Dëse Feelerbericht konnt net méi kloer sinn, BRAVO.

Illustratioun vun Unaccounted fir Feeler

Och loosst eis duerch de Knäppche goen Feeler.

Mat engem Feeler erschéngt esou:

Besser Handhabung vun onbekannte Feeler (Rendering)

Aféierung vun Feeler Limite

E JavaScript-Feeler an engem Deel vun der User-Interface soll net déi ganz Applikatioun briechen. Fir dëse Problem fir React Benotzer ze léisen, stellt React 16 en neit Konzept mam Numm "Fehlergrenzen" vir.

Feeler Grenze si React Komponenten déi JavaScript Feeler iwwerall an hirem Kand Komponent Bam fangen, dës Feeler protokolléieren an e Fallback UI maachen amplaz vum Komponent Bam deen erofgefall ass. Feeler Grenzen fangen Feeler beim Rendering, a Liewenszyklusmethoden, an an de Konstruktoren vum ganze Bam ënner hinnen.

...

Neit Verhalen fir ondetektéiert Feeler

Dës Ännerung ass bedeitend. Zënter React 16, Feeler, déi net vun enger Feelergrenz gefaange goufen, féieren dozou datt de ganze React Komponentbam demontéiert gëtt.

- Dan Abramov - Feeler Handlung am React 16

Eng wichteg Erklärung déi mech eng Zäit gedauert huet ier ech dat gemierkt hunn ass dat dat uewe Verhalen funktionnéiert nëmme mat Feeler, déi an der Rendermethod geworf ginn (oder méi wahrscheinlech an enger vun de Liewenszyklusmethoden). Zum Beispill, d'Benotzung vu Fehlergrenzen géif net gutt mat eisem Knäppchen maachen Feeler; dëse Feeler war am Klickhandler.

Loosst eis e Beispill Rendering Feeler erstellen an dann Fehlergrenzen benotzen fir de Feeler méi graziéis ze handhaben.

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

Observatioun:

Wann Dir op de Knäppchen dréckt, reagéieren wäert ugewisen ginn flag.busted.falsch, wat e Feeler generéiert
Ouni Feeler Grenz gëtt de ganze Komponent Bam unmounted

Da schreiwen mir eise Feeler Grenzcode (benotzt déi nei Liewenszyklusmethod componentDidCatch); dëst ass am Fong d'Beispill am Dan Abramov sengem Artikel:

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

Schlussendlech benotze mir dës Komponent:

react-app/src/App.js

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

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

Wéi och ëmmer, klickt op de Render Error Knäppchen weist de Fallback UI a mellt e Feeler un Sentry.

Komplett

Ech hoffen Dir hutt dëst hëllefräich fonnt.

PS Link op d'Original

PS Telegram Chat iwwer Sentry https://t.me/sentry_ru

Source: will.com

Sentry Fern Iwwerwaachung vu Bugs a React Frontend Uwendungen

Setzt e Commentaire annuléieren reply