🥇Sentry távoli felügyelet a React frontend alkalmazásokban

A Sentry és a React használatát vizsgáljuk.

Ez a cikk egy sorozat része, amely a Sentry hibák jelentésével kezdődik egy példa segítségével: Часть 1.

A React megvalósítása

Először hozzá kell adnunk egy új Sentry projektet ehhez az alkalmazáshoz; a Sentry webhelyről. Ebben az esetben a Reactet választjuk.

A két gombunkat, a Hello és Error gombot újra megvalósítjuk egy React alkalmazásban. Kezdő alkalmazásunk létrehozásával kezdjük:

npx create-react-app react-app

Ezután importáljuk a Sentry csomagot:

yarn add @sentry/browser

és inicializálja:

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

Észrevételek:

A fejlesztés során más mechanizmusokkal is rendelkezünk a problémák megfigyelésére, például a konzolra, így csak a Sentry-t engedélyezzük az éles verziókhoz.

Ezután implementáljuk a Hello és Error gombokat, és hozzáadjuk őket az alkalmazáshoz:

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;

Probléma (Forrástérkép)

A Sentry-t éles verzióval tesztelhetjük, ha beírjuk:

yarn build

és a build mappából írja be:

npx http-server -c-1

A probléma, amibe azonnal beleütközünk, hogy a Sentry hibarekordjai a minimált köteg sorszámaira vonatkoznak; nem túl hasznos.

A Sentry szolgáltatás ezt úgy magyarázza, hogy hiba érkezésekor lehívja a csökkentett csomag forrásleképezéseit. Ebben az esetben a localhostról futunk (a Sentry szolgáltatás nem éri el).

Megoldások (Forrástérképek)

A probléma megoldása az alkalmazás futtatása nyilvános webszerverről. Egy egyszerű válasz gomb a GitHub Pages szolgáltatás használatához (ingyenes). A használat lépései általában a következők:

Másolja ki a mappa tartalmát épít mappába docs az adattár gyökérkönyvtárában.
Bekapcsol GitHub oldalak a lerakatban (a GitHubból) a docs mappa használatához mester ágak
Nyomja meg a módosításokat a GitHubhoz

Megjegyzés: miután rájöttem, mit kell használnom létrehozás-alkalmazás létrehozása kezdőlap funkciót az alkalmazás elindításához. A következőt kellett hozzáadni a package.json fájlhoz:

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

A futó alkalmazás végleges verziója itt érhető el:

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

Elkapott hibák illusztrációja

Nézzük végig a Hello gombra kattintva.

Ilyen hibával:

Észrevételek:

Ez a hibajelentés nem is lehetne világosabb, BRAVO.

Az el nem számolt hibák illusztrációja

Ugyanígy menjünk végig a gombkattintáson hiba.

Ilyen hibával:

Az el nem számolt hibák jobb kezelése (megjelenítés)

A hibahatárok bevezetése

A felhasználói felület egy részének JavaScript-hibája nem tönkreteheti a teljes alkalmazást. A React-felhasználók problémájának megoldására a React 16 új koncepciót vezet be, az úgynevezett „hibahatárokat”.

A hibahatárok olyan React-összetevők, amelyek elkapják a JavaScript-hibákat bárhol az utódkomponens-fájukban, naplózzák ezeket a hibákat, és egy tartalék felhasználói felületet jelenítenek meg az összeomlott összetevőfa helyett. A hibahatárok elkapják a hibákat a renderelés során, az életciklus-metódusokban és az alattuk lévő teljes fa konstruktoraiban.

...

Új viselkedés az észleletlen hibákhoz

Ez a változás jelentős. A React 16-tól kezdve azok a hibák, amelyeket egyetlen hibahatár sem fogott el, a teljes React összetevőfa leválasztását eredményezi.

- Dan Abramov - Hibakezelés a React 16-ban

Egy fontos tisztázás, ami eltartott egy ideig, mire rájöttem erre a fenti viselkedés csak a renderelési metódusban (vagy nagyobb valószínűséggel bármelyik életciklus-módszerben) fellépő hibák esetén működik.. Például a hibahatárok használata nem tesz jót a gombunknak hiba; ez a hiba a kattintáskezelőben volt.

Hozzunk létre egy példa megjelenítési hibát, majd használjunk hibahatárokat a hiba kecsesebb kezeléséhez.

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

Megfigyelés:

Amikor megnyomja a gombot, Reagál jelenik meg zászló.letört.hamis, ami hibát generál
Hibahatár nélkül a teljes komponensfa leválasztásra kerül

Ezután megírjuk a hibahatár kódunkat (az új életciklus módszert használja komponensDidCatch); lényegében ez a példa Dan Abramov cikkében:

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

Végül ezt az összetevőt használjuk:

react-app/src/App.js

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

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

A Render Error gombra kattintva azonban megjelenik a tartalék felhasználói felület, és hibát jelent a Sentry felé.

Befejezés

Remélem, ezt hasznosnak találtad.

PS Link az eredetihez

PS Telegram chat a Sentry segítségével https://t.me/sentry_ru

Forrás: will.com

A React frontend alkalmazások hibáinak távoli megfigyelése

Hozzászólás Megszünteti a választ