🥇 Alefaso ny fanaraha-maso lavitra ny bibikely ao amin'ny rindranasa React frontend

Mikaroka ny fampiasana Sentry miaraka amin'ny React izahay.

Ity lahatsoratra ity dia ampahany amin'ny andiany manomboka amin'ny tatitra ny hadisoan'ny Sentry amin'ny fampiasana ohatra: Ampahany amin'ny 1.

Fampiharana ny React

Voalohany dia mila manampy tetikasa Sentry vaovao ho an'ity fampiharana ity isika; avy amin'ny tranokala Sentry. Amin'ity tranga ity dia misafidy React isika.

Hampihatra indray ny bokotra roa, Hello sy Error, amin'ny fampiharana miaraka amin'ny React. Manomboka amin'ny famoronana ny fampiharana starter izahay:

npx create-react-app react-app

Avy eo dia manafatra ny fonosana Sentry izahay:

yarn add @sentry/browser

ary manomboka azy:

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

Fandinihana:

Mandritra ny fampandrosoana dia manana mekanika hafa amin'ny fanaraha-maso ny olana izahay, toy ny console, ka ny Sentry ihany no ahafahantsika manamboatra ny famokarana.

Manaraka izany dia mampihatra ny bokotra Hello sy Error izahay ary ampio amin'ny fampiharana:

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;

Olana (Sarintany loharano)

Afaka manandrana Sentry miaraka amin'ny fananganana famokarana isika amin'ny alàlan'ny fidirana:

yarn build

ary miditra ao amin'ny lahatahiry fananganana:

npx http-server -c-1

Ny olana atrehintsika avy hatrany dia ny firaketana ny hadisoan'i Sentry dia manondro ny laharana andalana ao amin'ny andiany kely; tsy dia ilaina.

Ny serivisy Sentry dia manazava izany amin'ny alàlan'ny fisintonana ny sarintany loharano ho an'ny fonosana mihena rehefa avy nahazo fahadisoana. Amin'ity tranga ity dia mihazakazaka avy amin'ny localhost izahay (tsy azon'ny serivisy Sentry).

Vahaolana (Source Maps)

Ny vahaolana amin'ity olana ity dia ny fampandehanana ny fampiharana avy amin'ny mpizara tranonkalam-bahoaka. Boky valiny tsotra iray hampiasana ny serivisy GitHub Pages (maimaim-poana). Ny dingana ampiasaina dia matetika toy izao manaraka izao:

Adikao ny votoatin'ny lahatahiry manao fampirimana Docs ao amin'ny lahatahiry fototry ny tahiry.
Alefaso Pejy GitHub ao amin'ny tahiry (avy amin'ny GitHub) hampiasa ny lahatahiry docs in tompony sampany
Tohizo ny fanovana amin'ny GitHub

fanamarihana: rehefa avy hitako izay tokony hampiasaiko mamorona-mamorona-app pejin-tranonkala miasa hanombohana ny fampiharana. Nidina mba hanampiana ity manaraka ity amin'ny package.json:

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

Ny kinova farany amin'ny fampiharana mandeha dia azo jerena ao amin'ny:

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

Sarin'ny bibikely tratra

Andao handeha amin'ny fipihana ny bokotra Hello.

Miaraka amin'ny hadisoana miseho toy izao:

Fandinihana:

Tsy mazava kokoa ity tatitra momba ny bibikely ity, Bravo.

Fanoharana momba ny fahadisoana tsy voamarina

Toy izany koa, andao handeha hamaky ny bokotra tsindrio Error.

Miaraka amin'ny hadisoana miseho toy izao:

Fikarakarana tsara kokoa ny lesoka tsy voaisa (famerenana)

Fampidirana ny fetran'ny hadisoana

Ny fahadisoana JavaScript amin'ny ampahany amin'ny mpampiasa interface tsara dia tsy tokony hanapaka ny fampiharana manontolo. Mba hamahana ity olana ity ho an'ny mpampiasa React, ny React 16 dia mampiditra foto-kevitra vaovao antsoina hoe "faritra diso".

Ny fetran'ny hadisoana dia singa React izay misambotra lesoka JavaScript na aiza na aiza ao amin'ny hazo sangan'ny zanany, misoratra anarana ireo lesoka ireo, ary manome UI mihemotra fa tsy ilay hazo singa nianjera. Ny fetran'ny hadisoana dia mahita lesoka mandritra ny famandrihana, amin'ny fomba fanao amin'ny fiainana, ary amin'ny mpanamboatra ny hazo iray manontolo eo ambanin'izy ireo.

...

Fitondran-tena vaovao ho an'ny fahadisoana tsy hita

Zava-dehibe io fiovana io. Amin'ny React 16, ny lesoka izay tsy tratran'ny fetran'ny hadisoana rehetra dia hahatonga ny hazo singa React manontolo ho voavaha.

- Dan Abramov - Fikarakarana hadisoana amin'ny React 16

Fanazavana manan-danja izay naharitra elaela vao tonga saina aho dia ny hoe ny fihetsika etsy ambony dia tsy miasa afa-tsy amin'ny lesoka natsipy tao amin'ny fomba famandrihana (na azo inoana kokoa amin'ny fomba fiasa rehetra). Ohatra, ny fampiasana sisintany diso dia tsy hahasoa ny bokotrantsika Error; ity hadisoana ity dia tao amin'ny mpandrindra kitihina.

Andeha isika hamorona ohatra iray amin'ny famandrihana fahadisoana ary avy eo dia ampiasao ny fetran'ny hadisoana mba hikarakarana ny fahadisoana amin'ny fomba tsara kokoa.

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

fandinihana:

Rehefa manindry ny bokotra ianao, Maneho Hevitra Momba haseho flag.busted.bogus, izay miteraka hadisoana
Raha tsy misy fetran'ny hadisoana, dia ho esorina ny hazo singa manontolo

Avy eo dia manoratra ny kaody sisin-tany diso izahay (mampiasa ny fomba fiasa vaovao componentDidCatch); Ity no ohatra omena ao amin'ny lahatsoratr'i 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;
  }
}

Farany dia mampiasa ity singa ity izahay:

react-app/src/App.js

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

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

Na izany aza, ny fipihana ny bokotra Render Error dia mampiseho ny fallback UI ary mitatitra fahadisoana amin'ny Sentry.

vita

Manantena aho fa nahasoa anao ity.

Sal Rohy mankany amin'ny tany am-boalohany

Resaka PS Telegram amin'ny alàlan'ny Sentry https://t.me/sentry_ru

Source: www.habr.com

Fanaraha-maso lavitra ny bibikely ao amin'ny rindranasa React frontend

Add a comment cancel reply