🥇Oddaljeno spremljanje hroščev v sprednjih aplikacijah React

Raziskujemo uporabo Sentryja z Reactom.

Ta članek je del serije, ki se začne s poročanjem o napakah Sentry na primeru: Часть 1.

Izvedba Reacta

Najprej moramo dodati nov projekt Sentry za to aplikacijo; s spletne strani Sentry. V tem primeru izberemo React.

Ponovno bomo implementirali naša dva gumba, Hello in Error, v aplikaciji z Reactom. Začnemo z ustvarjanjem naše začetne aplikacije:

npx create-react-app react-app

Nato uvozimo paket Sentry:

yarn add @sentry/browser

in ga inicializiraj:

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

Opažanja:

Med razvojem imamo druge mehanizme za spremljanje težav, kot je konzola, zato omogočimo samo Sentry za proizvodne gradnje

Nato implementiramo naša gumba Pozdravljeni in Napaka ter ju dodamo v aplikacijo:

reakcija-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');
  }
}

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

Težava (izvorni zemljevidi)

Sentry lahko preizkusimo s produkcijsko zgradbo tako, da vnesemo:

yarn build

in iz mape za gradnjo vnesite:

npx http-server -c-1

Težava, na katero takoj naletimo, je, da se Sentryjevi zapisi napak nanašajo na številke vrstic v pomanjšanem paketu; ni zelo uporaben.

Storitev Sentry to pojasnjuje s potegom izvornih zemljevidov za zmanjšan paket po prejemu napake. V tem primeru izvajamo z lokalnega gostitelja (storitev Sentry ni dostopna).

Rešitve (izvorni zemljevidi)

Rešitev te težave je zagon aplikacije z javnega spletnega strežnika. En preprost gumb za odgovor za uporabo storitve GitHub Pages (brezplačno). Koraki za uporabo so običajno naslednji:

Kopirajte vsebino mape izgradnjo v mapo docs v korenskem imeniku repozitorija.
Vklopiti Strani GitHub v repozitoriju (iz GitHuba), da uporabite mapo z dokumenti mojster veje
Potisnite spremembe v GitHub

Obvestilo: potem ko sem ugotovil, kaj moram uporabiti ustvari-ustvari-aplikacijo funkcijo domače strani za zagon aplikacije. Prišlo je do dodajanja naslednjega v package.json:

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

Končna različica delujoče aplikacije je na voljo na:

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

Ilustracija ujetih hroščev

Oglejmo si klikanje gumba Pozdravljeni.

Z napako, ki se pojavi takole:

Opažanja:

To poročilo o napaki ne bi moglo biti bolj jasno, Dobro opravljeno.

Ilustracija neupoštevanih napak

Podobno pojdimo skozi klik gumba napaka.

Z napako, ki se pojavi takole:

Boljša obravnava neupoštevanih napak (upodabljanje)

Uvedba mejnih vrednosti napak

Napaka JavaScript v delu uporabniškega vmesnika ne bi smela pokvariti celotne aplikacije. Za rešitev te težave za uporabnike Reacta React 16 uvaja nov koncept, imenovan "meje napak".

Meje napak so komponente React, ki ujamejo napake JavaScript kjer koli v svojem drevesu podrejenih komponent, zabeležijo te napake in upodabljajo nadomestni uporabniški vmesnik namesto drevesa komponent, ki se je zrušilo. Meje napak lovijo napake med upodabljanjem, v metodah življenjskega cikla in v konstruktorjih celotnega drevesa pod njimi.

...

Novo vedenje za neodkrite napake

Ta sprememba je pomembna. Od Reacta 16 bodo napake, ki jih ni zajela nobena meja napake, povzročile odklop celotnega drevesa komponente React.

- Dan Abramov - Obravnava napak v React 16

Pomembno pojasnilo, ki mi je vzelo nekaj časa, preden sem ugotovil, da je to to zgornje vedenje deluje samo z napakami, vrženimi v metodi upodabljanja (ali bolj verjetno v kateri koli metodi življenjskega cikla). Na primer, uporaba mej napak ne bi prinesla nič dobrega z našim gumbom napaka; ta napaka je bila v upravljalniku klikov.

Ustvarimo primer napake upodabljanja in nato uporabimo meje napake, da bomo napako obravnavali elegantneje.

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

Opazovanje:

Ko pritisnete gumb, Reagirajo bo prikazano flag.busted.gus, ki ustvari napako
Brez meje napake bo celotno drevo komponent odklopljeno

Nato napišemo našo kodo meje napake (uporablja novo metodo življenjskega cikla componentDidCatch); to je v bistvu primer, naveden v članku Dana Abramova:

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

Končno uporabimo to komponento:

reakcija-app/src/App.js

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

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

Vendar pa se s klikom na gumb Render Error prikaže nadomestni uporabniški vmesnik in Sentryju sporoči napako.

Zaključek

Upam, da vam je bilo to v pomoč.

PS Povezava do izvirnika

PS Klepet v Telegramu prek Sentryja https://t.me/sentry_ru

Vir: www.habr.com

Stražarsko oddaljeno spremljanje hroščev v sprednjih aplikacijah React

Dodaj komentar Prekliči odgovor