🥇 Çavdêriya ji dûr ve ya xeletiyên di serîlêdanên pêşîn ên React de

Em Sentry bi React re bikar tînin lêkolîn dikin.

Ev gotar beşek ji rêzek e ku bi raporkirina xeletiyên Sentry bi karanîna mînakek dest pê dike: Beşek 1.

Pêkanîna React

Pêşî divê em ji bo vê serîlêdanê projeyek nû ya Sentry zêde bikin; ji malpera Sentry. Di vê rewşê de em React hilbijêrin.

Em ê du bişkokên xwe, Hello û Error, di serîlêdanek bi React re ji nû ve bicîh bikin. Em bi çêkirina serîlêdana xweya destpêkê dest pê dikin:

npx create-react-app react-app

Dûv re em pakêta Sentry vedigirin:

yarn add @sentry/browser

û dest pê bikin:

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

Çavdêrî:

Di dema pêşkeftinê de, me mekanîzmayên din ên şopandina pirsgirêkên me hene, wek konsolê, ji ber vê yekê em tenê Sentry-ê ji bo avahiyên hilberînê çalak dikin.

Dûv re em bişkokên Hello û Errorê bicîh dikin û wan li serîlêdanê zêde dikin:

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;

Pirsgirêk (Nexşeyên Çavkanî)

Em dikarin Sentry bi avahiyek hilberandinê bi têketina ceribandinê bikin:

yarn build

û ji peldanka avakirinê têkevin:

npx http-server -c-1

Pirsgirêka ku em tavilê pê dikevin ev e ku tomarên xeletiya Sentry jimareyên rêzê yên di komika kêmkirî de vedibêjin; ne pir kêrhatî.

Karûbarê Sentry vê yekê bi kişandina nexşeyên çavkaniyê ji bo pakêta kêmkirî piştî wergirtina xeletiyek rave dike. Di vê rewşê de em ji localhost-ê dimeşînin (ji hêla karûbarê Sentry ve nayê gihîştin).

Çareserî (Nexşeyên Çavkanî)

Çareseriya vê pirsgirêkê ev e ku meriv serîlêdanê ji serverek webê ya gelemperî bimeşîne. Yek bişkojka bersivê ya hêsan ku karûbarê Rûpelên GitHub bikar bîne (belaş). Gavên ku têne bikar anîn bi gelemperî wiha ne:

Naveroka peldankê kopî bikin avakirin ji bo peldankê docs di pelrêça root ya depoyê de.
Vekirin Rûpelên GitHub di depoyê de (ji GitHub) peldanka belgeyan tê de bikar bînin mamoste şaxên
Guhertinên li GitHub bişînin

bingotin: piştî ku min fêhm kir ku divê ez çi bikar bînim biafirîne-afirîne-sepanê fonksiyona rûpela malê ji bo destpêkirina serîlêdanê. Ji bo zêdekirina tiştên jêrîn li package.json hat:

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

Guhertoya dawîn a serîlêdana xebitandinê li vir heye:

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

Illustration of Caught Bugs

Ka em bi tikandina bişkoka Hello bimeşin.

Bi xeletiyek weha xuya dike:

Çavdêrî:

Ev raporta xeletiyê zelaltir nebû, BRAVO.

Illustration of Uncounted for Errors

Bi heman awayî, em bi tikandina bişkojê re derbas bibin Şaşî.

Bi xeletiyek weha xuya dike:

Desthilatdariya çêtir a xeletiyên nehesabkirî (rendering)

Danasîna Sînorên Error

Çewtiyek JavaScript-ê di beşek navrûya bikarhêner de divê tevahiya serîlêdanê neşikîne. Ji bo çareserkirina vê pirsgirêkê ji bo bikarhênerên React, React 16 têgehek nû ya bi navê "sînorên xeletiyê" destnîşan dike.

Sînorên çewtiyê hêmanên React in ku li her derê di dara pêkhateya zaroka xwe de xeletiyên JavaScript-ê digirin, wan xeletiyan tomar dikin, û li şûna dara pêkhatê ya ku têkçû, UI-ya paşverû pêşkêş dikin. Sînorên çewtiyê di dema renderkirinê de, di rêbazên çerxa jiyanê de, û di çêkerên tevahiya dara li jêr wan de xeletiyan digirin.

...

Tevgera nû ji bo xeletiyên nedîtî

Ev guhertin girîng e. Ji React 16-ê ve, xeletiyên ku ji hêla ti sînorê xeletiyê ve nehatine girtin dê bibe sedem ku tevahiya dara pêkhateya React were rakirin.

- Dan Abramov - Di React 16 de Birêvebirina Çewtiyê

Aşkerekirinek girîng a ku ji min re demek girt berî ku ez vê yekê fêm bikim ew e tevgera jorîn tenê bi xeletiyên ku di rêbaza renderê de têne avêtin re dixebite (an jî di yek ji awayên çerxa jiyanê de îhtîmal e). Mînakî, karanîna sînorên xeletiyê dê bi bişkoja me re tiştek baş neke Şaşî; ev xeletî di hilgirê klîk de bû.

Werin em mînakek xeletiya renderê biafirînin û dûv re sînorên xeletiyê bikar bînin da ku xeletiyê bi dilovanî bi rêve bibin.

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

Çavkirinî:

Dema ku hûn bişkojê pê bikin, Bersivkirin dê bên nîşandan flag.busted.bogus, ku xeletiyek çêdike
Bêyî sînorê xeletiyê, dê tevahiya dara pêkhateyê were rakirin

Dûv re em koda sînorê xeletiya xwe dinivîsin (rêbaza çerxa jiyanê ya nû bikar tîne componentDidCatch); ev bi rastî mînaka ku di gotara Dan Abramov de hatî dayîn ev e:

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

Di dawiyê de em vê beşê bikar tînin:

react-app/src/App.js

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

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

Lêbelê, tikandina bişkoja Render Error UI-ya paşverû nîşan dide û xeletiyek ji Sentry re radigihîne.

Têkilî

Ez hêvî dikim ku we ev alîkar dît.

PS Girêdana orîjînal

PS Telegram chat bi rêya Sentry https://t.me/sentry_ru

Source: www.habr.com

Sentry çavdêriya dûr a xeletiyan di serîlêdanên pêşîn ên React de

Add a comment cancel reply