🥇Ukujongwa okude kwi-bugs kwi-React frontend applications

Sihlola sisebenzisa iSentry ngeReact.

Eli nqaku liyinxalenye yoluhlu oluqala ngokunika ingxelo ngeempazamo zeSentry usebenzisa umzekelo: Inxalenye ye1.

Ukuphunyezwa kweReact

Okokuqala kufuneka songeze iprojekthi entsha ye-Sentry yesi sicelo; kwiwebhusayithi yeSentry. Kule meko sikhetha React.

Siza kuphinda sisebenzise amaqhosha ethu amabini, Molo kunye nempazamo, kwisicelo esineReact. Siqala ngokwenza isicelo sethu sokuqala:

npx create-react-app react-app

Emva koko singenisa iphakheji ye-Sentry:

yarn add @sentry/browser

kwaye uyiqalise:

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

Iingqwalasela:

Ngexesha lophuhliso, sinezinye iindlela zokubeka iliso kwimiba, njenge-console, ke senza kuphela i-Sentry yokwakha imveliso.

Okulandelayo siphumeza amaqhosha ethu Molo kunye neempazamo kwaye songeze kwisicelo:

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;

Ingxaki (Iimephu zomthombo)

Sinokuvavanya i-Sentry kunye nokwakhiwa kwemveliso ngokufaka:

yarn build

kwaye kwifolda yokwakha ngenisa:

npx http-server -c-1

Ingxaki esibaleka kuyo ngokukhawuleza kukuba iirekhodi zempazamo zeSentry zibhekisa kumanani emigca kwibhetshi encitshisiweyo; ayiloncedo kakhulu.

Inkonzo yeSentry ichaza oku ngokutsala iimephu zomthombo wepakethi encitshisiweyo emva kokufumana impazamo. Kule meko siqhuba kwihostela yendawo (ayifikelelwanga yinkonzo yabaThumeli).

Izisombululo (Iimephu zoMthombo)

Isisombululo kule ngxaki kukuqhuba isicelo kumncedisi wewebhu kawonkewonke. Iqhosha elinye elilula lokuphendula ukusebenzisa inkonzo yamaPhepha eGitHub (simahla). Amanyathelo okusetyenziswa adla ngolu hlobo lulandelayo:

Khuphela imixholo yefolda Ukwakha kwifolda doc kwingcambu kavimba wogcino.
Layita Amaphepha eGitHub kwindawo yokugcina (ukusuka kwiGitHub) ukusebenzisa incwadi eneenkcukacha kwi inkosi amasebe
Tyhiliza utshintsho kwiGitHub

Qaphela:: emva kokuba ndifumene into ekufuneka ndiyisebenzise yenza-yenza-app umsebenzi wekhasi lasekhaya ukwazisa usetyenziso. Yehla ukongeza oku kulandelayo kwi-package.json:

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

Inguqulelo yokugqibela yesicelo esisebenzayo iyafumaneka apha:

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

UMzobo weeBugs ezibanjiweyo

Masihambe ngokucofa iqhosha elithi Hello.

Ngempazamo ebonakala ngolu hlobo:

Iingqwalasela:

Le ngxelo yebug ayikwazanga ukucaca ngakumbi, IBRAVO.

Umzekeliso weempazamo ezingachazwanga

Ngokufanayo, masihambe ngokucofa iqhosha imposiso.

Ngempazamo ebonakala ngolu hlobo:

Ukuphatha ngcono iimpazamo ezingachazwanga (ukunikezela)

Intshayelelo yeMida yempazamo

Impazamo yeJavaScript kwinxenye yojongano lomsebenzisi akufunekanga yaphule inkqubo yonke. Ukusombulula le ngxaki kubasebenzisi beReact, iReact 16 yazisa ingqikelelo entsha ebizwa ngokuba yi "error bounds".

Imida yemposiso ngamacandelo e-React abamba iimpazamo zeJavaScript naphi na kumthi wabo wecandelo lomntwana, bhala ezo mpazamo, kwaye unike i-UI yokubuyisela umva endaweni yomthi wecandelo othe wawa. Imida yempazamo ibamba iimpazamo ngexesha lonikezelo, kwiindlela ze-lifecycle, kunye nabakhi bomthi wonke ongaphantsi kwabo.

...

Indlela entsha yokuziphatha yeempazamo ezingabonwa

Olu tshintsho lubalulekile. Ukusukela kwi-React 16, iimpazamo ezingabanjwanga nangawuphi na umda wempazamo ziya kubangela ukuba umthi wonke wecandelo le-React unganyuswa.

- UDan Abramov - Ukuphatha impazamo kwiReact 16

Ingcaciso ebalulekileyo eyandithatha ixesha ngaphambi kokuba ndiyiqonde le nto le ndlela yokuziphatha ingentla isebenza kuphela ngeemposiso eziphoswe kwindlela yonikezelo (okanye kunokwenzeka nangakumbi kuyo nayiphi na indlela yomjikelo wobomi). Umzekelo, ukusebenzisa imida yemposiso akuyi kwenza nantoni na ngeqhosha lethu imposiso; lemposiso ibikwisibambi sokucofa.

Masenze umzekelo wokunikezela ngempazamo kwaye emva koko sisebenzise imida yeempazamo ukujongana nempazamo ngakumbi.

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

Ukuqwalaselwa:

Xa ucofa iqhosha, usabela iya kuboniswa iflegi.busted.mbumbulu, eyenza imposiso
Ngaphandle komda wemposiso, lonke ilungu lomthi liya kuthotywa

Emva koko sibhala ikhowudi yethu yomda wempazamo (isebenzisa indlela entsha yokuphila componentDidCatch); lo ngumzekelo onikwe kwinqaku likaDan 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;
  }
}

Ekugqibeleni sisebenzisa eli candelo:

react-app/src/App.js

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

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

Nangona kunjalo, ukucofa i-Render Error iqhosha libonisa i-UI yokubuyela umva kwaye inike ingxelo yempazamo kuSentry.

Ukugqiba

Ndiyathemba ukuba ukufumene oku kuluncedo.

PS Ikhonkco kwintsusa

Incoko yeTelegram yePS ngeSentry https://t.me/sentry_ru

umthombo: www.habr.com

Sentry esweni ekude iibugs kwi React frontend izicelo

Yongeza izimvo Phendula impendulo