🥇Sentry attālināta kļūdu uzraudzība React priekšgala lietojumprogrammās

Mēs pētām Sentry ar React izmantošanu.

Šis raksts ir daļa no sērijas, kas sākas ar ziņošanu par Sentry kļūdām, izmantojot piemēru: 1. daļa.

React ieviešana

Vispirms šai lietojumprogrammai jāpievieno jauns Sentry projekts; no Sentry vietnes. Šajā gadījumā mēs izvēlamies React.

Mēs atkārtoti ieviesīsim divas mūsu pogas — Hello un Error — lietojumprogrammā ar React. Mēs sākam, izveidojot mūsu startera lietojumprogrammu:

npx create-react-app react-app

Pēc tam mēs importējam Sentry paketi:

yarn add @sentry/browser

un inicializējiet to:

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

Novērojumi:

Izstrādes laikā mums ir citi mehānismi problēmu pārraudzībai, piemēram, konsole, tāpēc Sentry iespējojam tikai ražošanas versijām.

Tālāk mēs ieviešam mūsu pogas Hello un Error un pievienojam tās lietojumprogrammai:

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;

Problēma (avota kartes)

Mēs varam pārbaudīt Sentry ar ražošanas būvējumu, ievadot:

yarn build

un no būvēšanas mapes ievadiet:

npx http-server -c-1

Problēma, ar kuru mēs nekavējoties saskaramies, ir tā, ka Sentry kļūdu ieraksti attiecas uz rindu numuriem samazinātajā partijā; nav īpaši noderīgi.

Sentry pakalpojums to izskaidro, izvelkot samazinātās paketes avota kartes pēc kļūdas saņemšanas. Šajā gadījumā mēs darbojamies no localhost (nav pieejams Sentry pakalpojumam).

Risinājumi (avota kartes)

Šīs problēmas risinājums ir palaist lietojumprogrammu no publiska tīmekļa servera. Viena vienkārša atbildes poga, lai izmantotu pakalpojumu GitHub Pages (bezmaksas). Lietošanas darbības parasti ir šādas:

Kopējiet mapes saturu būvēt uz mapi dokumenti repozitorija saknes direktorijā.
Ieslēdz GitHub lapas repozitorijā (no GitHub), lai izmantotu dokumentu mapi meistars filiāles
Nospiediet izmaiņas uz GitHub

Piezīme: pēc tam, kad es sapratu, kas man jāizmanto izveidot-izveidot-lietotni mājas lapas funkcija, lai palaistu programmu. Tika pievienots failam package.json:

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

Darbojošās lietojumprogrammas galīgā versija ir pieejama:

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

Caught Bugs ilustrācija

Apskatīsim, noklikšķinot uz pogas Sveiki.

Ar kļūdu, kas parādās šādi:

Novērojumi:

Šis kļūdu ziņojums nevarētu būt skaidrāks, BRAVO.

Neatklātu kļūdu ilustrācija

Tāpat, noklikšķināsim uz pogas kļūda.

Ar kļūdu, kas parādās šādi:

Labāka apstrāde ar neuzskaitītām kļūdām (renderēšana)

Kļūdu ierobežojumu ieviešana

JavaScript kļūda lietotāja saskarnes daļā nedrīkst sabojāt visu lietojumprogrammu. Lai atrisinātu šo problēmu React lietotājiem, React 16 ievieš jaunu koncepciju, ko sauc par "kļūdu robežām".

Kļūdu robežas ir React komponenti, kas uztver JavaScript kļūdas jebkurā vietā to pakārtoto komponentu kokā, reģistrē šīs kļūdas un renderē atkāpšanās lietotāja saskarni, nevis komponentu koku, kas avarēja. Kļūdu robežas uztver kļūdas renderēšanas laikā, dzīves cikla metodēs un visa zem tām esošā koka konstruktoros.

...

Jauna rīcība neatklātām kļūdām

Šīs izmaiņas ir nozīmīgas. Sākot ar React 16, kļūdas, kuras nenovēroja neviena kļūdu robeža, izraisīs visu React komponentu koka atvienošanu.

Sākot no Dens Abramovs - Kļūdu apstrāde programmā React 16

Svarīgs precizējums, kas pagāja kādu laiku, pirms es to sapratu iepriekš minētā darbība darbojas tikai ar kļūdām, kas rodas renderēšanas metodē (vai, visticamāk, jebkurā dzīves cikla metodē). Piemēram, kļūdu robežu izmantošana mūsu pogai nenāktu par labu kļūda; šī kļūda bija klikšķu apstrādātājā.

Izveidosim renderēšanas kļūdas piemēru un pēc tam izmantosim kļūdu robežas, lai graciozāk risinātu kļūdu.

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

Novērojums:

Nospiežot pogu, Reaģēt tiks parādīts karogs.salauzts.viltus, kas rada kļūdu
Bez kļūdas robežas tiks atmontēts viss komponentu koks

Pēc tam mēs rakstām kļūdas robežas kodu (izmanto jauno dzīves cikla metodi komponentsDidCatch); tas būtībā ir piemērs, kas sniegts Dena Abramova rakstā:

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

Visbeidzot, mēs izmantojam šo komponentu:

react-app/src/App.js

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

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

Tomēr, noklikšķinot uz pogas Render Error, tiek parādīts rezerves lietotāja interfeiss un Sentry tiek ziņots par kļūdu.

Pabeigšana

Ceru, ka jums tas noderēja.

PS Saite uz oriģinālu

PS Telegram tērzēšana, izmantojot Sentry https://t.me/sentry_ru

Avots: www.habr.com

Sentry attālināta kļūdu uzraudzība React priekšgala lietojumprogrammās

Pievieno komentāru Atcelt atbildi