🥇Sentry távoli hibakövetés a React frontend alkalmazásokban

Tanulmányozzuk a Sentry használatát React-tel.

Ez a cikk egy sorozat része, amely a Sentry hibabejelentésével kezdődik: 1. rész.

React megvalósítása

Először is, hozzá kell adnunk egy új Sentry projektet ehhez az alkalmazáshoz a Sentry weboldaláról. Ebben az esetben a React-ot választjuk.

Újra megvalósítjuk a Hello és Error gombjainkat a React alkalmazásban. Az alap alkalmazás 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áljuk:

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://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

Megjegyzések:

Fejlesztés közben más mechanizmusaink vannak a problémák megfigyelésére, például a konzol, ezért a Sentry-t csak a gyártási build-eknél aktiváljuk.

Ezután megvalósítjuk Hello és Error gombjainkat, é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}"
        >
          Helló
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Helló Világ',
    });
    try {
      throw new Error('Elkapva');
    } 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}"
        >
          Hiba
        </button>
      </div>
    )
  }

  handleClick = () =&gt; {
    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áskód Térképek)

A Sentry-t tesztelhetjük a gyártási build-el, ha beírjuk:

yarn build

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

npx http-server -c-1

A problémával azonnal szembesülünk, hogy a Sentry hibajelentései a csökkentett csomagban található sor számokra utalnak; nem túl hasznos.

A Sentry szolgáltatás ezt úgy magyarázza, hogy a hiba beérkezése után kihúzza a forráskód térképeket a csökkentett csomagból. Ebben az esetben localhost-ról futunk (a Sentry által nem elérhető).

Megoldások (Forráskód Térképek)

A probléma megoldása abban áll, hogy az alkalmazást egy nyilvános webszerverről indítjuk el. Egy egyszerű válasz lehet a GitHub Pages használata (ingyen). A használat lépései általában a következők:

Másolja a tartalmat a mappából build tartalmát a mappába docs a repozitórium gyökerében.
Aktiválja a GitHub Pages-t a repozitóriumban (a GitHub-on), hogy a docs mappát használja a master ágon
Tolja fel a változtatásokat a GitHub-ra

Megjegyzés: miután rájöttem, hogy használnom kell a create-create-app a főoldali funkcióját az alkalmazás futtatásához. Ez a package.json-hoz a következő hozzáadását igényelte:

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

Az elindított alkalmazás végső verziója elérhető a következő címen:

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

A Hibák Elfogásának Illusztrációja

Nézzük meg, mi történik, amikor rákattintunk a Hello gombra.

Hiba, amely a következő módon jelenik meg:

Megjegyzések:

Ez a hiba jelentés nem lehetne világosabb. BRAVO.

A Figyelembe Nem Vett Hibák Illusztrációja

Hasonlóan, nézzük meg, mi történik, amikor rákattintunk a gombra. Hiba.

Hiba, amely a következő módon jelenik meg:

A legjobb hiba kezelés (renderelés)

Hiba határok bevezetése
A JavaScript hiba a felhasználói felület egy részén nem zavarhatja meg az egész alkalmazás működését. A React 16 célja, hogy a felhasználók számára új fogalmat vezessen be, az "hiba határokat".
Az hiba határok a React komponensek, amelyek elkaphatják a JavaScript hibákat a gyermek komponenseik bármely pontján, naplózzák ezeket a hibákat, és a széttört komponensfa helyett egy tartalék felhasználói felületet jelenítenek meg. Az hiba határok elkaphatják a hibákat a renderelés közben, az életciklus metódusokban és az alattuk lévő fa konstruktoraiban.
…
Új viselkedés a nem észlelt hibákra
Ez a változás kulcsfontosságú. A React 16-tól kezdve azok a hibák, amelyeket egy hiba határ sem tudott elkapni, az egész React komponensfa leállításához vezetnek.
— Dan Abramov — Hiba kezelés a React 16-ban

Fontos tisztázás, amely egy ideig tartott, amíg megértettem, hogy a fent említett viselkedés csak a renderelési metódusban (vagy, ami valószínűbb, bármelyik életciklus metódusban) előforduló hibákra vonatkozik.Például, az hiba határok használata nem segítene a gombunkkal Hiba; ez a hiba a kattintási kezelőnkben volt.

Készítsünk egy példa renderelési hibát, majd használjuk az hiba határokat a hiba elegánsabb kezelésére.

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 Hiba
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      flag: true,
    });
  }
}

Megjegyzés:

A gomb megnyomásakor, React ugyanaz a védett kapcsolat jelzője fog megjelenni, mint a domain hozzáférésért ellenőrzött tanúsítványok esetén. flag.busted.bogus, amely egy hibát generál
Hiba határ nélkül az egész komponensfa le lesz állítva.

Ezután megírjuk az hiba határ kódunkat (használja az új életciklus metódust componentDidCatch); ez lényegében Dan Abramov cikkében található példa:

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>Valami rosszul alakult.</h1>;
    }
    return this.props.children;
  }
}

Végül ezt a komponenst használjuk:

react-app / src / App.js

...<br />import MyRenderError from './MyRenderError';<br /><br />class App extends Component {<br />  render() {<br />    return (
      <errorboundary>
        <div classname="App">
          ...
        </div>
      </errorboundary>
    );
  }
}
...

Ezzel a Render Error gomb megnyomása egy tartalék felhasználói felületet jelenít meg és jelentést küld a Sentry-nek.