🥇Sentry-remota monitorado de cimoj en React-interfacaj aplikoj

Ni esploras uzi Sentry kun React.

Ĉi tiu artikolo estas parto de serio komencanta kun raportado de eraroj de Sentry uzante ekzemplon: 1-parto.

Efektivigo de React

Unue ni devas aldoni novan Sentry-projekton por ĉi tiu aplikaĵo; de la retejo de Sentry. En ĉi tiu kazo ni elektas Reagi.

Ni reefektigos niajn du butonojn, Saluton kaj Eraron, en aplikaĵo kun React. Ni komencas kreante nian komencan aplikaĵon:

npx create-react-app react-app

Tiam ni importas la Sentry-pakaĵon:

yarn add @sentry/browser

kaj pravigu ĝin:

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

Observoj:

Dum evoluo, ni havas aliajn mekanismojn por monitorado de problemoj, kiel la konzolo, do ni nur ebligas Sentry por produktaj konstruoj.

Poste ni efektivigas niajn Saluton kaj Eraron butonojn kaj aldonas ilin al la aplikaĵo:

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;

Problemo (Fonto-Mapoj)

Ni povas testi Sentry kun produktada konstruo enirante:

yarn build

kaj el la konstrua dosierujo enigu:

npx http-server -c-1

La problemo, kiun ni tuj renkontas, estas, ke la erarrekordoj de Sentry rilatas al linionumeroj en la minigita aro; ne tre utila.

La Servo-servo klarigas ĉi tion tirante la fontmapojn por la reduktita pako post ricevado de eraro. En ĉi tiu kazo ni kuras de localhost (ne alirebla de la servo Sentry).

Solvoj (Fonto-Mapoj)

La solvo al ĉi tiu problemo estas ruli la aplikaĵon de publika retservilo. Unu simpla respondbutono por uzi la GitHub Pages-servon (senpaga). La paŝoj por uzi estas kutime kiel sekvas:

Kopiu la enhavon de la dosierujo konstruu al dosierujo dokumentojn en la radika dosierujo de la deponejo.
Ŝalti Paĝoj GitHub en la deponejo (de GitHub) por uzi la dosierujon de dokumentoj enen majstro branĉoj
Premu ŝanĝojn al GitHub

Примечание: post kiam mi eltrovis, kion mi bezonas uzi krei-krei-apon ĉefpaĝa funkcio por lanĉi la aplikaĵon. Venis aldoni la jenon al package.json:

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

La fina versio de la funkcianta aplikaĵo haveblas ĉe:

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

Ilustraĵo de Caught Bugs

Ni trairu klakante la saluton butonon.

Kun eraro aperanta jene:

Observoj:

Ĉi tiu cimraporto ne povus esti pli klara, BRAVO.

Ilustraĵo de Neklarigitaj Eraroj

Same, ni trairu la butonklaku eraro.

Kun eraro aperanta jene:

Pli bona traktado de nekalkulitaj eraroj (bildado)

Enkonduko de Eraraj Limoj

JavaScript-eraro en parto de la uzantinterfaco ne devas rompi la tutan aplikaĵon. Por solvi ĉi tiun problemon por uzantoj de React, React 16 enkondukas novan koncepton nomatan "eraraj limoj".

Erarlimoj estas React-komponentoj, kiuj kaptas JavaScript-erarojn ie ajn en sia infana komponentarbo, registras tiujn erarojn kaj prezentas rezervan UI anstataŭ la komponentarbo kiu kraŝis. Erarlimoj kaptas erarojn dum bildigo, en vivciklo-metodoj, kaj en la konstrukciistoj de la tuta arbo sub ili.

...

Nova konduto por nerimarkitaj eraroj

Ĉi tiu ŝanĝo estas signifa. Ekde React 16, eraroj kiuj ne estis kaptitaj de iu erarlimo rezultigos la tutan React-komponentarbon malmuntita.

- Dan Abramov - Pritraktado de eraroj en React 16

Grava klarigo, kiu prenis min antaŭ ol mi komprenis ĉi tion, estas tio ĉi-supra konduto nur funkcias kun eraroj ĵetitaj en la rendermetodo (aŭ pli verŝajne en iu ajn el la vivciklo-metodoj). Ekzemple, uzi erarajn limojn ne utilus kun nia butono eraro; ĉi tiu eraro estis en la klaktraktilo.

Ni kreu ekzemplon de bildiga eraro kaj poste uzu erarlimojn por trakti la eraron pli gracie.

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

Observado:

Kiam vi premas la butonon, Reagi estos montrata flago.rompita.falsa, kiu generas eraron
Sen erara limo, la tuta komponentarbo estos malmuntita

Tiam ni skribas nian eraran limkodon (uzas la novan vivciklon metodon componentDidCatch); tio estas esence la ekzemplo donita en la artikolo de 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;
  }
}

Fine ni uzas ĉi tiun komponanton:

react-app/src/App.js

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

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

Tamen, alklakante la butonon Rendu Eraro montras la rezervan UI kaj raportas eraron al Sentry.

Kompletigo

Mi esperas, ke vi trovis ĉi tion utila.

PS Ligo al originalo

PS Telegram-babilejo per Sentry https://t.me/sentry_ru

fonto: www.habr.com

Sentry fora monitorado de cimoj en React-interfacaj aplikoj

Aldoni komenton Отменить ответ