ප්‍රතික්‍රියා ඉදිරිපස යෙදුම්වල ඇති දෝෂ පිළිබඳ සෙන්ට්‍රි දුරස්ථ නිරීක්‍ෂණය

අපි Sentry with React භාවිතයෙන් ගවේෂණය කරමින් සිටිමු.

මෙම ලිපිය උදාහරණයක් භාවිතා කරමින් Sentry දෝෂ වාර්තා කිරීමෙන් ආරම්භ වන මාලාවක කොටසකි: 1 කොටස.

ප්රතික්රියාව ක්රියාත්මක කිරීම

මුලින්ම අපි මෙම යෙදුම සඳහා නව Sentry ව්‍යාපෘතියක් එක් කළ යුතුයි; Sentry වෙබ් අඩවියෙන්. මෙම අවස්ථාවේදී අපි React තෝරා ගනිමු.

අපි අපගේ බොත්තම් දෙක, Hello සහ Error, React සහිත යෙදුමක නැවත ක්‍රියාත්මක කරන්නෙමු. අපගේ ආරම්භක යෙදුම නිර්මාණය කිරීමෙන් අපි ආරම්භ කරමු:

npx create-react-app react-app

ඉන්පසු අපි Sentry පැකේජය ආයාත කරමු:

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

නිරීක්ෂණ:

• සංවර්ධනය අතරතුර, කොන්සෝලය වැනි ගැටළු නිරීක්ෂණය කිරීම සඳහා අපට වෙනත් යාන්ත්‍රණ ඇත, එබැවින් අපි නිෂ්පාදන ගොඩනැගීම් සඳහා පමණක් Sentry සක්‍රීය කරමු.

මීළඟට අපි අපගේ Hello සහ Error බොත්තම් ක්‍රියාත්මක කර ඒවා යෙදුමට එක් කරන්නෙමු:

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;

ගැටලුව (මූලාශ්‍ර සිතියම්)

ඇතුළත් කිරීමෙන් අපට නිෂ්පාදන ගොඩනැගීමක් සමඟ Sentry පරීක්ෂා කළ හැකිය:

yarn build

සහ ගොඩනැගීමේ ෆෝල්ඩරයෙන් ඇතුල් කරන්න:

npx http-server -c-1

අප වහාම පැනනගින ගැටලුව නම්, Sentry ගේ දෝෂ වාර්තා minified batch හි රේඛා අංක වෙත යොමු වීමයි; ඉතා ප්රයෝජනවත් නොවේ.

Sentry සේවාව දෝෂයක් ලැබීමෙන් පසු අඩු කළ පැකට්ටුව සඳහා මූලාශ්‍ර සිතියම් ඇදීමෙන් මෙය පැහැදිලි කරයි. මෙම අවස්ථාවෙහිදී අප ධාවනය කරන්නේ localhost වෙතින් (Sentry සේවාව මගින් ප්‍රවේශ විය නොහැක).

විසඳුම් (මූලාශ්‍ර සිතියම්)

මෙම ගැටලුවට විසඳුම වන්නේ පොදු වෙබ් සේවාදායකයකින් යෙදුම ධාවනය කිරීමයි. GitHub පිටු සේවාව භාවිතා කිරීමට එක් සරල පිළිතුරු බොත්තමක් (නොමිලේ). භාවිතා කිරීමට පියවර සාමාන්යයෙන් පහත පරිදි වේ:

1. ෆෝල්ඩරයේ අන්තර්ගතය පිටපත් කරන්න ගොඩනගා ගන්න ෆෝල්ඩරයට වාසුගේ ඉල්ලීමට ගබඩාවේ මූල නාමාවලියෙහි.

2. ක්රියාත්මක කරන්න GitHub පිටු ගබඩාවේ (GitHub වෙතින්) docs ෆෝල්ඩරය භාවිතා කිරීමට ස්වාමියා අතු

3. GitHub වෙත වෙනස්කම් තල්ලු කරන්න

අදහස් දැක්වීම්: මම භාවිතා කළ යුතු දේ සොයා ගැනීමෙන් පසුව නිර්මාණය-නිර්මාණය-යෙදුම යෙදුම දියත් කිරීමට මුල් පිටුව කාර්යය. Package.json වෙත පහත සඳහන් දෑ එක් කිරීමට පැමිණියේය:

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

ධාවනය වන යෙදුමේ අවසාන අනුවාදය ලබා ගත හැක්කේ:

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

හසු වූ දෝෂ පිළිබඳ නිදර්ශනය

අපි Hello බොත්තම ක්ලික් කිරීමෙන් ගමන් කරමු.

මෙලෙස දිස්වන දෝෂයක් සමඟ:

නිරීක්ෂණ:

• මෙම දෝෂ වාර්තාව පැහැදිලි විය නොහැක, බ්‍රාවෝ.

ගණනය නොකළ දෝෂ පිළිබඳ නිදර්ශනය

ඒ හා සමානව, අපි බොත්තම ක්ලික් කිරීම හරහා යමු දෝෂ.

මෙලෙස දිස්වන දෝෂයක් සමඟ:

ගණන් නොගත් දෝෂ වඩා හොඳින් හැසිරවීම (විදැහුම්කරණය)

දෝෂ සීමාවන් හඳුන්වාදීම

පරිශීලක අතුරුමුහුණතේ කොටසක ජාවාස්ක්‍රිප්ට් දෝෂයක් සම්පූර්ණ යෙදුම බිඳ නොදැමිය යුතුය. ප්‍රතික්‍රියා පරිශීලකයින් සඳහා මෙම ගැටළුව විසඳීම සඳහා, ප්‍රතික්‍රියා 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,
    });
  }
}

නිරීක්ෂණය:

• ඔබ බොත්තම එබූ විට, React පෙන්වනු ඇත ධජය.බස්ටින්.බොගස්, එය දෝෂයක් ජනනය කරයි

• දෝෂ මායිමකින් තොරව, සම්පූර්ණ සංරචක ගස ඉවත් කරනු ලැබේ

එවිට අපි අපගේ දෝෂ මායිම් කේතය ලියන්නෙමු (නව ජීවන චක්‍ර ක්‍රමය භාවිතා කරයි සංරචක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>
    );
  }
}
...

කෙසේ වෙතත්, Render Error බොත්තම ක්ලික් කිරීමෙන් පසුබැසීමේ UI දර්ශනය වන අතර Sentry වෙත දෝෂයක් වාර්තා කරයි.

සම්පූර්ණ කිරීම

ඔබට මෙය ප්‍රයෝජනවත් වූ බව මම විශ්වාස කරමි.

ප්රාදේශීය සභා මුල් පිටපතට සබැඳිය

PS Telegram කතාබස් Sentry හරහා https://t.me/sentry_ru

මූලාශ්රය: www.habr.com