ਰਿਐਕਟ ਫਰੰਟਐਂਡ ਐਪਲੀਕੇਸ਼ਨਾਂ ਵਿੱਚ ਬੱਗਾਂ ਦੀ ਸੰਤਰੀ ਰਿਮੋਟ ਨਿਗਰਾਨੀ

ਅਸੀਂ Sentry with React ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਪੜਚੋਲ ਕਰ ਰਹੇ ਹਾਂ।

ਇਹ ਲੇਖ ਇੱਕ ਉਦਾਹਰਨ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਸੰਤਰੀ ਗਲਤੀਆਂ ਦੀ ਰਿਪੋਰਟ ਕਰਨ ਨਾਲ ਸ਼ੁਰੂ ਹੋਣ ਵਾਲੀ ਲੜੀ ਦਾ ਹਿੱਸਾ ਹੈ: 1 ਦਾ ਹਿੱਸਾ.

ਪ੍ਰਤੀਕਿਰਿਆ ਨੂੰ ਲਾਗੂ ਕਰਨਾ

ਪਹਿਲਾਂ ਸਾਨੂੰ ਇਸ ਐਪਲੀਕੇਸ਼ਨ ਲਈ ਇੱਕ ਨਵਾਂ ਸੰਤਰੀ ਪ੍ਰੋਜੈਕਟ ਜੋੜਨ ਦੀ ਲੋੜ ਹੈ; ਸੰਤਰੀ ਵੈਬਸਾਈਟ ਤੋਂ. ਇਸ ਕੇਸ ਵਿੱਚ ਅਸੀਂ React ਨੂੰ ਚੁਣਦੇ ਹਾਂ।

ਅਸੀਂ ਆਪਣੇ ਦੋ ਬਟਨਾਂ, ਹੈਲੋ ਅਤੇ ਐਰਰ ਨੂੰ ਰੀਐਕਟ ਦੇ ਨਾਲ ਇੱਕ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਦੁਬਾਰਾ ਲਾਗੂ ਕਰਾਂਗੇ। ਅਸੀਂ ਆਪਣੀ ਸਟਾਰਟਰ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾ ਕੇ ਸ਼ੁਰੂ ਕਰਦੇ ਹਾਂ:

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 ਗਲਤੀ ਨੂੰ ਪੂਰੀ ਐਪਲੀਕੇਸ਼ਨ ਨੂੰ ਨਹੀਂ ਤੋੜਨਾ ਚਾਹੀਦਾ ਹੈ। React ਉਪਭੋਗਤਾਵਾਂ ਲਈ ਇਸ ਸਮੱਸਿਆ ਨੂੰ ਹੱਲ ਕਰਨ ਲਈ, React 16 ਇੱਕ ਨਵਾਂ ਸੰਕਲਪ ਪੇਸ਼ ਕਰਦਾ ਹੈ ਜਿਸਨੂੰ "error bounds" ਕਿਹਾ ਜਾਂਦਾ ਹੈ।

ਗਲਤੀ ਸੀਮਾਵਾਂ ਉਹ ਪ੍ਰਤੀਕਿਰਿਆ ਵਾਲੇ ਭਾਗ ਹਨ ਜੋ ਆਪਣੇ ਚਾਈਲਡ ਕੰਪੋਨੈਂਟ ਟ੍ਰੀ ਵਿੱਚ ਕਿਤੇ ਵੀ 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,
    });
  }
}

ਨਿਰੀਖਣ:

• ਜਦੋਂ ਤੁਸੀਂ ਬਟਨ ਦਬਾਉਂਦੇ ਹੋ, ਪ੍ਰਤੀਕਿਰਿਆ ਪ੍ਰਦਰਸ਼ਿਤ ਕੀਤਾ ਜਾਵੇਗਾ flag.busted.bogus, ਜੋ ਇੱਕ ਤਰੁੱਟੀ ਪੈਦਾ ਕਰਦਾ ਹੈ

• ਇੱਕ ਗਲਤੀ ਸੀਮਾ ਦੇ ਬਿਨਾਂ, ਪੂਰੇ ਕੰਪੋਨੈਂਟ ਟ੍ਰੀ ਨੂੰ ਅਨਮਾਊਂਟ ਕੀਤਾ ਜਾਵੇਗਾ

ਫਿਰ ਅਸੀਂ ਆਪਣਾ ਗਲਤੀ ਸੀਮਾ ਕੋਡ ਲਿਖਦੇ ਹਾਂ (ਨਵੇਂ ਜੀਵਨ ਚੱਕਰ ਵਿਧੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ componentDidCatch); ਇਹ ਅਸਲ ਵਿੱਚ ਡੈਨ ਅਬਰਾਮੋਵ ਦੇ ਲੇਖ ਵਿੱਚ ਦਿੱਤੀ ਗਈ ਉਦਾਹਰਣ ਹੈ:

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