રિએક્ટ ફ્રન્ટએન્ડ એપ્લિકેશન્સમાં બગ્સનું સેન્ટ્રી રિમોટ મોનિટરિંગ

અમે પ્રતિક્રિયા સાથે Sentry નો ઉપયોગ કરીને અન્વેષણ કરી રહ્યાં છીએ.

આ લેખ ઉદાહરણનો ઉપયોગ કરીને સંત્રીની ભૂલોની જાણ કરવા સાથે શરૂ થતી શ્રેણીનો એક ભાગ છે: 1 નો ભાગ.

પ્રતિક્રિયા અમલીકરણ

પ્રથમ આપણે આ એપ્લિકેશન માટે એક નવો સેન્ટ્રી પ્રોજેક્ટ ઉમેરવાની જરૂર છે; સંત્રી વેબસાઇટ પરથી. આ કિસ્સામાં અમે પ્રતિક્રિયા પસંદ કરીએ છીએ.

અમે અમારા બે બટનો, હેલો અને એરર, રિએક્ટ સાથેની એપ્લિકેશનમાં ફરીથી અમલમાં મૂકીશું. અમે અમારી સ્ટાર્ટર એપ્લિકેશન બનાવીને પ્રારંભ કરીએ છીએ:

npx create-react-app react-app

પછી અમે સંત્રી પેકેજ આયાત કરીએ છીએ:

yarn add @sentry/browser

અને તેને પ્રારંભ કરો:

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

અવલોકનો:

• વિકાસ દરમિયાન, અમારી પાસે કન્સોલ જેવા મુદ્દાઓ પર દેખરેખ રાખવા માટેની અન્ય પદ્ધતિઓ છે, તેથી અમે ફક્ત ઉત્પાદન નિર્માણ માટે સેન્ટ્રીને સક્ષમ કરીએ છીએ.

આગળ અમે અમારા હેલો અને એરર બટનો લાગુ કરીએ છીએ અને તેમને એપ્લિકેશનમાં ઉમેરીએ છીએ:

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;

સમસ્યા (સ્રોત નકશા)

અમે દાખલ કરીને પ્રોડક્શન બિલ્ડ સાથે સંત્રીનું પરીક્ષણ કરી શકીએ છીએ:

yarn build

અને બિલ્ડ ફોલ્ડરમાંથી દાખલ કરો:

npx http-server -c-1

અમે તરત જ જે સમસ્યાનો સામનો કરીએ છીએ તે એ છે કે સેન્ટ્રીના એરર રેકોર્ડ્સ મિનિફાઇડ બેચમાં લાઇન નંબર્સનો સંદર્ભ આપે છે; ખૂબ ઉપયોગી નથી.

સેન્ટ્રી સેવા ભૂલ મળ્યા પછી ઘટાડેલા પેકેટ માટે સ્ત્રોત નકશા ખેંચીને આને સમજાવે છે. આ કિસ્સામાં અમે લોકલહોસ્ટથી ચાલી રહ્યા છીએ (સેન્ટ્રી સેવા દ્વારા ઍક્સેસિબલ નથી).

ઉકેલો (સ્રોત નકશા)

આ સમસ્યાનો ઉકેલ સાર્વજનિક વેબ સર્વરથી એપ્લિકેશન ચલાવવાનો છે. GitHub પૃષ્ઠો સેવાનો ઉપયોગ કરવા માટે એક સરળ જવાબ બટન (મફત). ઉપયોગ કરવાનાં પગલાં સામાન્ય રીતે નીચે મુજબ છે:

1. ફોલ્ડરની સામગ્રીની નકલ કરો બિલ્ડ કરો ફોલ્ડર પર દસ્તાવેજ રીપોઝીટરીની રૂટ ડિરેક્ટરીમાં.

2. ચાલુ કરો ગિટહબ પૃષ્ઠો માં દસ્તાવેજ ફોલ્ડરનો ઉપયોગ કરવા માટે રીપોઝીટરીમાં (GitHub માંથી). માસ્ટર શાખાઓ

3. GitHub માં ફેરફારોને દબાણ કરો

નોંધણી: મારે શું વાપરવાની જરૂર છે તે સમજ્યા પછી બનાવો-બનાવો-એપ એપ્લિકેશન શરૂ કરવા માટે હોમ પેજ ફંક્શન. પેકેજ.જેસનમાં નીચેના ઉમેરવા માટે નીચે આવ્યા:

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

ચાલી રહેલ એપ્લિકેશનનું અંતિમ સંસ્કરણ અહીં ઉપલબ્ધ છે:

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

પકડાયેલ બગ્સનું ચિત્રણ

