🥇Monitoraġġ remot tas-Sentry tal-bugs fl-applikazzjonijiet frontend ta' React

Qed nesploraw l-użu ta' Sentry ma' React.

Dan l-artikolu huwa parti minn serje li tibda bir-rappurtar ta' żbalji ta' Sentry permezz ta' eżempju: Часть 1.

Implimentazzjoni ta' React

L-ewwel irridu nżidu proġett Sentry ġdid għal din l-applikazzjoni; mill-websajt Sentry. F'dan il-każ nagħżlu React.

Aħna ser nimplimentaw mill-ġdid iż-żewġ buttuni tagħna, Hello u Error, f'applikazzjoni ma 'React. Nibdew billi noħolqu l-applikazzjoni tal-bidu tagħna:

npx create-react-app react-app

Imbagħad nimportaw il-pakkett Sentry:

yarn add @sentry/browser

u inizjalizzah:

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

Osservazzjonijiet:

Waqt l-iżvilupp, għandna mekkaniżmi oħra għall-monitoraġġ tal-kwistjonijiet, bħall-console, għalhekk nippermettu lil Sentry biss għall-bini tal-produzzjoni

Sussegwentement nimplimentaw il-buttuni Hello u Error tagħna u żidhom mal-applikazzjoni:

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;

Problema (Mapep tas-Sors)

Nistgħu nittestjaw Sentry b'bini ta' produzzjoni billi ndaħħlu:

yarn build

u mill-folder tal-bini daħħal:

npx http-server -c-1

Il-problema li niltaqgħu magħha immedjatament hija li r-rekords ta 'żball ta' Sentry jirreferu għan-numri tal-linja fil-lott minifikat; mhux utli ħafna.

Is-servizz Sentry jispjega dan billi jiġbed il-mapep tas-sors għall-pakkett imnaqqas wara li jirċievi żball. F'dan il-każ qed inħaddmu minn localhost (mhux aċċessibbli mis-servizz Sentry).

Soluzzjonijiet (Mapep tas-Sors)

Is-soluzzjoni għal din il-problema hija li tħaddem l-applikazzjoni minn server tal-web pubbliku. Buttuna waħda ta’ tweġiba sempliċi biex tuża s-servizz tal-Paġni GitHub (b’xejn). Il-passi li għandek tuża huma ġeneralment kif ġej:

Ikkopja l-kontenut tal-folder jibnu għal folder docs fid-direttorju tal-għeruq tar-repożitorju.
Ixgħel Paġni GitHub fir-repożitorju (minn GitHub) biex tuża l-folder tad-dokumenti fih kaptan fergħat
Imbotta l-bidliet għal GitHub

Innota: wara I dehret dak li għandi bżonn nuża toħloq-oħloq-app funzjoni tal-paġna tad-dar biex tniedi l-applikazzjoni. Wasal biex żied dan li ġej ma' package.json:

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

Il-verżjoni finali tal-applikazzjoni li qed taħdem hija disponibbli fuq:

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

Illustrazzjoni ta' Caught Bugs

Ejja nimxu permezz tikklikkja l-buttuna Hello.

Bi żball jidher bħal dan:

Osservazzjonijiet:

Dan ir-rapport tal-bug ma setax ikun aktar ċar, BRAVO.

Illustrazzjoni ta' Żbalji Mhux Magħduda

Bl-istess mod, ejja ngħaddu mill-buttuna ikklikkja żball.

Bi żball jidher bħal dan:

Immaniġġjar aħjar ta' żbalji mhux kontabbli (għoti)

Introduzzjoni ta' Limiti ta' Żbalji

Żball JavaScript f'parti mill-interface tal-utent m'għandux jikser l-applikazzjoni kollha. Biex issolvi din il-problema għall-utenti ta 'React, React 16 jintroduċi kunċett ġdid imsejjaħ "limiti ta' żball".

Il-konfini tal-iżbalji huma komponenti React li jaqbdu l-iżbalji JavaScript kullimkien fis-siġra tal-komponenti tat-tfal tagħhom, jirreġistraw dawk l-iżbalji, u jirrendu UI fallback minflok is-siġra tal-komponenti li ġġarraf. Il-konfini tal-iżbalji jaqbdu l-iżbalji waqt ir-rendi, fil-metodi taċ-ċiklu tal-ħajja, u fil-kostrutturi tas-siġra kollha taħthom.

...

Imġieba ġdida għal żbalji mhux misjuba

Din il-bidla hija sinifikanti. Minn React 16, żbalji li ma nqabdux minn xi konfini ta 'żball se jirriżultaw fis-siġra kollha tal-komponenti ta' React tiġi żmuntata.

- Dan Abramov - Immaniġġjar ta' Żbalji f'React 16

Kjarifika importanti li ħaditni ftit qabel ma indunajt li dan hija dik l-imġieba ta 'hawn fuq taħdem biss bi żbalji mitfugħa fil-metodu ta' render (jew aktar probabbli fi kwalunkwe wieħed mill-metodi taċ-ċiklu tal-ħajja). Per eżempju, l-użu ta 'konfini ta' żball ma jagħmel ebda ġid bil-buttuna tagħna żball; dan l-iżball kien fil-click handler.

Ejja noħolqu eżempju ta 'żball ta' rendering u mbagħad uża limiti ta 'żball biex timmaniġġja l-iżball b'mod aktar grazzjuż.

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

Osservazzjoni:

Meta tagħfas il-buttuna, Irreaġixxi se jintwerew bandiera.busted.falz, li jiġġenera żball
Mingħajr konfini ta 'żball, is-siġra tal-komponenti kollha se tkun mhux immuntata

Imbagħad niktbu l-kodiċi tal-konfini tal-iżball tagħna (uża l-metodu taċ-ċiklu tal-ħajja l-ġdid componentDidCatch); dan huwa essenzjalment l-eżempju mogħti fl-artiklu ta’ Dan Abramov:

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

Fl-aħħar nużaw dan il-komponent:

react-app/src/App.js

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

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

Madankollu, meta tikklikkja fuq il-buttuna Render Error turi l-UI fallback u tirrapporta żball lil Sentry.

Tlestija

Nispera li sibt dan utli.

PS Link għall-oriġinal

PS Telegram chat permezz ta' Sentry https://t.me/sentry_ru

Sors: www.habr.com

Monitoraġġ remot Sentry ta 'bugs fl-applikazzjonijiet frontend ta' React

Żid kumment Ikkanċella risposta