🥇Sentry fjarvöktun á villum í React framendaforritum

Við erum að kanna notkun Sentry með React.

Þessi grein er hluti af röð sem byrjar á því að tilkynna Sentry villur með því að nota dæmi: Часть 1.

Innleiðing React

Fyrst þurfum við að bæta við nýju Sentry verkefni fyrir þetta forrit; af vef Sentry. Í þessu tilfelli veljum við React.

Við munum endurinnleiða tvo hnappa okkar, Halló og Villa, í forriti með React. Við byrjum á því að búa til byrjunarforritið okkar:

npx create-react-app react-app

Síðan flytjum við inn Sentry pakkann:

yarn add @sentry/browser

og frumstilla það:

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

Athuganir:

Við þróun höfum við aðrar aðferðir til að fylgjast með málum, svo sem stjórnborðinu, þannig að við virkum aðeins Sentry fyrir framleiðslusmíði

Næst útfærum við Halló og Villa hnappana okkar og bætum þeim við forritið:

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;

Vandamál (heimildakort)

Við getum prófað Sentry með framleiðslugerð með því að slá inn:

yarn build

og úr build möppunni sláðu inn:

npx http-server -c-1

Vandamálið sem við lendum strax í er að villuskráningar Sentry vísa til línunúmera í smækkaðri lotunni; ekki mjög gagnlegt.

Sentry þjónustan útskýrir þetta með því að draga upprunakortin fyrir minnkaða pakkann eftir að hafa fengið villu. Í þessu tilfelli erum við að keyra frá localhost (ekki aðgengilegt fyrir Sentry þjónustuna).

Lausnir (heimildakort)

Lausnin á þessu vandamáli er að keyra forritið frá opinberum vefþjóni. Einn einfaldur svarhnappur til að nota GitHub Pages þjónustuna (ókeypis). Skrefin til að nota eru venjulega sem hér segir:

Afritaðu innihald möppunnar byggja í möppu docs í rótarskrá geymslunnar.
Kveikja á GitHub síður í geymslunni (frá GitHub) til að nota skjöl möppuna í húsbóndi útibú
Ýttu á breytingar á GitHub

Athugið: eftir að ég fann út hvað ég þarf að nota búa til-búa-app heimasíðuaðgerð til að ræsa forritið. Kom að því að bæta eftirfarandi við package.json:

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

Lokaútgáfan af forritinu sem er í gangi er fáanleg á:

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

Myndskreyting af veiddum pöddum

Við skulum ganga í gegnum með því að smella á Halló hnappinn.

Með villu sem birtist svona:

Athuganir:

Þessi villuskýrsla gæti ekki verið skýrari, BRAVÓ.

Myndskreyting af óuppgerðum villum

Sömuleiðis skulum við fara í gegnum smellihnappinn villa.

Með villu sem birtist svona:

Betri meðhöndlun á ótilgreindum villum (flutningur)

Kynning á villumörkum

JavaScript villa í hluta notendaviðmótsins ætti ekki að brjóta allt forritið. Til að leysa þetta vandamál fyrir React notendur kynnir React 16 nýtt hugtak sem kallast „villumörk“.

Villumörk eru React íhlutir sem fanga JavaScript villur hvar sem er í undirhlutatré þeirra, skrá þessar villur og gera varaviðmót í stað íhlutatrésins sem hrundi. Villumörk grípa villur við flutning, í lífsferilsaðferðum og í smiðjum alls trésins fyrir neðan þau.

...

Ný hegðun fyrir óuppgötvaðar villur

Þessi breyting er veruleg. Frá og með React 16 munu villur sem voru ekki gripnar af neinum villumörkum leiða til þess að allt React íhlutatréð verður tekið af.

- Dan Abramov - Villumeðferð í React 16

Mikilvæg skýring sem tók mig smá tíma áður en ég áttaði mig á þessu er þessi ofangreind hegðun virkar aðeins með villum sem kastað er í render aðferðina (eða líklegra í einhverri lífsferilsaðferðinni). Til dæmis, að nota villumörk myndi ekki gera neitt gott með hnappinn okkar villa; þessi villa var í smellaforritinu.

Við skulum búa til dæmi um flutningsvillu og nota síðan villumörk til að meðhöndla villuna af meiri þokka.

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

Athugun:

Þegar þú ýtir á hnappinn, Bregðast verður birt flag.busted.falus, sem myndar villu
Án villumarka verður allt íhlutatréð tekið af

Síðan skrifum við villumarkakóðann okkar (notar nýju lífsferilsaðferðina componentDidCatch); þetta er í rauninni dæmið sem gefið er upp í grein 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;
  }
}

Að lokum notum við þennan þátt:

react-app/src/App.js

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

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

Hins vegar, með því að smella á Render Error hnappinn, birtist varaviðmótið og tilkynnir villu til Sentry.

Frágangur

Ég vona að þér hafi fundist þetta gagnlegt.

PS Tengill á frumritið

PS Telegram spjall í gegnum Sentry https://t.me/sentry_ru

Heimild: www.habr.com

Sentry fjarvöktun á villum í React framendaforritum

Bæta við athugasemd Hætta við svar