రియాక్ట్ ఫ్రంటెండ్ అప్లికేషన్‌లలో బగ్‌ల సెంట్రీ రిమోట్ పర్యవేక్షణ

మేము 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 పేజీలు డాక్స్ ఫోల్డర్‌ను ఉపయోగించడానికి రిపోజిటరీలో (GitHub నుండి). మాస్టర్ శాఖలు

3. GitHubకి మార్పులను పుష్ చేయండి

వ్యాఖ్య: నేను ఏమి ఉపయోగించాలో కనుగొన్న తర్వాత సృష్టించు-సృష్టించు-యాప్ అప్లికేషన్‌ను ప్రారంభించడానికి హోమ్ పేజీ ఫంక్షన్. ప్యాకేజీ.jsonకి కింది వాటిని జోడించడం జరిగింది:

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

అమలవుతున్న అప్లికేషన్ యొక్క చివరి వెర్షన్ ఇక్కడ అందుబాటులో ఉంది:

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

క్యాచ్ బగ్స్ యొక్క ఇలస్ట్రేషన్

హలో బటన్‌ను క్లిక్ చేయడం ద్వారా నడుద్దాం.

ఈ విధంగా కనిపించే లోపంతో:

పరిశీలనలు:

• ఈ బగ్ రిపోర్ట్ స్పష్టంగా లేదు, బ్రావో.

లోపాల కోసం లెక్కించబడని ఉదాహరణ

అలాగే, బటన్ క్లిక్ ద్వారా వెళ్దాం లోపం.

ఈ విధంగా కనిపించే లోపంతో:

లెక్కించబడని లోపాలను మెరుగ్గా నిర్వహించడం (రెండరింగ్)

దోష పరిమితుల పరిచయం

వినియోగదారు ఇంటర్‌ఫేస్‌లో భాగంగా జావాస్క్రిప్ట్ లోపం మొత్తం అప్లికేషన్‌ను విచ్ఛిన్నం చేయకూడదు. రియాక్ట్ వినియోగదారుల కోసం ఈ సమస్యను పరిష్కరించడానికి, రియాక్ట్ 16 "ఎర్రర్ హౌండ్స్" అనే కొత్త కాన్సెప్ట్‌ను పరిచయం చేసింది.

ఎర్రర్ సరిహద్దులు అనేవి రియాక్ట్ కాంపోనెంట్‌లు, ఇవి తమ చైల్డ్ కాంపోనెంట్ ట్రీలో ఎక్కడైనా జావాస్క్రిప్ట్ లోపాలను క్యాచ్ చేస్తాయి, ఆ లోపాలను లాగ్ చేస్తాయి మరియు క్రాష్ అయిన కాంపోనెంట్ ట్రీకి బదులుగా ఫాల్‌బ్యాక్ 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,
    });
  }
}

పరిశీలన:

• మీరు బటన్‌ను నొక్కినప్పుడు, స్పందించలేదు ప్రదర్శించబడుతుంది జెండా.బస్టెడ్.బోగస్, ఇది లోపాన్ని సృష్టిస్తుంది

• లోపం సరిహద్దు లేకుండా, మొత్తం కాంపోనెంట్ ట్రీ అన్‌మౌంట్ చేయబడుతుంది

అప్పుడు మేము మా లోపం సరిహద్దు కోడ్‌ను వ్రాస్తాము (కొత్త జీవితచక్ర పద్ధతిని ఉపయోగిస్తుంది భాగంDidCatch); ఇది తప్పనిసరిగా డాన్ అబ్రమోవ్ యొక్క వ్యాసంలో ఇవ్వబడిన ఉదాహరణ:

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 అసలైన దానికి లింక్

సెంట్రీ ద్వారా PS టెలిగ్రామ్ చాట్ https://t.me/sentry_ru

మూలం: www.habr.com