ચાલો હેલો બટન પર ક્લિક કરીને આગળ વધીએ.

આની જેમ દેખાતી ભૂલ સાથે:

અવલોકનો:

• આ બગ રિપોર્ટ સ્પષ્ટ થઈ શક્યો નથી, BRAVO.

ભૂલો માટે બિનહિસાબીનું ચિત્ર

તેવી જ રીતે, ચાલો બટન ક્લિક કરીને જઈએ ભૂલ.

આની જેમ દેખાતી ભૂલ સાથે:

બિનહિસાબી ભૂલોનું બહેતર સંચાલન (રેન્ડરીંગ)

ભૂલ મર્યાદાનો પરિચય

વપરાશકર્તા ઇન્ટરફેસના ભાગમાં JavaScript ભૂલ સમગ્ર એપ્લિકેશનને તોડી ન શકે. React યુઝર્સ માટે આ સમસ્યાને ઉકેલવા માટે, React 16 "એરર બાઉન્ડ્સ" નામનો નવો કોન્સેપ્ટ રજૂ કરે છે.

ભૂલની સીમાઓ એ પ્રતિક્રિયા ઘટકો છે જે તેમના બાળ ઘટક વૃક્ષમાં ગમે ત્યાં JavaScript ભૂલો પકડે છે, તે ભૂલોને લોગ કરે છે અને ક્રેશ થયેલા ઘટક વૃક્ષને બદલે ફોલબેક UI રેન્ડર કરે છે. ભૂલની સીમાઓ રેન્ડરિંગ દરમિયાન, જીવનચક્રની પદ્ધતિઓમાં અને તેમની નીચેના સમગ્ર વૃક્ષના કન્સ્ટ્રક્ટરમાં ભૂલો પકડે છે.

...

શોધાયેલ ભૂલો માટે નવું વર્તન

આ ફેરફાર નોંધપાત્ર છે. પ્રતિક્રિયા 16 મુજબ, ભૂલો કે જે કોઈપણ ભૂલ સીમા દ્વારા પકડવામાં આવી ન હતી તેના પરિણામે સમગ્ર પ્રતિક્રિયા ઘટક વૃક્ષને અનમાઉન્ટ કરવામાં આવશે.

- ડેન અબ્રામોવ - પ્રતિક્રિયા 16 માં હેન્ડલિંગમાં ભૂલ

એક મહત્વપૂર્ણ સ્પષ્ટતા કે જે મને સમજાયું તે પહેલાં મને થોડો સમય લાગ્યો ઉપરોક્ત વર્તણૂક ફક્ત રેન્ડર પદ્ધતિમાં ફેંકવામાં આવેલી ભૂલો સાથે કામ કરે છે (અથવા જીવનચક્રની કોઈપણ પદ્ધતિમાં વધુ સંભવ છે). ઉદાહરણ તરીકે, ભૂલની સીમાઓનો ઉપયોગ કરવાથી અમારા બટન સાથે કોઈ ફાયદો થશે નહીં ભૂલ; આ ભૂલ ક્લિક હેન્ડલરમાં હતી.

ચાલો એક ઉદાહરણ રેન્ડરીંગ એરર બનાવીએ અને પછી એરર બાઉન્ડનો ઉપયોગ કરીને ભૂલને વધુ આકર્ષક રીતે હેન્ડલ કરીએ.

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

અવલોકન:

• જ્યારે તમે બટન દબાવો છો, પ્રતિક્રિયા દર્શાવવામાં આવશે ફ્લેગ.બસ્ટ્ડ.બોગસ, જે ભૂલ જનરેટ કરે છે

• ભૂલની સીમા વિના, સમગ્ર ઘટક વૃક્ષને અનમાઉન્ટ કરવામાં આવશે

પછી અમે અમારો એરર બાઉન્ડ્રી કોડ લખીએ છીએ (નવી જીવનચક્ર પદ્ધતિનો ઉપયોગ કરે છે componentDidCatch); આ આવશ્યકપણે ડેન અબ્રામોવના લેખમાં આપેલ ઉદાહરણ છે:

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

અંતે અમે આ ઘટકનો ઉપયોગ કરીએ છીએ:

react-app/src/App.js

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

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

જો કે, રેન્ડર એરર બટનને ક્લિક કરવાથી ફોલબેક UI પ્રદર્શિત થાય છે અને સેન્ટ્રીને ભૂલની જાણ થાય છે.

સમાપ્તિ

મને આશા છે કે તમને આ મદદરૂપ લાગ્યું.

PS મૂળ સાથે લિંક

સંત્રી દ્વારા પીએસ ટેલિગ્રામ ચેટ https://t.me/sentry_ru

સોર્સ: www.habr.com