🥇Sentry tej thaj chaw deb saib xyuas cov kab hauv React frontend applications

Peb tab tom tshawb nrhiav siv Sentry nrog React.

Kab lus no yog ib feem ntawm kev pib nrog kev ceeb toom Sentry yuam kev siv ib qho piv txwv: Ib feem ntawm 1.

Kev siv ntawm React

Ua ntej peb yuav tsum tau ntxiv ib txoj haujlwm Sentry tshiab rau daim ntawv thov no; los ntawm Sentry lub vev xaib. Hauv qhov no peb xaiv React.

Peb yuav rov ua dua peb ob lub nyees khawm, nyob zoo thiab yuam kev, hauv daim ntawv thov nrog React. Peb pib los ntawm kev tsim peb daim ntawv thov pib:

npx create-react-app react-app

Tom qab ntawd peb import Sentry pob:

yarn add @sentry/browser

thiab pib nws:

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

Kev soj ntsuam:

Thaum lub sij hawm txoj kev loj hlob, peb muaj lwm yam mechanisms rau kev soj ntsuam cov teeb meem, xws li lub console, yog li ntawd peb tsuas enables Sentry rau ntau lawm tsim.

Tom ntej no peb siv peb cov nyees khawm nyob zoo thiab yuam kev thiab ntxiv rau hauv daim ntawv thov:

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;

Teeb meem (Source Maps)

Peb tuaj yeem kuaj Sentry nrog kev tsim khoom tsim los ntawm kev nkag mus:

yarn build

thiab los ntawm tsim folder nkag mus:

npx http-server -c-1

Qhov teeb meem uas peb tam sim ntawd khiav mus rau hauv yog tias Sentry cov ntaub ntawv yuam kev xa mus rau cov kab zauv hauv cov minified batch; tsis muaj txiaj ntsig heev.

Cov kev pabcuam Sentry piav qhia qhov no los ntawm kev rub daim ntawv qhia chaw rau cov pob ntawv txo tom qab tau txais qhov yuam kev. Hauv qhov no peb tab tom khiav los ntawm localhost (tsis tuaj yeem siv tau los ntawm kev pabcuam Sentry).

Kev daws teeb meem (Source Maps)

Kev daws rau qhov teeb meem no yog khiav daim ntawv thov los ntawm pej xeem lub vev xaib. Ib qho yooj yim teb khawm siv GitHub Nplooj ntawv kev pabcuam (dawb). Cov kauj ruam siv feem ntau yog raws li hauv qab no:

Luam cov ntsiab lus ntawm cov ntawv tais ceev tseg tsim rau nplaub tshev docs nyob rau hauv lub hauv paus directory ntawm lub repository.
Tig GitHub Nplooj Ntawv nyob rau hauv lub repository (los ntawm GitHub) siv docs nplaub tshev nyob rau hauv tswv ceg
Push hloov mus rau GitHub

Примечание: Tom qab kuv paub tias kuv yuav tsum siv dab tsi tsim-create-app home page muaj nuj nqi los tso daim ntawv thov. nqis los ntxiv cov hauv qab no rau package.json:

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

Qhov kawg version ntawm daim ntawv thov khiav yog muaj nyob rau ntawm:

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

Piv txwv ntawm Caught Bugs

Wb taug kev los ntawm txhaj khawm nyob zoo.

Nrog ib qho yuam kev tshwm sim li no:

Kev soj ntsuam:

Tsab ntawv ceeb toom kab mob no tsis tuaj yeem pom meej dua, BRAVO.

Piv txwv ntawm Unaccounted rau yuam kev

Ib yam li ntawd, cia peb mus dhau lub pob nyem kev ua yuam kev.

Nrog ib qho yuam kev tshwm sim li no:

Kev tuav pov hwm zoo dua ntawm qhov tsis raug suav nrog (rendering)

Taw qhia txog qhov txwv tsis raug

JavaScript yuam kev nyob rau hauv ib feem ntawm tus neeg siv interface yuav tsum tsis txhob rhuav tag nrho daim ntawv thov. Txhawm rau daws qhov teeb meem no rau cov neeg siv React, React 16 qhia txog lub tswv yim tshiab hu ua "error bounds".

Kev ua yuam kev ciam teb yog React Cheebtsam uas ntes JavaScript yuam kev nyob txhua qhov chaw hauv lawv cov menyuam yaus cov ntoo, sau cov kev ua yuam kev no, thiab ua kom rov qab UI es tsis txhob siv cov ntoo cuam tshuam. Kev ua yuam kev ciam teb ntes yuam kev thaum lub sij hawm rendering, nyob rau hauv lifecycle txoj kev, thiab nyob rau hauv lub constructors ntawm tag nrho cov ntoo hauv qab lawv.

...

Kev coj tus cwj pwm tshiab rau qhov tsis raug

Qhov kev hloov no tseem ceeb heev. Raws li ntawm React 16, qhov yuam kev uas tsis raug ntes los ntawm kev ua yuam kev ciam teb yuav ua rau tag nrho React tivthaiv tsob ntoo raug tshem tawm.

- Dan Abramov - Yuam kev tuav hauv React 16

Ib qho lus piav qhia tseem ceeb uas coj kuv ib pliag ua ntej kuv paub qhov no yog qhov ntawd tus cwj pwm saum toj no tsuas yog ua haujlwm nrog qhov yuam kev pov rau hauv txoj kev render (los yog ntau dua nyob rau hauv ib qho ntawm cov txheej txheem lifecycle). Piv txwv li, siv cov ciam teb yuam kev yuav tsis ua qhov zoo nrog peb lub khawm kev ua yuam kev; Qhov no yuam kev yog nyob rau hauv lub click handler.

Cia peb tsim ib qho piv txwv rendering yuam kev thiab tom qab ntawd siv qhov yuam kev bounds los daws qhov yuam kev ntau gracefully.

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

Saib:

Thaum koj nias lub pob, React yuav tso tawm chij.busted.bogus, uas generates ib qho yuam kev
Yog tsis muaj qhov yuam kev ciam teb, tag nrho cov ntoo tivthaiv yuav raug tshem tawm

Tom qab ntawd peb sau peb qhov yuam kev ciam teb chaws (siv txoj kev tshiab lifecycle componentDidCatch); Qhov no yog qhov tseem ceeb piv txwv tau muab hauv Dan Abramov tsab xov xwm:

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

Thaum kawg peb siv cov khoom no:

react-app/src/App.js

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

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

Txawm li cas los xij, nyem khawm Render yuam kev qhia txog qhov poob rov qab UI thiab tshaj tawm qhov yuam kev rau Sentry.

Ua tiav

Kuv vam tias koj pom qhov no pab tau.

PS Txuas mus rau qhov qub

PS Telegram tham ntawm Sentry https://t.me/sentry_ru

Tau qhov twg los: www.hab.com

Sentry tej thaj chaw deb saib xyuas cov kab hauv React frontend applications

Ntxiv ib saib Отменить ответ