🥇 Sentry monitro chwilod o bell mewn ceisiadau frontend React

Rydym yn archwilio defnyddio Sentry gydag React.

Mae'r erthygl hon yn rhan o gyfres sy'n dechrau gyda rhoi gwybod am wallau Sentry gan ddefnyddio enghraifft: Rhan 1.

Gweithredu React

Yn gyntaf mae angen i ni ychwanegu prosiect Sentry newydd ar gyfer y cais hwn; oddi ar wefan Sentry. Yn yr achos hwn rydym yn dewis React.

Byddwn yn ail-weithredu ein dau fotwm, Helo a Gwall, mewn cais gyda React. Rydyn ni'n dechrau trwy greu ein cais cychwynnol:

npx create-react-app react-app

Yna rydym yn mewnforio'r pecyn Sentry:

yarn add @sentry/browser

a'i gychwyn:

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

Sylwadau:

Yn ystod y datblygiad, mae gennym fecanweithiau eraill ar gyfer monitro materion, megis y consol, felly dim ond Sentry ar gyfer adeiladu cynhyrchu yr ydym yn ei alluogi

Nesaf rydyn ni'n gweithredu ein botymau Helo a Gwall ac yn eu hychwanegu at y rhaglen:

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;

Problem (Mapiau Ffynhonnell)

Gallwn brofi Sentry gydag adeiladwaith cynhyrchu trwy nodi:

yarn build

ac o'r ffolder adeiladu nodwch:

npx http-server -c-1

Y broblem yr ydym yn mynd iddi ar unwaith yw bod cofnodion gwall Sentry yn cyfeirio at rifau llinell yn y swp mini; ddim yn ddefnyddiol iawn.

Mae gwasanaeth Sentry yn esbonio hyn trwy dynnu'r mapiau ffynhonnell ar gyfer y pecyn gostyngol ar ôl derbyn gwall. Yn yr achos hwn rydym yn rhedeg o localhost (ddim yn hygyrch gan y gwasanaeth Sentry).

Atebion (Mapiau Ffynhonnell)

Yr ateb i'r broblem hon yw rhedeg y rhaglen o weinydd gwe cyhoeddus. Un botwm ateb syml i ddefnyddio gwasanaeth GitHub Pages (am ddim). Mae'r camau i'w defnyddio fel arfer fel a ganlyn:

Copïwch gynnwys y ffolder adeiladu i ffolder docs yng nghyfeiriadur gwraidd yr ystorfa.
Trowch ymlaen Tudalennau GitHub yn yr ystorfa (o GitHub) i ddefnyddio'r ffolder docs yn meistr canghenau
Gwthiwch newidiadau i GitHub

Nodyn: ar ôl i mi cyfrifedig allan beth sydd angen i mi ei ddefnyddio creu-creu-app swyddogaeth tudalen gartref i lansio'r cais. Daeth i lawr i ychwanegu'r canlynol at package.json:

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

Mae fersiwn derfynol y rhaglen redeg ar gael yn:

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

Darlun o Bygiau a Dalwyd

Gadewch i ni gerdded trwy glicio ar y botwm Helo.

Gyda gwall yn ymddangos fel hyn:

Sylwadau:

Ni allai'r adroddiad nam hwn fod yn gliriach, DA IAWN.

Darlun o Gwallau Heb eu Cyfrif

Yn yr un modd, gadewch i ni fynd drwy'r cliciwch botwm gwall.

Gyda gwall yn ymddangos fel hyn:

Trin gwallau heb eu cyfrif yn well (rendro)

Cyflwyno Terfynau Gwallau

Ni ddylai gwall JavaScript mewn rhan o'r rhyngwyneb defnyddiwr dorri'r rhaglen gyfan. Er mwyn datrys y broblem hon ar gyfer defnyddwyr React, mae React 16 yn cyflwyno cysyniad newydd o'r enw "terfynau gwall".

Ffiniau gwall yw cydrannau React sy'n dal gwallau JavaScript unrhyw le yn eu coeden gydrannau plentyn, yn cofnodi'r gwallau hynny, ac yn gwneud UI wrth gefn yn lle'r goeden gydrannau a ddamwain. Mae ffiniau gwallau yn dal gwallau yn ystod rendro, mewn dulliau cylch bywyd, ac yn adeiladwyr y goeden gyfan oddi tanynt.

...

Ymddygiad newydd ar gyfer gwallau heb eu canfod

Mae'r newid hwn yn arwyddocaol. O Adwaith 16, bydd gwallau na chawsant eu dal gan unrhyw ffin gwallau yn arwain at ddadosod y goeden gydran React gyfan.

- Dan Abramov - Trin Gwallau yn Ymateb 16

Eglurhad pwysig a gymerodd sbel i mi sylweddoli hyn yw hynny mae'r ymddygiad uchod ond yn gweithio gyda gwallau a daflwyd yn y dull rendrad (neu'n fwy tebygol yn unrhyw un o'r dulliau cylch bywyd). Er enghraifft, ni fyddai defnyddio ffiniau gwall yn gwneud unrhyw les gyda'n botwm gwall; roedd y gwall hwn yn y triniwr clic.

Gadewch i ni greu gwall rendrad enghreifftiol ac yna defnyddio terfynau gwall i drin y gwall yn fwy gosgeiddig.

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

Arsylwi:

Pan fyddwch chi'n pwyso'r botwm, Ymateb bydd yn cael ei arddangos fflag.busted.ffug, sy'n cynhyrchu gwall
Heb ffin gwall, bydd y goeden gydran gyfan yn cael ei dadosod

Yna rydyn ni'n ysgrifennu ein cod ffin gwall (yn defnyddio'r dull cylch bywyd newydd cydranDidCatch); dyma yn ei hanfod yr enghraifft a roddir yn erthygl 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;
  }
}

Yn olaf, rydym yn defnyddio'r gydran hon:

react-app/src/App.js

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

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

Fodd bynnag, mae clicio ar y botwm Gwall Rendro yn dangos yr UI wrth gefn ac yn adrodd gwall i Sentry.

Cwblhau

Rwy'n gobeithio bod hyn yn ddefnyddiol i chi.

PS Dolen i'r gwreiddiol

Sgwrs PS Telegram trwy Sentry https://t.me/sentry_ru

Ffynhonnell: hab.com

Monitro bygiau o bell mewn cymwysiadau blaen React

Ychwanegu sylw Diddymu ateb