Sentry ਵਰਤ ਕੇ ਇੱਕ React ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਤਰੁੱਟੀਆਂ ਨੂੰ ਟਰੈਕ ਕਰਨਾ

ਅੱਜ ਮੈਂ ਤੁਹਾਨੂੰ ਰੀਐਕਟ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਰੀਅਲ-ਟਾਈਮ ਐਰਰ ਟ੍ਰੈਕਿੰਗ ਬਾਰੇ ਦੱਸਾਂਗਾ। ਇੱਕ ਫਰੰਟ-ਐਂਡ ਐਪਲੀਕੇਸ਼ਨ ਆਮ ਤੌਰ 'ਤੇ ਗਲਤੀ ਟਰੈਕਿੰਗ ਲਈ ਨਹੀਂ ਵਰਤੀ ਜਾਂਦੀ ਹੈ। ਕੁਝ ਕੰਪਨੀਆਂ ਅਕਸਰ ਬੱਗ ਟਰੈਕਿੰਗ ਨੂੰ ਬੰਦ ਕਰ ਦਿੰਦੀਆਂ ਹਨ, ਦਸਤਾਵੇਜ਼ਾਂ, ਟੈਸਟਾਂ, ਆਦਿ ਤੋਂ ਬਾਅਦ ਇਸ 'ਤੇ ਵਾਪਸ ਆਉਂਦੀਆਂ ਹਨ। ਹਾਲਾਂਕਿ, ਜੇ ਤੁਸੀਂ ਆਪਣੇ ਉਤਪਾਦ ਨੂੰ ਬਿਹਤਰ ਲਈ ਬਦਲ ਸਕਦੇ ਹੋ, ਤਾਂ ਬੱਸ ਇਹ ਕਰੋ!

1. ਤੁਹਾਨੂੰ ਸੰਤਰੀ ਦੀ ਲੋੜ ਕਿਉਂ ਹੈ?

ਮੈਂ ਮੰਨਦਾ ਹਾਂ ਕਿ ਤੁਸੀਂ ਉਤਪਾਦਨ ਦੇ ਦੌਰਾਨ ਬੱਗਾਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਵਿੱਚ ਦਿਲਚਸਪੀ ਰੱਖਦੇ ਹੋ

ਕੀ ਤੁਹਾਨੂੰ ਲਗਦਾ ਹੈ ਕਿ ਇਹ ਕਾਫ਼ੀ ਨਹੀਂ ਹੈ?

ਠੀਕ ਹੈ, ਆਓ ਵੇਰਵੇ ਨੂੰ ਵੇਖੀਏ.

ਡਿਵੈਲਪਰਾਂ ਲਈ ਸੰਤਰੀ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੇ ਪ੍ਰਮੁੱਖ ਕਾਰਨ:

• ਗਲਤੀਆਂ ਵਾਲੇ ਕੋਡ ਨੂੰ ਤੈਨਾਤ ਕਰਨ ਵੇਲੇ ਤੁਹਾਨੂੰ ਜੋਖਮਾਂ ਤੋਂ ਬਚਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ
• ਕੋਡ ਟੈਸਟਿੰਗ ਵਿੱਚ QA ਦੀ ਮਦਦ ਕਰੋ
• ਸਮੱਸਿਆਵਾਂ ਬਾਰੇ ਤੁਰੰਤ ਸੂਚਨਾਵਾਂ ਪ੍ਰਾਪਤ ਕਰੋ
• ਗਲਤੀਆਂ ਨੂੰ ਜਲਦੀ ਠੀਕ ਕਰਨ ਦੀ ਸਮਰੱਥਾ
• ਐਡਮਿਨ ਪੈਨਲ ਵਿੱਚ ਤਰੁੱਟੀਆਂ ਦਾ ਇੱਕ ਸੁਵਿਧਾਜਨਕ ਪ੍ਰਦਰਸ਼ਨ ਪ੍ਰਾਪਤ ਕਰਨਾ
• ਉਪਭੋਗਤਾ/ਬ੍ਰਾਊਜ਼ਰ ਹਿੱਸੇ ਦੁਆਰਾ ਤਰੁੱਟੀਆਂ ਨੂੰ ਛਾਂਟੋ

