ரியாக்ட் ஃப்ரென்டென்ட் பயன்பாடுகளில் உள்ள பிழைகளை சென்ட்ரி ரிமோட் கண்காணிப்பு

சென்ட்ரி வித் ரியாக்டைப் பயன்படுத்தி ஆராய்ந்து வருகிறோம்.

இந்த கட்டுரை ஒரு உதாரணத்தைப் பயன்படுத்தி சென்ட்ரி பிழைகளைப் புகாரளிப்பதில் தொடங்கும் தொடரின் ஒரு பகுதியாகும்: பகுதி 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 இல் மாற்றங்களை அழுத்தவும்

கருத்து: நான் எதைப் பயன்படுத்த வேண்டும் என்பதைக் கண்டுபிடித்த பிறகு உருவாக்கு-உருவாக்கு-பயன்பாடு பயன்பாட்டைத் தொடங்க முகப்புப் பக்க செயல்பாடு. Package.json இல் பின்வருவனவற்றைச் சேர்ப்பதில் இறங்கியது:

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

இயங்கும் பயன்பாட்டின் இறுதி பதிப்பு இங்கே கிடைக்கிறது:

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

பிடிபட்ட பிழைகளின் விளக்கம்

ஹலோ பொத்தானைக் கிளிக் செய்வதன் மூலம் நடப்போம்.

இப்படி தோன்றும் பிழையுடன்:

அவதானிப்புகள்:

• இந்த பிழை அறிக்கை தெளிவாக இருக்க முடியாது, பிராவோ.

கணக்கிடப்படாத பிழைகளின் விளக்கம்

அதேபோல், பொத்தானைக் கிளிக் செய்வதன் மூலம் செல்லலாம் பிழை.

இப்படி தோன்றும் பிழையுடன்:

கணக்கிடப்படாத பிழைகளை சிறப்பாகக் கையாளுதல் (ரெண்டரிங்)

பிழை வரம்புகளின் அறிமுகம்

பயனர் இடைமுகத்தின் ஒரு பகுதியில் JavaScript பிழையானது முழு பயன்பாட்டையும் உடைக்கக்கூடாது. ரியாக்ட் பயனர்களுக்கு இந்த சிக்கலை தீர்க்க, ரியாக்ட் 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 டெலிகிராம் அரட்டை https://t.me/sentry_ru

ஆதாரம்: www.habr.com