🥇Kuwunika kwakutali kwa nsikidzi mu React frontend application

Tikuwunika pogwiritsa ntchito Sentry ndi React.

Nkhaniyi ndi gawo la mndandanda woyambira ndikunena zolakwika za Sentry pogwiritsa ntchito chitsanzo: Gawo la 1.

Kukhazikitsidwa kwa React

Choyamba tiyenera kuwonjezera pulojekiti yatsopano ya Sentry ya pulogalamuyi; kuchokera patsamba la Sentry. Pankhaniyi timasankha React.

Tikhazikitsanso mabatani athu awiri, Moni ndi Zolakwika, mukugwiritsa ntchito ndi React. Timayamba kupanga pulogalamu yathu yoyambira:

npx create-react-app react-app

Kenako timalowetsa phukusi la Sentry:

yarn add @sentry/browser

ndi kuyambitsa:

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

Zowonera:

Pachitukuko, tili ndi njira zina zowunikira zinthu, monga console, kotero timangopangitsa Sentry kuti apange kupanga

Kenako timayika mabatani athu a Hello ndi Error ndikuwonjezera pakugwiritsa ntchito:

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;

Vuto (Mapu Ochokera)

Titha kuyesa Sentry ndi kupanga kupanga polowa:

yarn build

ndipo kuchokera ku chikwatu chomanga lowetsani:

npx http-server -c-1

Vuto lomwe timakumana nalo nthawi yomweyo ndikuti zolemba zolakwika za Sentry zimatanthawuza manambala amizere mu batch minified; sizothandiza kwambiri.

Ntchito ya Sentry ikufotokoza izi pokoka mamapu oyambira paketi yochepetsedwa atalandira cholakwika. Pankhaniyi tikuthawa localhost (yosafikiridwa ndi Sentry service).

Mayankho (Mapu Ochokera)

Njira yothetsera vutoli ndikuyendetsa pulogalamuyi kuchokera pa seva yapagulu. Batani limodzi losavuta loyankha kuti mugwiritse ntchito ntchito ya Masamba a GitHub (yaulere). Njira zogwiritsira ntchito nthawi zambiri zimakhala motere:

Koperani zomwe zili mufoda kumanga ku folda mayendedwe m'ndandanda wa mizu ya repository.
Yatsani Masamba a GitHub m'malo (kuchokera ku GitHub) kuti mugwiritse ntchito chikwatu cha docs mbuye nthambi
Kanikizani zosintha ku GitHub

ndemanga: nditazindikira zomwe ndiyenera kugwiritsa ntchito pangani-pangani pulogalamu tsamba loyambira kukhazikitsa pulogalamuyo. Adatsika ndikuwonjezera zotsatirazi ku package.json:

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

Mtundu womaliza wa pulogalamu yomwe ikuyendetsa ikupezeka pa:

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

Chithunzi cha Nsikidzi Zogwidwa

Tiyeni tidutse ndikudina batani la Hello.

Ndi cholakwika chowoneka motere:

Zowonera:

Lipoti la cholakwikali silingamveke bwino, Chithunzi cha BRAVO.

Chithunzi cha Zolakwa Zosawerengeka

Momwemonso, pitilizani kudina batani cholakwa.

Ndi cholakwika chowoneka motere:

Kusamalira bwino zolakwika zosawerengeka (kupereka)

Chiyambi cha Malire Olakwika

Vuto la JavaScript mu gawo la mawonekedwe a ogwiritsa ntchito siliyenera kuphwanya pulogalamu yonse. Kuti athetse vutoli kwa ogwiritsa ntchito a React, React 16 imabweretsa lingaliro latsopano lotchedwa "Error bounds".

Malire olakwika ndi zigawo za React zomwe zimagwira zolakwika za JavaScript paliponse mumtengo wagawo la ana, lembani zolakwikazo, ndikupereka UI yobwerera m'malo mwa mtengo womwe wagwa. Malire olakwika amapeza zolakwika pakupereka, njira zoyendetsera moyo, komanso omanga mtengo wonse womwe uli pansipa.

...

Khalidwe latsopano pazolakwa zomwe sizikudziwika

Kusintha kumeneku ndi kwakukulu. Pofika pa React 16, zolakwika zomwe sizinagwire malire aliwonse olakwika zidzapangitsa kuti mtengo wonse wa gawo la React uchotsedwe.

- Dan Abramov - Kuwongolera Zolakwika mu React 16

Kufotokozera kofunikira komwe kunanditengera kanthawi ndisanazindikire izi ndi izi zomwe zili pamwambazi zimagwira ntchito ndi zolakwika zomwe zaponyedwa mu njira yoperekera (kapena mwina mwa njira iliyonse yozungulira moyo). Mwachitsanzo, kugwiritsa ntchito malire olakwika sikungathandize chilichonse ndi batani lathu cholakwa; cholakwika ichi chinali mu chowongolera.

Tiyeni tipange chitsanzo perekani cholakwika kenako ndikugwiritsa ntchito malire kuti muthetse cholakwikacho mwaulemu.

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

Kupenyerera:

Mukasindikiza batani, Chitani zidzawonetsedwa mbendera.busted.zabodza, zomwe zimapanga cholakwika
Popanda malire olakwika, mtengo wonsewo udzatsitsidwa

Kenako timalemba malire athu olakwika (timagwiritsa ntchito njira yatsopano yosinthira moyo gawoDidCatch); Ichi ndiye chitsanzo choperekedwa m'nkhani ya 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;
  }
}

Pomaliza timagwiritsa ntchito chigawo ichi:

react-app/src/App.js

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

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

Komabe, kukanikiza batani la Render Error kumawonetsa UI yakumbuyo ndikuwonetsa cholakwika kwa Sentry.

Kukwanitsa

Ndikukhulupirira kuti mwapeza izi zothandiza.

PS Lumikizani ku choyambirira

PS Telegraph kucheza kudzera pa Sentry https://t.me/sentry_ru

Source: www.habr.com

Kuwunika kwakutali kwa nsikidzi mu React frontend application

Kuwonjezera ndemanga kuletsa reply