ਸੀਈਓ/ਲੀਡ ਪ੍ਰੋਜੈਕਟ ਦੇ ਮੁੱਖ ਕਾਰਨ

• ਪੈਸੇ ਬਚਾਓ (ਸੈਂਟਰੀ ਤੁਹਾਡੇ ਸਰਵਰਾਂ 'ਤੇ ਸਥਾਪਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ)
• ਉਪਭੋਗਤਾ ਫੀਡਬੈਕ ਪ੍ਰਾਪਤ ਕਰਨਾ
• ਅਸਲ ਸਮੇਂ ਵਿੱਚ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕੀ ਗਲਤ ਹੈ ਨੂੰ ਸਮਝਣਾ
• ਤੁਹਾਡੀ ਐਪ ਨਾਲ ਲੋਕਾਂ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਸਮਝਣਾ
• ਉਹਨਾਂ ਥਾਵਾਂ ਨੂੰ ਲੱਭਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰੋ ਜਿੱਥੇ ਤੁਹਾਡੇ ਵਿਕਾਸਕਾਰਾਂ ਨੇ ਗਲਤੀਆਂ ਕੀਤੀਆਂ ਹਨ

ਮੈਨੂੰ ਲਗਦਾ ਹੈ ਕਿ ਡਿਵੈਲਪਰ ਪਹਿਲਾਂ ਇਸ ਲੇਖ ਵਿੱਚ ਦਿਲਚਸਪੀ ਲੈਣਗੇ. ਤੁਸੀਂ ਆਪਣੇ ਮਾਲਕਾਂ ਨੂੰ ਸੰਤਰੀ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਲਈ ਮਨਾਉਣ ਲਈ ਕਾਰਨਾਂ ਦੀ ਇਸ ਸੂਚੀ ਦੀ ਵਰਤੋਂ ਵੀ ਕਰ ਸਕਦੇ ਹੋ।

ਕਾਰੋਬਾਰੀ ਸੂਚੀ 'ਤੇ ਆਖਰੀ ਆਈਟਮ ਨਾਲ ਸਾਵਧਾਨ ਰਹੋ।

ਕੀ ਤੁਸੀਂ ਪਹਿਲਾਂ ਹੀ ਦਿਲਚਸਪੀ ਰੱਖਦੇ ਹੋ?

ਸੰਤਰੀ ਕੀ ਹੈ?

Sentry ਇੱਕ ਓਪਨ ਸੋਰਸ ਬੱਗ ਟਰੈਕਿੰਗ ਐਪਲੀਕੇਸ਼ਨ ਹੈ ਜੋ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਰੀਅਲ ਟਾਈਮ ਵਿੱਚ ਕ੍ਰੈਸ਼ਾਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਅਤੇ ਠੀਕ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦੀ ਹੈ। ਇਹ ਨਾ ਭੁੱਲੋ ਕਿ ਐਪਲੀਕੇਸ਼ਨ ਤੁਹਾਨੂੰ ਕੁਸ਼ਲਤਾ ਵਧਾਉਣ ਅਤੇ ਉਪਭੋਗਤਾ ਅਨੁਭਵ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ। Sentry JavaScript, Node, Python, PHP, Ruby, Java ਅਤੇ ਹੋਰ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ।

2. ਲੌਗਇਨ ਕਰੋ ਅਤੇ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ

• ਆਪਣਾ ਸੰਤਰੀ ਖਾਤਾ ਖੋਲ੍ਹੋ। ਤੁਹਾਨੂੰ ਲਾਗਇਨ ਕਰਨਾ ਪੈ ਸਕਦਾ ਹੈ। (ਕਿਰਪਾ ਕਰਕੇ ਨੋਟ ਕਰੋ ਕਿ ਸੰਤਰੀ ਤੁਹਾਡੇ ਸਰਵਰਾਂ ਤੇ ਸਥਾਪਿਤ ਕੀਤੀ ਜਾ ਸਕਦੀ ਹੈ)
• ਅਗਲਾ ਕਦਮ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣਾ ਹੈ
• ਸੂਚੀ ਵਿੱਚੋਂ ਆਪਣੀ ਭਾਸ਼ਾ ਚੁਣੋ। (ਅਸੀਂ ਪ੍ਰਤੀਕਿਰਿਆ ਦੀ ਚੋਣ ਕਰਨ ਜਾ ਰਹੇ ਹਾਂ। "ਪ੍ਰੋਜੈਕਟ ਬਣਾਓ" 'ਤੇ ਕਲਿੱਕ ਕਰੋ)

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

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

ਤੁਹਾਨੂੰ ਅੱਗੇ ਕੀ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਇਹ ਪਤਾ ਲਗਾਉਣ ਵਿੱਚ ਤੁਹਾਡੀ ਮਦਦ ਕਰਨ ਲਈ ਸੰਤਰੀ ਕੋਲ ਇੱਕ ਮਦਦਗਾਰ ਸਹਾਇਕ ਹੈ। ਤੁਸੀਂ ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰ ਸਕਦੇ ਹੋ। ਮੈਂ ਤੁਹਾਨੂੰ ਦਿਖਾਉਣਾ ਚਾਹੁੰਦਾ ਹਾਂ ਕਿ ਤੁਹਾਡਾ ਪਹਿਲਾ ਐਰਰ ਹੈਂਡਲਰ ਕਿਵੇਂ ਬਣਾਇਆ ਜਾਵੇ। ਬਹੁਤ ਵਧੀਆ, ਅਸੀਂ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਬਣਾਇਆ ਹੈ! ਆਓ ਅਗਲੇ ਪੜਾਅ 'ਤੇ ਚੱਲੀਏ

3. ਪ੍ਰਤੀਕਿਰਿਆ ਅਤੇ ਸੰਤਰੀ ਏਕੀਕਰਣ

ਤੁਹਾਨੂੰ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ npm ਪੈਕੇਜ ਇੰਸਟਾਲ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ।

npm i @sentry/browser

ਆਪਣੇ ਕੰਟੇਨਰ ਵਿੱਚ ਸੰਤਰੀ ਸ਼ੁਰੂ ਕਰੋ:

Sentry.init({
 // dsn: #dsnUrl,
});

DSN ਪ੍ਰੋਜੈਕਟਸ -> ਸੈਟਿੰਗਾਂ -> ਕਲਾਇੰਟ ਕੁੰਜੀਆਂ ਵਿੱਚ ਸਥਿਤ ਹੈ। ਤੁਸੀਂ ਖੋਜ ਪੱਟੀ ਵਿੱਚ ਕਲਾਇੰਟ ਕੁੰਜੀਆਂ ਲੱਭ ਸਕਦੇ ਹੋ।

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. ਪਹਿਲੀ ਗਲਤੀ ਨੂੰ ਟਰੈਕ ਕਰਨਾ

ਉਦਾਹਰਨ ਲਈ, ਮੈਂ ਡੀਜ਼ਰ API ਦੇ ਨਾਲ ਇੱਕ ਸਧਾਰਨ ਸੰਗੀਤ ਐਪਲੀਕੇਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕੀਤੀ. ਤੁਸੀਂ ਇਸਨੂੰ ਦੇਖ ਸਕਦੇ ਹੋ ਇੱਥੇ. ਸਾਨੂੰ ਇੱਕ ਗਲਤੀ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ. ਇੱਕ ਤਰੀਕਾ ਹੈ "ਅਪਰਿਭਾਸ਼ਿਤ" ਸੰਪਤੀ ਤੱਕ ਪਹੁੰਚ ਕਰਨਾ

ਸਾਨੂੰ ਇੱਕ ਬਟਨ ਬਣਾਉਣ ਦੀ ਲੋੜ ਹੈ ਜੋ ਕਾਲ ਕਰਦਾ ਹੈ console.log с user.email. ਇਸ ਕਾਰਵਾਈ ਤੋਂ ਬਾਅਦ ਸਾਨੂੰ ਇੱਕ ਗਲਤੀ ਸੁਨੇਹਾ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ: Uncaught TypeError (ਅਪਰਿਭਾਸ਼ਿਤ ਤੋਂ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਪੜ੍ਹਿਆ ਨਹੀਂ ਜਾ ਸਕਦਾ ਹੈ email) ਗੁੰਮ ਉਪਭੋਗਤਾ ਵਸਤੂ ਦੇ ਕਾਰਨ. ਤੁਸੀਂ ਵੀ ਵਰਤ ਸਕਦੇ ਹੋ Javascript ਅਪਵਾਦ.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

ਪੂਰਾ ਕੰਟੇਨਰ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";

const Search = Input.Search;

const mapState = state => ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https://[email protected]/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div className="App">
        <button
          type="button"
          onClick={() => console.log(user.email)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

ਇਸ ਬਟਨ ਨੂੰ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਤੋਂ ਬਾਅਦ, ਤੁਹਾਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਇਸਦੀ ਜਾਂਚ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

ਸਾਡੀ ਪਹਿਲੀ ਗਲਤੀ ਹੈ

ਹੂ-ਹੂ!

ਜੇਕਰ ਤੁਸੀਂ ਸਿਰਲੇਖ ਦੀ ਗਲਤੀ 'ਤੇ ਕਲਿੱਕ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇੱਕ ਸਟੈਕ ਟਰੇਸ ਵੇਖੋਗੇ।

ਸੁਨੇਹੇ ਬੁਰੇ ਲੱਗਦੇ ਹਨ। ਬੇਸ਼ੱਕ ਅਸੀਂ ਕੋਡ ਕਿੱਥੇ ਹੈ ਇਹ ਸਮਝੇ ਬਿਨਾਂ ਗਲਤੀ ਸੁਨੇਹੇ ਦੇਖੇ ਹਨ। ਮੂਲ ਰੂਪ ਵਿੱਚ ਅਸੀਂ ReactJS ਵਿੱਚ ਸਰੋਤ ਨਕਸ਼ੇ ਬਾਰੇ ਗੱਲ ਕਰ ਰਹੇ ਹਾਂ ਕਿਉਂਕਿ ਉਹ ਕੌਂਫਿਗਰ ਨਹੀਂ ਕੀਤੇ ਗਏ ਹਨ।

ਮੈਂ ਸਰੋਤ ਨਕਸ਼ੇ ਨੂੰ ਸਥਾਪਤ ਕਰਨ ਲਈ ਨਿਰਦੇਸ਼ ਵੀ ਪ੍ਰਦਾਨ ਕਰਨਾ ਚਾਹਾਂਗਾ, ਪਰ ਇਹ ਇਸ ਲੇਖ ਨੂੰ ਮੇਰੇ ਇਰਾਦੇ ਨਾਲੋਂ ਬਹੁਤ ਲੰਬਾ ਬਣਾ ਦੇਵੇਗਾ।

ਤੁਸੀਂ ਇਸ ਵਿਸ਼ੇ ਦਾ ਅਧਿਐਨ ਕਰ ਸਕਦੇ ਹੋ ਇੱਥੇ. ਜੇ ਤੁਸੀਂ ਇਸ ਲੇਖ ਵਿਚ ਦਿਲਚਸਪੀ ਰੱਖਦੇ ਹੋ, ਦਿਮਿਤਰੀ ਨੋਜ਼ੇਨਕੋ ਸਰੋਤ ਨਕਸ਼ਾ ਏਕੀਕਰਣ ਬਾਰੇ ਦੂਜਾ ਭਾਗ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੇਗਾ। ਇਸ ਲਈ, ਹੋਰ ਪਸੰਦਾਂ ਨੂੰ ਹਿੱਟ ਕਰੋ ਅਤੇ ਸਬਸਕ੍ਰਾਈਬ ਕਰੋ ਦਿਮਿਤਰੀ ਨੋਜ਼ੇਨਕੋਤਾਂ ਕਿ ਦੂਜਾ ਭਾਗ ਨਾ ਖੁੰਝ ਜਾਵੇ।

5. ਵਰਤੋਂ ਸੰਤਰੀ ਅੰਤ ਬਿੰਦੂ ਦੇ ਨਾਲ API

ਠੀਕ ਹੈ. ਅਸੀਂ ਪਿਛਲੇ ਪੈਰਿਆਂ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਅਪਵਾਦ ਨੂੰ ਕਵਰ ਕੀਤਾ ਹੈ। ਹਾਲਾਂਕਿ, ਅਸੀਂ XHR ਗਲਤੀਆਂ ਬਾਰੇ ਕੀ ਕਰਾਂਗੇ?

ਸੰਤਰੀ ਕੋਲ ਕਸਟਮ ਐਰਰ ਹੈਂਡਲਿੰਗ ਵੀ ਹੈ। ਮੈਂ ਇਸਨੂੰ ਏਪੀਆਈ ਗਲਤੀਆਂ ਨੂੰ ਟਰੈਕ ਕਰਨ ਲਈ ਵਰਤਿਆ ਹੈ।

Sentry.captureException(err)

ਤੁਸੀਂ ਆਪਣੀ ਐਪਲੀਕੇਸ਼ਨ, ਈਮੇਲ ਆਦਿ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਗਲਤੀ ਦਾ ਨਾਮ, ਪੱਧਰ, ਡੇਟਾ ਜੋੜੋ, ਵਿਲੱਖਣ ਉਪਭੋਗਤਾ ਡੇਟਾ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ।

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "[email protected]"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

ਮੈਂ ਕੈਚ API ਲਈ ਇੱਕ ਆਮ ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਚਾਹਾਂਗਾ.

import * as Sentry from "@sentry/browser";

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

ਇਸ ਫੰਕਸ਼ਨ ਨੂੰ ਆਪਣੀ ਏਪੀਆਈ ਕਾਲ ਵਿੱਚ ਆਯਾਤ ਕਰੋ।

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

ਆਓ ਤਰੀਕਿਆਂ ਦੀ ਜਾਂਚ ਕਰੀਏ:

• ਸੈੱਟ ਲੈਵਲ ਤੁਹਾਨੂੰ ਸੈਂਟਰੀ ਡੈਸ਼ਬੋਰਡ ਵਿੱਚ ਇੱਕ ਪੱਧਰ ਦੀ ਗਲਤੀ ਪਾਉਣ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਇਸ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ - 'ਘਾਤਕ', 'ਗਲਤੀ', 'ਚੇਤਾਵਨੀ', 'ਲਾਗ', 'ਜਾਣਕਾਰੀ, 'ਡੀਬੱਗ', 'ਨਾਜ਼ੁਕ')।
• setUser ਕਿਸੇ ਵੀ ਉਪਭੋਗਤਾ ਡੇਟਾ (ਆਈਡੀ, ਈਮੇਲ ਪਤਾ, ਭੁਗਤਾਨ ਯੋਜਨਾ, ਆਦਿ) ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
• setExtra ਤੁਹਾਨੂੰ ਲੋੜੀਂਦਾ ਕੋਈ ਵੀ ਡਾਟਾ ਨਿਰਧਾਰਤ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ, ਉਦਾਹਰਨ ਲਈ, ਸਟੋਰ।

ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਬੱਗ ਬਾਰੇ ਉਪਭੋਗਤਾ ਫੀਡਬੈਕ ਪ੍ਰਾਪਤ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ showReportDialog ਫੰਕਸ਼ਨ ਦੀ ਵਰਤੋਂ ਕਰਨੀ ਚਾਹੀਦੀ ਹੈ।

Sentry.showReportDialog();

ਸਿੱਟਾ:

ਅੱਜ ਅਸੀਂ Sentry ਨੂੰ ਇੱਕ React ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਏਕੀਕ੍ਰਿਤ ਕਰਨ ਦਾ ਇੱਕ ਤਰੀਕਾ ਦੱਸਿਆ ਹੈ।

→ ਟੈਲੀਗ੍ਰਾਮ ਚੈਟ ਦੁਆਰਾ ਸੰਤਰੀ

ਸਰੋਤ: www.habr.com