🥇Abojuto latọna jijin Sentry ti awọn idun ni awọn ohun elo iwaju React

A n ṣawari ni lilo Sentry pẹlu React.

Nkan yii jẹ apakan ti jara ti o bẹrẹ pẹlu ijabọ awọn aṣiṣe Sentry nipa lilo apẹẹrẹ kan: Apakan ti 1.

Imuse ti React

Ni akọkọ a nilo lati ṣafikun iṣẹ akanṣe Sentry tuntun fun ohun elo yii; lati aaye ayelujara Sentry. Ni idi eyi a yan React.

A yoo tun ṣe awọn bọtini meji wa, Hello ati Aṣiṣe, ninu ohun elo kan pẹlu React. A bẹrẹ nipa ṣiṣẹda ohun elo ibẹrẹ wa:

npx create-react-app react-app

Lẹhinna a gbe package Sentry wọle:

yarn add @sentry/browser

ki o si bẹrẹ:

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

Awọn akiyesi:

Lakoko idagbasoke, a ni awọn ọna ṣiṣe miiran fun awọn ọran ibojuwo, gẹgẹbi console, nitorinaa a mu Sentry ṣiṣẹ nikan fun awọn iṣelọpọ iṣelọpọ

Nigbamii a ṣe imulo awọn bọtini Hello ati Aṣiṣe ati ṣafikun wọn si ohun elo naa:

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

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

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

Isoro (Map Orisun)

A le ṣe idanwo Sentry pẹlu iṣelọpọ iṣelọpọ nipa titẹ sii:

yarn build

ati lati inu folda Kọ, tẹ:

npx http-server -c-1

Iṣoro ti a ṣiṣẹ lẹsẹkẹsẹ ni pe awọn igbasilẹ aṣiṣe Sentry tọka si awọn nọmba laini ni ipele ti o dinku; ko wulo pupọ.

Iṣẹ Sentry ṣe alaye eyi nipa fifaa awọn maapu orisun fun apo ti o dinku lẹhin gbigba aṣiṣe kan. Ni idi eyi a nṣiṣẹ lati localhost (kii ṣe wiwọle nipasẹ iṣẹ Sentry).

Awọn ojutu (Maps Orisun)

Ojutu si iṣoro yii ni lati ṣiṣẹ ohun elo lati ọdọ olupin wẹẹbu ti gbogbo eniyan. Bọtini idahun ti o rọrun kan lati lo iṣẹ Awọn oju-iwe GitHub (ọfẹ). Awọn igbesẹ lati lo nigbagbogbo jẹ atẹle:

Da awọn akoonu ti awọn folda kọ si folda docs ninu awọn root liana ti awọn ibi ipamọ.
Tan-an Awọn oju-iwe GitHub ninu ibi ipamọ (lati GitHub) lati lo folda docs ni titunto si awọn ẹka
Titari awọn ayipada si GitHub

Daakọ: lẹhin Mo ṣayẹwo ohun ti Mo nilo lati lo ṣẹda-ṣẹda-app iṣẹ oju-iwe ile lati ṣe ifilọlẹ ohun elo naa. Sọkalẹ lati ṣafikun atẹle si package.json:

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

Ẹya ikẹhin ti ohun elo nṣiṣẹ wa ni:

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

Apejuwe ti Mu idun

Jẹ ki a rin nipasẹ titẹ bọtini Hello.

Pẹlu aṣiṣe ti o han bi eleyi:

Awọn akiyesi:

Iroyin kokoro yii ko le ṣe alaye diẹ sii, BRAVO.

Apejuwe ti Aiṣiro fun Awọn aṣiṣe

Bakanna, jẹ ki ká lọ nipasẹ awọn bọtini tẹ aṣiṣe.

Pẹlu aṣiṣe ti o han bi eleyi:

Mimu to dara julọ ti awọn aṣiṣe ti ko ni iṣiro (ti n ṣe)

Iṣafihan Awọn idiwọn aṣiṣe

Aṣiṣe JavaScript ni apakan ti wiwo olumulo ko yẹ ki o fọ gbogbo ohun elo naa. Lati yanju iṣoro yii fun awọn olumulo React, React 16 ṣafihan imọran tuntun kan ti a pe ni “awọn aala aṣiṣe”.

Awọn aala aṣiṣe jẹ awọn paati Idahun ti o mu awọn aṣiṣe JavaScript nibikibi ninu igi paati ọmọ wọn, wọle si awọn aṣiṣe wọnyẹn, ki o ṣe UI fallback dipo igi paati ti o kọlu. Awọn aala aṣiṣe yẹ awọn aṣiṣe lakoko ṣiṣe, ni awọn ọna igbesi aye, ati ninu awọn olupilẹṣẹ ti gbogbo igi ni isalẹ wọn.

...

Iwa tuntun fun awọn aṣiṣe ti a ko rii

Iyipada yii ṣe pataki. Bi ti React 16, awọn aṣiṣe ti a ko mu nipasẹ eyikeyi aala aṣiṣe yoo ja si gbogbo igi paati React ni ṣiṣi silẹ.

- Dan Abramov - Mimu asise ni React 16

Alaye pataki ti o gba mi ni igba diẹ ṣaaju ki Mo rii pe eyi ni iyẹn ihuwasi ti o wa loke n ṣiṣẹ nikan pẹlu awọn aṣiṣe ti a sọ sinu ọna ṣiṣe (tabi diẹ sii ni eyikeyi awọn ọna igbesi aye). Fun apẹẹrẹ, lilo awọn aala aṣiṣe kii yoo ṣe eyikeyi ti o dara pẹlu bọtini wa aṣiṣe; aṣiṣe yii wa ninu oluṣakoso tẹ.

Jẹ ki a ṣẹda aṣiṣe Rendering apẹẹrẹ ati lẹhinna lo awọn aala aṣiṣe lati mu aṣiṣe naa ni oore-ọfẹ diẹ sii.

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

Akiyesi:

Nigbati o ba tẹ bọtini naa, Idahun yoo han asia.busted.bogus, eyi ti o ṣẹda aṣiṣe
Laisi aala aṣiṣe, gbogbo igi paati yoo jẹ unmounted

Lẹhinna a kọ koodu aala aṣiṣe wa (nlo ọna igbesi aye tuntun paatiDidCatch); Eyi ni pataki apẹẹrẹ ti a fun ni nkan Dan Abramov:

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

Ni ipari a lo paati yii:

fesi-app/src/App.js

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

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

Bibẹẹkọ, tite bọtini Aṣiṣe Tunṣe ṣafihan UI ti o pada sẹhin ati ṣe ijabọ aṣiṣe kan si Sentry.

Ipari

Mo nireti pe o rii iranlọwọ.

PS Ọna asopọ si atilẹba

PS Telegram iwiregbe nipasẹ Sentry https://t.me/sentry_ru

orisun: www.habr.com

Sentry isakoṣo latọna jijin ti awọn idun ni awọn ohun elo iwaju React

Fi ọrọìwòye kun Fagilee esi