ProHoster > Blog > uprava > Sentry daljinski nadzor grešaka u React frontend aplikacijama

Sentry daljinski nadzor grešaka u React frontend aplikacijama

Istražujemo korištenje Sentryja s Reactom.

Sentry daljinski nadzor grešaka u React frontend aplikacijama

Ovaj je članak dio niza koji počinje prijavljivanjem Sentry pogrešaka pomoću primjera: Часть 1.

Implementacija Reacta

Prvo moramo dodati novi projekt Sentry za ovu aplikaciju; s web stranice Sentry. U ovom slučaju biramo React.

Ponovno ćemo implementirati naša dva gumba, Hello i Error, u aplikaciji s Reactom. Počinjemo s izradom naše početne aplikacije:

npx create-react-app react-app

Zatim uvozimo paket Sentry:

yarn add @sentry/browser

i inicijalizirati ga:

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

Promatranja:

  • Tijekom razvoja imamo druge mehanizme za praćenje problema, kao što je konzola, tako da Sentry omogućujemo samo za proizvodne verzije

Zatim implementiramo naše gumbe Hello i Error i dodajemo ih aplikaciji:

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

reagirati-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 (Izvorne karte)

Možemo testirati Sentry s proizvodnom verzijom unosom:

yarn build

i iz mape za izgradnju unesite:

npx http-server -c-1

Problem na koji odmah nailazimo je da se Sentryevi zapisi o pogreškama odnose na brojeve redaka u smanjenoj seriji; nije baš korisno.

Sentry daljinski nadzor grešaka u React frontend aplikacijama

Usluga Sentry to objašnjava povlačenjem mapa izvora za smanjeni paket nakon primanja pogreške. U ovom slučaju pokrećemo s lokalnog hosta (nije dostupno servisu Sentry).

Rješenja (izvorne karte)

Решение этой проблемы сводится к запуску приложения с общедоступного веб-сервера. Одна простая кнопка ответа на него, чтобы использовать сервис GitHub Pages (бесплатно). Шаги для использования обычно следующие:

  1. Kopirajte sadržaj mape graditi u mapu docs u korijenskom direktoriju spremišta.

  2. Upaliti GitHub stranice u repozitoriju (s GitHuba) za korištenje mape dokumenata u njoj majstor grane

  3. Gurnite promjene na GitHub

Primijetiti: nakon što sam shvatio što trebam koristiti stvoriti-stvoriti-aplikaciju funkciju početne stranice za pokretanje aplikacije. Svelo se na dodavanje sljedećeg u package.json:

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

Окончательная версия запущенного приложения доступна по адресу:

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

Ilustracija uhvaćenih buba

Prođimo kroz klikanje gumba Pozdrav.

Sentry daljinski nadzor grešaka u React frontend aplikacijama

S pogreškom koja se pojavljuje ovako:

Sentry daljinski nadzor grešaka u React frontend aplikacijama

Promatranja:

  • Ovo izvješće o pogrešci ne može biti jasnije, BRAVO.

Ilustracija neobjašnjenih pogrešaka

Isto tako, prođimo kroz klik gumba greška.

Sentry daljinski nadzor grešaka u React frontend aplikacijama

S pogreškom koja se pojavljuje ovako:

Sentry daljinski nadzor grešaka u React frontend aplikacijama

Bolje rukovanje neobračunatim pogreškama (renderiranje)

Uvođenje ograničenja pogreške

JavaScript pogreška u dijelu korisničkog sučelja ne bi trebala pokvariti cijelu aplikaciju. Kako bi riješio ovaj problem za korisnike Reacta, React 16 uvodi novi koncept pod nazivom "granice pogreške".

Granice pogrešaka su komponente Reacta koje hvataju JavaScript pogreške bilo gdje u svom stablu podređenih komponenti, bilježe te pogreške i renderiraju rezervno korisničko sučelje umjesto stabla komponenti koje se srušilo. Granice pogrešaka hvataju pogreške tijekom iscrtavanja, u metodama životnog ciklusa i u konstruktorima cijelog stabla ispod njih.

...

Novo ponašanje za neotkrivene pogreške

Ova promjena je značajna. Od Reacta 16, pogreške koje nisu uhvaćene nijednom granicom pogreške rezultirat će demontažom cijelog stabla komponente React.

- Dan Abramov - Rukovanje pogreškama u Reactu 16

Važno pojašnjenje za koje mi je trebalo neko vrijeme prije nego sam shvatio da je to to gornje ponašanje funkcionira samo s pogreškama koje se javljaju u metodi renderiranja (ili vjerojatnije u bilo kojoj od metoda životnog ciklusa). Na primjer, korištenje granica pogreške ne bi bilo dobro s našim gumbom greška; ova je pogreška bila u obrađivaču klikova.

Kreirajmo primjer pogreške pri prikazivanju, a zatim upotrijebimo granice pogreške kako bismo gracioznije riješili pogrešku.

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

Promatranje:

  • Kada pritisnete gumb, Reagovati će se prikazati zastava.razbijen.lažan, što stvara pogrešku

  • Bez granice pogreške, cijelo stablo komponente bit će demontirano

Zatim pišemo naš kod granice pogreške (koristi novu metodu životnog ciklusa komponentaDidCatch); ovo je u biti primjer dat u č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;
  }
}

Na kraju koristimo ovu komponentu:

reagirati-app/src/App.js

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

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

Međutim, klikom na gumb Render Error prikazuje se rezervno korisničko sučelje i prijavljuje pogrešku Sentryju.

Sentry daljinski nadzor grešaka u React frontend aplikacijama

Sentry daljinski nadzor grešaka u React frontend aplikacijama

Završetak

Nadam se da vam je ovo pomoglo.

PS Link na original

PS Telegram chat preko Sentryja https://t.me/sentry_ru

Izvor: www.habr.com

Dodajte komentar