🥇Ufuatiliaji wa mbali wa hitilafu katika programu za React frontend

Tunachunguza kwa kutumia Sentry with React.

Makala haya ni sehemu ya mfululizo unaoanza na kuripoti makosa ya Sentry kwa kutumia mfano: Sehemu ya 1.

Utekelezaji wa React

Kwanza tunahitaji kuongeza mradi mpya wa Sentry kwa programu hii; kutoka kwa wavuti ya Sentry. Katika kesi hii, tunachagua React.

Tutatekeleza tena vitufe vyetu viwili, Hello na Error, katika programu na React. Tunaanza kwa kuunda programu yetu ya kuanza:

npx create-react-app react-app

Kisha tunaingiza kifurushi cha Sentry:

yarn add @sentry/browser

na uanzishe:

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

Maoni:

Wakati wa usanidi, tunayo njia zingine za ufuatiliaji wa maswala, kama vile kiweko, kwa hivyo tunawasha Sentry kwa miundo ya uzalishaji pekee.

Ifuatayo, tunatekelezea vitufe vyetu vya Hello na Hitilafu na kuziongeza kwenye programu:

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;

Tatizo (Ramani za Chanzo)

Tunaweza kujaribu Sentry na muundo wa uzalishaji kwa kuingia:

yarn build

na kutoka kwa folda ya ujenzi ingiza:

npx http-server -c-1

Tatizo tunalokabiliana nalo mara moja ni kwamba rekodi za makosa za Sentry hurejelea nambari za mstari katika kundi lililopunguzwa; sio muhimu sana.

Huduma ya Sentry inaelezea hili kwa kuvuta ramani za chanzo kwa pakiti iliyopunguzwa baada ya kupokea hitilafu. Katika kesi hii tunaendesha kutoka kwa localhost (haipatikani na huduma ya Sentry).

Suluhisho (Ramani za Chanzo)

Suluhisho la tatizo hili ni kuendesha programu kutoka kwa seva ya wavuti ya umma. Kitufe kimoja rahisi cha kujibu kutumia huduma ya Kurasa za GitHub (bila malipo). Hatua za kutumia kawaida ni kama ifuatavyo.

Nakili yaliyomo kwenye folda kujenga kwa folda DoCS kwenye saraka ya mizizi ya hazina.
Washa Kurasa za GitHub kwenye hazina (kutoka GitHub) kutumia folda ya hati ndani bwana matawi
Bonyeza mabadiliko kwa GitHub

Kumbuka: baada ya kujua ninachohitaji kutumia tengeneza-tengeneza-programu kipengele cha ukurasa wa nyumbani kuzindua programu. Ilishuka ili kuongeza yafuatayo kwa package.json:

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

Toleo la mwisho la programu inayoendesha linapatikana kwa:

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

Kielelezo cha Mdudu Waliokamatwa

Wacha tupitie kwa kubofya kitufe cha Hello.

Na kosa kuonekana kama hii:

Maoni:

Ripoti hii ya hitilafu haikuweza kuwa wazi zaidi, BRAVO.

Mchoro wa Makosa Yasiyohesabiwa

Vivyo hivyo, wacha tupitie kitufe cha kubofya kosa.

Na kosa kuonekana kama hii:

Ushughulikiaji bora wa makosa ambayo hayajahesabiwa (utoaji)

Utangulizi wa Vikomo vya Hitilafu

Hitilafu ya JavaScript katika sehemu ya kiolesura cha mtumiaji haipaswi kuvunja programu nzima. Ili kutatua tatizo hili kwa watumiaji wa React, React 16 inaleta dhana mpya inayoitwa "mipaka ya makosa".

Mipaka ya hitilafu ni vipengee vya React ambavyo hunasa hitilafu za JavaScript popote katika sehemu ya mti wa mtoto, kuweka hitilafu hizo, na kutoa UI mbadala badala ya mti wa kijenzi ulioanguka. Mipaka ya makosa hushika makosa wakati wa utoaji, katika njia za mzunguko wa maisha, na katika wajenzi wa mti mzima chini yao.

...

Tabia mpya kwa makosa ambayo hayajagunduliwa

Mabadiliko haya ni muhimu. Kufikia React 16, hitilafu ambazo hazikunaswa na mpaka wowote wa hitilafu zitasababisha mti mzima wa kipengele cha React kuteremshwa.

- Dan Abramov - Kushughulikia Hitilafu katika React 16

Ufafanuzi muhimu ambao ulinichukua muda kabla sijagundua hii ni kwamba tabia iliyo hapo juu inafanya kazi tu na makosa yaliyotupwa katika njia ya kutoa (au uwezekano mkubwa katika njia zozote za mzunguko wa maisha). Kwa mfano, kutumia mipaka ya makosa haingefaa kitu na kitufe chetu kosa; hitilafu hii ilikuwa kwenye kidhibiti cha kubofya.

Wacha tuunde kosa la uwasilishaji mfano kisha tutumie mipaka ya makosa kushughulikia hitilafu kwa uzuri zaidi.

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

Uchunguzi:

Unapobonyeza kitufe, Tenda itaonyeshwa bendera.iliyopigwa.ghushi, ambayo hutoa hitilafu
Bila mpaka wa makosa, mti mzima wa sehemu utatolewa

Kisha tunaandika msimbo wetu wa mpaka wa makosa (hutumia njia mpya ya mzunguko wa maisha sehemuDidCatch); huu kimsingi ni mfano uliotolewa katika nakala ya 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;
  }
}

Hatimaye tunatumia sehemu hii:

react-app/src/App.js

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

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

Hata hivyo, kubofya kitufe cha Hitilafu ya Utoaji huonyesha kiolesura mbadala na kuripoti hitilafu kwa Sentry.

Kukamilika

Natumai umepata hii inasaidia.

PS Unganisha kwa asili

Gumzo la PS Telegraph kupitia Sentry https://t.me/sentry_ru

Chanzo: mapenzi.com

Sentry ufuatiliaji wa mbali wa hitilafu katika React frontend maombi

Kuongeza maoni Kufuta kujibu