🥇Sentry akatsen urruneko monitorizazioa React frontend aplikazioetan

Sentry erabiliz React-ekin aztertzen ari gara.

Artikulu hau Sentryren akatsen berri ematen hasten den serie baten parte da, adibide bat erabiliz: Xnumx-ren zati bat.

React-en ezarpena

Lehenik eta behin Sentry proiektu berri bat gehitu behar dugu aplikazio honetarako; Sentry webgunetik. Kasu honetan Erreakzionatu aukeratuko dugu.

Gure bi botoiak, Kaixo eta Error, berriro ezarriko ditugu React-eko aplikazio batean. Gure hasierako aplikazioa sortzen hasiko gara:

npx create-react-app react-app

Ondoren, Sentry paketea inportatuko dugu:

yarn add @sentry/browser

eta hasieratu:

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

Oharrak:

Garapenean zehar, arazoak monitorizatzeko beste mekanismo batzuk ditugu, esate baterako, kontsola, beraz, Sentry soilik gaitzen dugu produkzio-eraiketetarako.

Ondoren, gure Kaixo eta Error botoiak inplementatzen ditugu eta aplikaziora gehitzen ditugu:

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;

Arazoa (iturburu-mapak)

Sentry ekoizpen-eraikuntza batekin probatu dezakegu, sartuta:

yarn build

eta eraikitze karpetatik sartu:

npx http-server -c-1

Berehala aurkitzen dugun arazoa da Sentry-ren errore-erregistroek lote txikiko lerro-zenbakiak aipatzen dituztela; ez da oso erabilgarria.

Sentry zerbitzuak errore bat jaso ondoren pakete murriztuaren iturburu-mapak ateraz azaltzen du. Kasu honetan localhost-etik exekutatzen ari gara (ez da atzitu Sentry zerbitzuak).

Irtenbideak (iturburu-mapak)

Arazo honen konponbidea web zerbitzari publiko batetik aplikazioa exekutatzea da. Erantzun botoi sinple bat GitHub Pages zerbitzua erabiltzeko (doan). Erabili beharreko urratsak hauek izan ohi dira:

Kopiatu karpetaren edukia eraikitzeko karpetara docs biltegiaren erro-direktorioan.
Piztu GitHub orrialdeak biltegian (GitHub-etik) docs karpeta erabiltzeko master adarrak
Bultza ezazu aldaketak GitHub-era

Kontuan izan: zer erabili behar dudan asmatu ondoren sortu-sortu-aplikazioa hasierako orriaren funtzioa aplikazioa abiarazteko. Pakete.json-era honako hau gehitzeari heldu zitzaion:

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

Exekutatzen ari den aplikazioaren azken bertsioa hemen dago eskuragarri:

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

Caught Bugs-en ilustrazioa

Joan gaitezen Kaixo botoian klik eginez.

Honela agertzen den errore batekin:

Oharrak:

Akatsen txosten hau ezin da argiagoa izan, BRAVO.

Kontatu gabeko erroreen irudia

Era berean, joan gaitezen botoiaren klik bidez Errorea.

Honela agertzen den errore batekin:

Kontatu gabeko akatsak hobeto kudeatzea (errendatzea)

Errore-mugen sarrera

Erabiltzailearen interfazearen zati batean JavaScript errore batek ez luke aplikazio osoa hautsi behar. React erabiltzaileen arazo hau konpontzeko, React 16-k "error bounds" izeneko kontzeptu berri bat aurkezten du.

Errore-mugak React osagaiak dira, JavaScript akatsak atzematen dituzten osagaien zuhaitzaren edozein lekutan, errore horiek erregistratu eta huts egin den osagaien zuhaitzaren ordez ordezko UI bat errendatzen dutenak. Errore-mugek erroreak harrapatzen dituzte errendatzean, bizi-zikloko metodoetan eta azpian dauden zuhaitz osoaren eraikitzaileetan.

...

Jokabide berria detektatu gabeko akatsetarako

Aldaketa hau esanguratsua da. React 16-tik aurrera, errore-mugak harrapatu ez dituen erroreek React osagaien zuhaitz osoa desmuntatuko dute.

- Dan Abramov - Erroreen kudeaketa React 16-n

Honetaz konturatu aurretik pixka bat behar izan dudan argipen garrantzitsu bat zera da goiko portaerak errendatze-metodoan (edo litekeena da bizi-zikloko edozein metodotan) egindako erroreekin soilik funtzionatzen du.. Adibidez, erroreen mugak erabiltzeak ez luke ezertarako balioko gure botoiarekin Errorea; errore hau klik-kudeatzailean zegoen.

Sortu dezagun errendatze-errore adibide bat eta, ondoren, erabili errore-mugak errorea dotoreago kudeatzeko.

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

Behaketa:

Botoia sakatzen duzunean, Erreakzionatzeko bistaratuko da bandera.lehertua.falta, akats bat sortzen duena
Errore-mugarik gabe, osagaien zuhaitz osoa desmuntatu egingo da

Ondoren, gure errore-mugaren kodea idazten dugu (bizi-zikloaren metodo berria erabiltzen du componentDidCatch); hau da, funtsean, Dan Abramov-en artikuluan emandako adibidea:

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

Azkenik osagai hau erabiltzen dugu:

react-app/src/App.js

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

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

Hala ere, Errendatu Errorea botoian klik eginez gero, ordezko UI-a bistaratzen da eta errore baten berri ematen dio Sentryri.

Amaiera

Espero dut hau lagungarria izatea.

PS Esteka jatorrizkora

PS Telegram txata Sentry bidez https://t.me/sentry_ru

Iturria: www.habr.com

Sentry urruneko akatsen monitorizazioa React frontend aplikazioetan

Gehitu iruzkin berria Idatzi