ರಿಯಾಕ್ಟ್ ಫ್ರಂಟ್‌ಎಂಡ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಬಗ್‌ಗಳ ಸೆಂಟ್ರಿ ರಿಮೋಟ್ ಮಾನಿಟರಿಂಗ್

ನಾವು ಸೆಂಟ್ರಿ ವಿತ್ ರಿಯಾಕ್ಟ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಅನ್ವೇಷಿಸುತ್ತಿದ್ದೇವೆ.

ಈ ಲೇಖನವು ಉದಾಹರಣೆಯನ್ನು ಬಳಸಿಕೊಂಡು ಸೆಂಟ್ರಿ ದೋಷಗಳನ್ನು ವರದಿ ಮಾಡುವುದರೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುವ ಸರಣಿಯ ಭಾಗವಾಗಿದೆ: ಭಾಗ 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 ಗೆ ಬದಲಾವಣೆಗಳನ್ನು ಒತ್ತಿರಿ

ಹೇಳಿಕೆಯನ್ನು: ನಾನು ಏನು ಬಳಸಬೇಕೆಂದು ನಾನು ಕಂಡುಕೊಂಡ ನಂತರ ಅಪ್ಲಿಕೇಶನ್ ರಚಿಸಿ-ರಚಿಸಿ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ಮುಖಪುಟ ಕಾರ್ಯ. ಪ್ಯಾಕೇಜ್.json ಗೆ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಸೇರಿಸಲು ಇಳಿದಿದೆ:

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

ಚಾಲನೆಯಲ್ಲಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ನ ಅಂತಿಮ ಆವೃತ್ತಿಯು ಇಲ್ಲಿ ಲಭ್ಯವಿದೆ:

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

ಸಿಕ್ಕಿಬಿದ್ದ ಬಗ್‌ಗಳ ವಿವರಣೆ

ಹಲೋ ಬಟನ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡುವುದರ ಮೂಲಕ ನಡೆಯೋಣ.

ಈ ರೀತಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ದೋಷದೊಂದಿಗೆ:

ಅವಲೋಕನಗಳು:

• ಈ ದೋಷ ವರದಿಯು ಸ್ಪಷ್ಟವಾಗಿರಲು ಸಾಧ್ಯವಿಲ್ಲ, ಬ್ರಾವೋ.

ಲೆಕ್ಕಕ್ಕೆ ಸಿಗದ ದೋಷಗಳ ವಿವರಣೆ

ಅಂತೆಯೇ, ಬಟನ್ ಕ್ಲಿಕ್ ಮೂಲಕ ಹೋಗೋಣ ದೋಷ.

ಈ ರೀತಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ದೋಷದೊಂದಿಗೆ:

ಲೆಕ್ಕಕ್ಕೆ ಸಿಗದ ದೋಷಗಳ ಉತ್ತಮ ನಿರ್ವಹಣೆ (ರೆಂಡರಿಂಗ್)

ದೋಷ ಮಿತಿಗಳ ಪರಿಚಯ

ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ನ ಭಾಗದಲ್ಲಿರುವ JavaScript ದೋಷವು ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಮುರಿಯಬಾರದು. ರಿಯಾಕ್ಟ್ ಬಳಕೆದಾರರಿಗೆ ಈ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು, ರಿಯಾಕ್ಟ್ 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,
    });
  }
}

ವೀಕ್ಷಣೆ:

• ನೀವು ಗುಂಡಿಯನ್ನು ಒತ್ತಿದಾಗ, ಪ್ರತಿಕ್ರಿಯಿಸು ಪ್ರದರ್ಶಿಸಲಾಗುವುದು ಧ್ವಜ.ಬಸ್ಟೆಡ್.ಬೋಗಸ್, ಇದು ದೋಷವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ

• ದೋಷ ಗಡಿಯಿಲ್ಲದೆ, ಸಂಪೂರ್ಣ ಘಟಕ ಟ್ರೀ ಅನ್ನು ಅನ್‌ಮೌಂಟ್ ಮಾಡಲಾಗುತ್ತದೆ

ನಂತರ ನಾವು ನಮ್ಮ ದೋಷ ಗಡಿ ಕೋಡ್ ಅನ್ನು ಬರೆಯುತ್ತೇವೆ (ಹೊಸ ಜೀವನಚಕ್ರ ವಿಧಾನವನ್ನು ಬಳಸುತ್ತದೆ ಘಟಕ ಡಿಡ್ ಕ್ಯಾಚ್); ಇದು ಮೂಲಭೂತವಾಗಿ ಡಾನ್ ಅಬ್ರಮೊವ್ ಅವರ ಲೇಖನದಲ್ಲಿ ನೀಡಲಾದ ಉದಾಹರಣೆಯಾಗಿದೆ:

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 ಅನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ ಮತ್ತು ಸೆಂಟ್ರಿಗೆ ದೋಷವನ್ನು ವರದಿ ಮಾಡುತ್ತದೆ.

ಪೂರ್ಣಗೊಂಡಿದೆ

ಇದು ನಿಮಗೆ ಸಹಾಯಕವಾಗಿದೆಯೆಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.

ಪಿಎಸ್ ಮೂಲಕ್ಕೆ ಲಿಂಕ್ ಮಾಡಿ

ಸೆಂಟ್ರಿ ಮೂಲಕ ಪಿಎಸ್ ಟೆಲಿಗ್ರಾಮ್ ಚಾಟ್ https://t.me/sentry_ru

ಮೂಲ: www.habr.com