🥇Ho lekola litšitšili hole le lits'ebetso tsa React frontend

Re ntse re hlahloba ka ho sebelisa Sentry le React.

Sengoliloeng sena ke karolo ea letoto le qalang ka ho tlaleha liphoso tsa Sentry ho sebelisa mohlala: Karolo ea 1.

Phethahatso ea React

Pele re hloka ho eketsa morero o mocha oa Sentry bakeng sa kopo ena; ho tsoa webosaeteng ea Sentry. Tabeng ena, re khetha React.

Re tla kenya hape likonopo tsa rona tse peli, Hello and Error, ts'ebelisong ea React. Re qala ka ho theha sesebelisoa sa rona sa ho qala:

npx create-react-app react-app

Ebe re kenya sephutheloana sa Sentry:

yarn add @sentry/browser

ebe u qala:

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

Maikutlo:

Nakong ea nts'etsopele, re na le mekhoa e meng ea ho beha leihlo litaba, joalo ka console, ka hona re thusa feela Sentry bakeng sa ho aha tlhahiso.

Ka mor'a moo re kenya likonopo tsa rona tsa Hello le Error ebe re li kenya ts'ebetsong:

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;

Bothata (Mohloli oa 'Mapa)

Re ka leka Sentry ka moaho oa tlhahiso ka ho kenya:

yarn build

'me ho tsoa foldareng ea kaho kenya:

npx http-server -c-1

Bothata boo re tobaneng le bona hang-hang ke hore litlaleho tsa liphoso tsa Sentry li bua ka linomoro tsa line ka har'a betch minified; ha e na thuso haholo.

Tšebeletso ea Sentry e hlalosa sena ka ho hula limmapa tsa mohloli bakeng sa pakete e fokolitsoeng ka mor'a ho fumana phoso. Tabeng ena re matha ho tloha ho localhost (ha e fumanehe ke tšebeletso ea Sentry).

Litharollo (Mohloli oa Limmapa)

Tharollo ea bothata bona ke ho tsamaisa ts'ebeliso ho tsoa ho seva sa marang-rang sa sechaba. Konopo e le 'ngoe e bonolo ea ho araba ho sebelisa tšebeletso ea GitHub Pages (mahala). Mehato e sebelisoang hangata ke e latelang:

Kopitsa litaba tsa foldara haha ho tsamaisetsa foldareng docs bukeng ea motso ea polokelo.
Bulela Maqephe a GitHub sebakeng sa polokelo (ho tloha GitHub) ho sebelisa foldara ea litokomane ho mong'a makala
Tobetsa liphetoho ho GitHub

mantsoe: ka mor'a hore ke fumane seo ke lokelang ho se sebelisa theha-bopa-app Mosebetsi oa leqephe la lapeng ho qala ts'ebeliso. E theohile ho kenyelletsa tse latelang ho package.json:

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

Phetolelo ea ho qetela ea sesebelisoa se sebetsang e fumaneha ho:

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

Sets'oants'o sa Litšitšili tse Caught

Ha re tsamaee ka ho tobetsa konopo ea Hello.

Ka phoso e hlahang tjena:

Maikutlo:

Tlaleho ena ea bothata ha e hlake haholoanyane, MOSEBETSI O MOTLE.

Setšoantšo sa Liphoso Tse sa Tsejoeng

Ka mokhoa o ts'oanang, ha re feteleng ho tobetsa konopo phosong.

Ka phoso e hlahang tjena:

Ho sebetsana hantle le liphoso tse sa tsejoeng (ho fana)

Kenyelletso ea Meeli ea Phoso

Phoso ea JavaScript karolong ea mosebelisi ha ea lokela ho senya ts'ebeliso eohle. Ho rarolla bothata bona bakeng sa basebelisi ba React, React 16 e hlahisa mohopolo o mocha o bitsoang "meeli ea liphoso".

Meeli ea liphoso ke likarolo tsa React tse tšoarang liphoso tsa JavaScript kae kapa kae sefateng sa karolo ea bana, ho ngola liphoso tseo, le ho fana ka UI ea morao sebakeng sa sefate sa motsoako se soahlamaneng. Meeli ea liphoso e tšoara liphoso nakong ea ho fana, ka mekhoa ea bophelo, le ho baetsi ba sefate sohle se ka tlas'a bona.

...

Boitšoaro bo bocha bakeng sa liphoso tse sa lemoheng

Phetoho ena e bohlokoa. Ho tloha ka React 16, liphoso tse sa kang tsa tšoaroa ke moeli ofe kapa ofe oa phoso li tla etsa hore sefate sohle sa karolo ea React se theoloe.

- Dan Abramov - Ho sebetsana le Phoso ho React 16

Tlhaloso ea bohlokoa e nkileng nako pele ke hlokomela sena ke hore boits'oaro bo kaholimo bo sebetsa feela ka liphoso tse lahliloeng ka mokhoa oa ho fana (kapa mohlomong ho mekhoa efe kapa efe ea bophelo). Ka mohlala, ho sebelisa meeli ea liphoso ho ke ke ha thusa letho ka konopo ea rona phosong; phoso ena e ne e le ho "click handler".

Ha re theheng mohlala oa ho fana ka phoso ebe re sebelisa meeli ea liphoso ho sebetsana le phoso ka bokhabane.

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

Hlokomela:

Ha o tobetsa konopo, Etsa joalo e tla bontshwa folaga.e phatlohile.mashano, e hlahisang phoso
Ntle le moeli oa phoso, sefate sohle sa motsoako se tla theoleloa

Ebe re ngola khoutu ea rona ea moeli oa phoso (e sebelisa mokhoa o mocha oa bophelo karoloDidCatch); Ha e le hantle ona ke mohlala o fanoeng sehloohong sa 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;
  }
}

Qetellong, re sebelisa karolo ena:

react-app/src/App.js

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

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

Leha ho le joalo, ho tobetsa konopo ea Render Error ho bonts'a UI ea morao-rao mme e tlaleha phoso ho Sentry.

Qetellong

Ke tšepa u fumane sena se thusa.

PES Hokela ho ea mantlha

Puisano ea PS Telegraph ka Sentry https://t.me/sentry_ru

Source: www.habr.com

Ho beha leihlo litšitšili u le hole ho li-apps tsa React frontend

Eketsa ka tlhaloso hlakola karabo