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

நாங்கள் React உடன் Sentry ஐப் பயன்படுத்தி ஆராய்ந்து வருகிறோம்.

இந்தக் கட்டுரை, சென்ட்ரி பிழை அறிக்கையிடலுடன் தொடங்கும் தொடரின் ஒரு பகுதியாகும், இது உதாரணத்தைப் பயன்படுத்தி: பகுதி 1.

எதிர்வினை செயல்படுத்தல்

முதலில், இந்த பயன்பாட்டிற்கு Sentry வலைத்தளத்திலிருந்து ஒரு புதிய Sentry திட்டத்தைச் சேர்க்க வேண்டும். இந்த விஷயத்தில், நாம் React ஐத் தேர்ந்தெடுப்போம்.

ஒரு React செயலியில் நமது இரண்டு பொத்தான்களான Hello மற்றும் Error-ஐ மீண்டும் செயல்படுத்துவோம். நமது தொடக்க செயலியை உருவாக்குவதன் மூலம் தொடங்குவோம்:

npx create-react-app react-app

அடுத்து நாம் சென்ட்ரி தொகுப்பை இறக்குமதி செய்கிறோம்:

yarn add @sentry/browser

மற்றும் அதை துவக்கவும்:

ரியாக்ட்-ஆப்/src/index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

கவனிப்புகள்:

• மேம்பாட்டின் போது, ​​கன்சோல் போன்ற சிக்கல்களைக் கண்காணிப்பதற்கான பிற வழிமுறைகள் எங்களிடம் உள்ளன, எனவே உற்பத்தி கட்டமைப்புகளுக்கு மட்டுமே சென்ட்ரியை இயக்குகிறோம்.

அடுத்து, எங்கள் ஹலோ மற்றும் பிழை பொத்தான்களை செயல்படுத்தி அவற்றை பயன்பாட்டில் சேர்க்கிறோம்:

ரியாக்ட்-ஆப்/src/ஹலோ.ஜேஎஸ்

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

ரியாக்ட்-ஆப்/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');
  }
}

ரியாக்ட்-ஆப்/src/ஆப்.ஜேஎஸ்

...
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/

பிடிபட்ட வண்டுகளின் விளக்கம்

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

பின்வருமாறு தோன்றும் பிழையுடன்:

கவனிப்புகள்:

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

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

இதேபோல், பொத்தானை அழுத்தவும். பிழை.

பின்வருமாறு தோன்றும் பிழையுடன்:

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

பிழை எல்லைகளின் அறிமுகம்

ஒரு UI உறுப்பில் உள்ள ஜாவாஸ்கிரிப்ட் பிழை முழு பயன்பாட்டையும் சீர்குலைக்கக்கூடாது. React பயனர்களுக்கு இந்த சிக்கலை தீர்க்க, React 16 "பிழை எல்லைகள்" என்ற புதிய கருத்தை அறிமுகப்படுத்துகிறது.

பிழை எல்லைகள் என்பது ரியாக்ட் கூறுகள் ஆகும், அவை அவற்றின் சைல்டு கூறு மரத்தில் எங்கும் ஜாவாஸ்கிரிப்ட் பிழைகளைப் பிடித்து, இந்தப் பிழைகளைப் பதிவுசெய்து, செயலிழந்த கூறு மரத்திற்குப் பதிலாக ஒரு ஃபால்பேக் UI ஐக் காண்பிக்கும். பிழை எல்லைகள் ரெண்டரிங் செய்யும் போது, ​​வாழ்க்கைச் சுழற்சி முறைகளில் மற்றும் அவற்றின் கீழே உள்ள முழு மரத்திலும் உள்ள கட்டமைப்பாளர்களில் பிழைகளைப் பிடிக்கின்றன.

...

கண்டறியப்படாத பிழைகளுக்கான புதிய நடத்தை

இந்த மாற்றம் குறிப்பிடத்தக்கது. React 16 இல் தொடங்கி, எந்த பிழை எல்லையாலும் பிடிக்கப்படாத பிழைகள் முழு React கூறு மரத்தையும் அகற்றும்.

- டான் அப்ரமோவ் — ரியாக்ட் 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,
    });
  }
}

கவனிப்பு:

• நீங்கள் பொத்தானை அழுத்தும்போது, வினை காண்பிக்கப்படும் கொடி.முறிக்கப்பட்டது.போலி, இது ஒரு பிழையை உருவாக்குகிறது

• பிழை எல்லை இல்லாமல், முழு கூறு மரமும் அகற்றப்படும்.

பின்னர் நாம் நமது பிழை எல்லைக் குறியீட்டை எழுதுகிறோம் (புதிய வாழ்க்கைச் சுழற்சி முறையைப் பயன்படுத்துகிறது) கூறுடிட்கேட்ச்); இது அடிப்படையில் டான் அப்ரமோவின் கட்டுரையில் கொடுக்கப்பட்டுள்ள உதாரணம்:

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

இறுதியாக, நாங்கள் இந்த கூறுகளைப் பயன்படுத்துகிறோம்:

ரியாக்ட்-ஆப்/src/ஆப்.ஜேஎஸ்

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

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

இருப்பினும், ரெண்டர் பிழை பொத்தானைக் கிளிக் செய்வது ஃபால்பேக் UI ஐக் காண்பிக்கும் மற்றும் சென்ட்ரி பிழையைப் புகாரளிக்கும்.

நிறைவு

இது உங்களுக்கு உதவியாக இருக்கும் என்று நம்புகிறேன்.

சோசலிஸ்ட் கட்சி அசல் கோப்புக்கான இணைப்பு

சென்ட்ரியில் பி.எஸ். டெலிகிராம் அரட்டை https://t.me/sentry_ru

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