🥇Sentry-kontrôle op ôfstân fan bugs yn React-frontend-applikaasjes

Wy ferkenne it brûken fan Sentry mei React.

Dit artikel is diel fan in searje dy't begjint mei it rapportearjen fan Sentry-flaters mei in foarbyld: Part fan 1.

Implementaasje fan React

Earst moatte wy in nij Sentry-projekt tafoegje foar dizze applikaasje; fan 'e webside fan Sentry. Yn dit gefal kieze wy React.

Wy sille ús twa knoppen, Hello en Error, opnij ymplementearje yn in applikaasje mei React. Wy begjinne mei it meitsjen fan ús startersapplikaasje:

npx create-react-app react-app

Dan ymportearje wy it Sentry-pakket:

yarn add @sentry/browser

en initialisearje it:

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

Observaasjes:

Tidens ûntwikkeling hawwe wy oare meganismen foar it kontrolearjen fan problemen, lykas de konsole, sadat wy Sentry allinich ynskeakelje foar produksjebou

Folgjende implementearje wy ús Hello en Error-knoppen en foegje se ta oan 'e applikaasje:

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;

Probleem (boarnekaarten)

Wy kinne Sentry testen mei in produksjebou troch yn te fieren:

yarn build

en út 'e build map ynfiere:

npx http-server -c-1

It probleem dat wy fuortendaliks rinne yn is dat Sentry syn flater records ferwize nei rigel nûmers yn de minified batch; net hiel brûkber.

De Sentry-tsjinst ferklearret dit troch de boarnekaarten te lûken foar it fermindere pakket nei ûntfangst fan in flater. Yn dit gefal rinne wy fan localhost (net tagonklik troch de Sentry-tsjinst).

Oplossingen (boarnekaarten)

De oplossing foar dit probleem is om de applikaasje út te fieren fan in iepenbiere webserver. Ien ienfâldige antwurdknop om de GitHub Pages-tsjinst (fergees) te brûken. De stappen om te brûken binne meastentiids as folget:

Kopiearje de ynhâld fan 'e map bouwe oan map docs yn 'e rootmap fan it repository.
Oandwaan GitHub-siden yn it repository (fan GitHub) om de docs-map yn te brûken master tûken
Druk feroarings nei GitHub

remark: neidat ik fûn út wat ik moat brûke meitsje-oanmeitsje-app thússidefunksje om de applikaasje te starten. Kom del om it folgjende ta te foegjen oan package.json:

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

De definitive ferzje fan 'e rinnende applikaasje is beskikber op:

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

Yllustraasje fan Caught Bugs

Litte wy trochgean troch te klikken op de Hello-knop.

Mei in flater dy't sa ferskynt:

Observaasjes:

Dit brekrapport koe net dúdliker, BRAVO.

Yllustraasje fan Unaccounted for Errors

Litte wy ek troch de knop klikke Fersin.

Mei in flater dy't sa ferskynt:

Better ôfhanneljen fan net-ferantwurde flaters (rendering)

Yntroduksje fan Flater Limits

In JavaScript-flater yn in diel fan 'e brûkersynterface moat de folsleine applikaasje net brekke. Om dit probleem foar React-brûkers op te lossen, yntroduseart React 16 in nij konsept neamd "flatergrinzen".

Flatergrinzen binne React-komponinten dy't JavaSkript-flaters oeral fange yn har berne-komponintbeam, dy flaters oanmelde en in fallback-UI werjaan ynstee fan 'e komponintbeam dy't ferûngelokke is. Flatergrinzen fange flaters by rendering, yn libbenssyklusmetoaden, en yn 'e konstruktors fan' e hiele beam ûnder har.

...

Nij gedrach foar net ûntdutsen flaters

Dizze feroaring is signifikant. Fanôf React 16 sille flaters dy't net troch in flatergrins waarden oppakt resultearje yn dat de heule React-komponintbeam ûntslein wurdt.

- Dan Abramov - Flaterbehanneling yn React 16

In wichtige opheldering dy't my in skoft duorre foardat ik dit realisearre is dat it boppesteande gedrach wurket allinich mei flaters smiten yn 'e rendermetoade (of wierskynliker yn ien fan' e libbenssyklusmetoaden). Bygelyks, it brûken fan flatergrinzen soe gjin goed dwaan mei ús knop Fersin; dizze flater wie yn de klikbehandler.

Litte wy in foarbyld-renderingsflater meitsje en dan flatergrinzen brûke om de flater sierliker te behanneljen.

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

Observaasje:

As jo op de knop drukke, Reagearje sil werjûn wurde flag.busted.bogus, dy't in flater genereart
Sûnder in flatergrins sil de hiele komponintbeam ûntslein wurde

Dan skriuwe wy ús flatergrinskoade (brûkt de nije libbenssyklusmetoade componentDidCatch); dit is yn wêzen it foarbyld jûn yn it artikel fan 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;
  }
}

As lêste brûke wy dizze komponint:

react-app/src/App.js

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

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

As jo lykwols op de knop Rendererror klikke toant de fallback UI en rapportearret in flater oan Sentry.

Fertraging

Ik hoopje dat jo dit nuttich fûn hawwe.

PS Link nei orizjineel

PS Telegram petear fia Sentry https://t.me/sentry_ru

Boarne: www.habr.com

Sentry-monitoring op ôfstân fan bugs yn React-frontend-applikaasjes

Add a comment cancel reply