🥇Sentry yekutarisa kure yebugs muReact frontend application

Tiri kuongorora tichishandisa Sentry neReact.

Ichi chinyorwa chikamu chenhevedzano inotanga nekutaura zvikanganiso zveSentry uchishandisa muenzaniso: 1 chikamu.

Kuitwa kweReact

Kutanga isu tinoda kuwedzera itsva Sentry purojekiti yeichi application; kubva kune Sentry webhusaiti. Muchiitiko ichi tinosarudza React.

Tichashandisazve mabhatani edu maviri, Mhoro uye Kanganiso, mukushandisa neReact. Isu tinotanga nekugadzira yedu yekutanga application:

npx create-react-app react-app

Ipapo isu tinopinza iyo Sentry package:

yarn add @sentry/browser

uye tanga:

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

Zvaonekwa:

Munguva yekusimudzira, isu tine dzimwe nzira dzekutarisa nyaya, senge console, saka isu tinogonesa Sentry yekugadzira inovaka.

Tevere isu tinoshandisa mabhatani edu Mhoro uye Kanganiso uye tovawedzera kune application:

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;

Dambudziko (Kwakabva Mepu)

Tinogona kuyedza Sentry neyakagadzirwa kuvaka nekupinda:

yarn build

uye kubva pakuvaka folda pinda:

npx http-server -c-1

Dambudziko ratinopinda naro nderekuti marekodhi ekukanganisa kweSentry anoreva nhamba dzemitsara mubatch minified; haibatsiri zvakanyanya.

Iyo Sentry sevhisi inotsanangura izvi nekudhonza masosi mamepu epaketi yakaderedzwa mushure mekugamuchira chikanganiso. Mune ino kesi isu tiri kumhanya kubva localhost (isingawanikwe neSentry sevhisi).

Mhinduro (Kwakabva Mepu)

Mhinduro yedambudziko iri ndeyekumhanyisa application kubva kune yeruzhinji web server. Rimwe bhatani rakareruka rekupindura kushandisa iyo GitHub Mapeji sevhisi (yemahara). Matanho ekushandisa anowanzo seanotevera:

Kopa zviri mukati mefolda kuvaka kufolder docs mumudzi wedhairekitori repository.
Batidza GitHub Mapeji mune repository (kubva kuGitHub) kushandisa docs folda mukati tenzi mapazi
Sunda shanduko kuGitHub

taura pfungwa: mushure mekunge ndafunga zvandinofanira kushandisa gadzira-gadzira-app peji remba basa kuvhura iyo application. Yakadzika pakuwedzera zvinotevera ku package.json:

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

Iyo yekupedzisira vhezheni yekushandisa application inowanikwa pa:

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

Mufananidzo weAkabatwa Bugs

Ngatifambei nekudzvanya bhatani reMhoro.

Nekukanganisa kunoratidzika seizvi:

Zvaonekwa:

Mharidzo yebug iyi haina kujeka zvakanyanya, Bravo.

Mufananidzo weZvisingaverengeki Zvikanganiso

Saizvozvo, ngatiendei kuburikidza nekudzvanya bhatani mhosho.

Nekukanganisa kunoratidzika seizvi:

Kubata zvirinani kwezvikanganiso zvisingaverengeki (kupa)

Nhanganyaya yeError Limits

Kukanganisa kweJavaScript muchikamu chemushandisi interface haifanire kutyora iyo application yese. Kugadzirisa dambudziko iri kune vashandisi veReact, React 16 inosvitsa pfungwa nyowani inonzi "Error bounds".

Mhosva miganho ndeye React components zvinobata JavaScript zvikanganiso chero kupi zvako mumwana wavo chikamu muti, nyora izvo zvikanganiso, uye kupa yekudzokera shure UI pachinzvimbo chemuti wechikamu wakapunzika. Mhosva miganhu inobata zvikanganiso panguva yekupa, munzira dzehupenyu, uye muvaki vemuti wese pazasi pavo.

...

Maitiro matsva ezvikanganiso zvisina kuonekwa

Shanduko iyi yakakosha. Nezve React 16, zvikanganiso zvisina kubatwa nechero muganho wekukanganisa zvinozoita kuti iyo yose React chikamu muti udzikwe.

- Dan Abramov - Kukanganisa Kubata muReact 16

Tsanangudzo yakakosha yakanditorera nguva ndisati ndaziva kuti iyi maitiro ari pamusoro anongoshanda nezvikanganiso zvakakandwa munzira yekupa (kana zvakanyanya mune chero nzira dzehupenyu). Semuenzaniso, kushandisa miganhu yekukanganisa hakuna zvakunobatsira nebhatani redu mhosho; kukanganisa uku kwanga kuri mubato rekubaya.

Ngatigadzirei muenzaniso wekupa kukanganisa tobva tashandisa kukanganisa miganhu kubata chikanganiso zvine nyasha.

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

Kucherechedza:

Paunodzvanya bhatani, Taura zvicharatidzwa mureza.busted.bogus, izvo zvinogadzira kukanganisa
Pasina muganhu wekukanganisa, chikamu chose chemuti chichaderedzwa

Ipapo isu tinonyora yedu yekukanganisa muganhu kodhi (inoshandisa nzira itsva yehupenyu componentDidCatch); uyu ndiwo muenzaniso wakapihwa muchinyorwa chaDan 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;
  }
}

Pakupedzisira tinoshandisa chikamu ichi:

react-app/src/App.js

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

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

Nekudaro, kudzvanya Render Kanganiso bhatani rinoratidza iyo yekudzokera shure UI uye inoshuma kukanganisa kune Sentry.

Kukwana

Ndinovimba wakawana izvi zvichibatsira.

PS Batanidza kune yepakutanga

PS Telegraph chat kuburikidza neSentry https://t.me/sentry_ru

Source: www.habr.com

Sentry kure yekutarisa kwebugs muReact frontend application

Voeg kukanzura mhinduro