சென்ட்ரியைப் பயன்படுத்தி ரியாக்ட் பயன்பாட்டில் பிழைகளைக் கண்காணித்தல்

ரியாக்ட் அப்ளிகேஷனில் நிகழ்நேர பிழை கண்காணிப்பு பற்றி இன்று நான் உங்களுக்கு சொல்கிறேன். ஒரு முன்-இறுதி பயன்பாடு பொதுவாக பிழை கண்காணிப்புக்குப் பயன்படுத்தப்படுவதில்லை. சில நிறுவனங்கள் பெரும்பாலும் பிழை கண்காணிப்பை நிறுத்தி, ஆவணங்கள், சோதனைகள் போன்றவற்றிற்குப் பிறகு திரும்பும். இருப்பினும், உங்கள் தயாரிப்பை சிறப்பாக மாற்ற முடிந்தால், அதைச் செய்யுங்கள்!

1. உங்களுக்கு ஏன் சென்ட்ரி தேவை?

உற்பத்தியின் போது பிழைகளைக் கண்காணிப்பதில் நீங்கள் ஆர்வமாக உள்ளீர்கள் என்று கருதுகிறேன்

இது போதாது என்று நினைக்கிறீர்களா?

சரி, விவரங்களைப் பார்ப்போம்.

டெவலப்பர்கள் சென்ட்ரியைப் பயன்படுத்துவதற்கான முக்கிய காரணங்கள்:

• பிழைகளுடன் குறியீட்டைப் பயன்படுத்தும்போது ஆபத்துகளைத் தவிர்க்க உங்களை அனுமதிக்கிறது
• குறியீடு சோதனையில் QAக்கு உதவுங்கள்
• சிக்கல்களைப் பற்றிய விரைவான அறிவிப்புகளைப் பெறுங்கள்
• பிழைகளை விரைவாக சரிசெய்யும் திறன்
• நிர்வாக குழுவில் பிழைகளின் வசதியான காட்சியைப் பெறுதல்
• பயனர்/உலாவி பிரிவின்படி பிழைகளை வரிசைப்படுத்தவும்

CEO/Lead திட்டத்திற்கான முக்கிய காரணங்கள்

• பணத்தைச் சேமிக்கவும் (சென்ட்ரியை உங்கள் சேவையகங்களில் நிறுவலாம்)
• பயனர் கருத்துக்களைப் பெறுதல்
• உண்மையான நேரத்தில் உங்கள் திட்டத்தில் என்ன தவறு இருக்கிறது என்பதைப் புரிந்துகொள்வது
• உங்கள் பயன்பாட்டில் உள்ள சிக்கல்களின் எண்ணிக்கையைப் புரிந்துகொள்வது
• உங்கள் டெவலப்பர்கள் தவறு செய்த இடங்களைக் கண்டறிய உதவுங்கள்

டெவலப்பர்கள் முதலில் இந்த கட்டுரையில் ஆர்வமாக இருப்பார்கள் என்று நினைக்கிறேன். சென்ட்ரியை ஒருங்கிணைக்க உங்கள் முதலாளியை நம்ப வைக்க இந்த காரணங்களின் பட்டியலையும் நீங்கள் பயன்படுத்தலாம்.

வணிகப் பட்டியலில் கடைசி உருப்படியுடன் கவனமாக இருங்கள்.

நீங்கள் ஏற்கனவே ஆர்வமாக உள்ளீர்களா?

சென்ட்ரி என்றால் என்ன?

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

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. முதல் பிழையைக் கண்காணித்தல்

எடுத்துக்காட்டாக, நான் Deezer API உடன் எளிய இசை பயன்பாட்டைப் பயன்படுத்தினேன். நீங்கள் அதை பார்க்க முடியும் இங்கே. நாம் ஒரு பிழையை உருவாக்க வேண்டும். "வரையறுக்கப்படாத" சொத்தை அணுகுவது ஒரு வழி

அழைக்கும் பொத்தானை உருவாக்க வேண்டும் console.log с பயனர்.மின்னஞ்சல். இந்த செயலுக்குப் பிறகு நாம் ஒரு பிழை செய்தியைப் பெற வேண்டும்: பிடிக்கப்படாத வகைப் பிழை (வரையறுக்கப்படாதவற்றிலிருந்து சொத்தைப் படிக்க முடியாது email) பயனர் பொருள் காணாமல் போனதால். நீங்களும் பயன்படுத்தலாம் ஜாவாஸ்கிரிப்ட் விதிவிலக்கு.

<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. பயன்படுத்த செண்ட்ரி இறுதி புள்ளியுடன் ஏபிஐ

சரி. முந்தைய பத்திகளில் ஜாவாஸ்கிரிப்ட் விதிவிலக்குகளை உள்ளடக்கியுள்ளோம். எனினும், 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));
    }
  });

கேட்ச் ஏபிஐக்கு பொதுவான செயல்பாட்டைப் பயன்படுத்த விரும்புகிறேன்.

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

முறைகளை சரிபார்ப்போம்:

• செட் லெவல் சென்ட்ரி டாஷ்போர்டில் நிலைப் பிழையைச் செருக உங்களை அனுமதிக்கிறது. இது பண்புகளைக் கொண்டுள்ளது - 'அபாயகரமான', 'பிழை', 'எச்சரிக்கை', 'பதிவு', 'தகவல், 'பிழைத்திருத்தம்', 'முக்கியமான').
• தொகுப்பு பயனர் எந்தவொரு பயனர் தரவையும் (ஐடி, மின்னஞ்சல் முகவரி, கட்டணத் திட்டம் போன்றவை) சேமிக்க உதவுகிறது.
• setExtra உங்களுக்கு தேவையான எந்த தரவையும் குறிப்பிட அனுமதிக்கிறது, எடுத்துக்காட்டாக, சேமிக்கவும்.

பிழையைப் பற்றி பயனர் கருத்தைப் பெற விரும்பினால், நீங்கள் showReportDialog செயல்பாட்டைப் பயன்படுத்த வேண்டும்.

Sentry.showReportDialog();

முடிவுக்கு:

சென்ட்ரியை ரியாக்ட் அப்ளிகேஷனில் ஒருங்கிணைப்பதற்கான ஒரு வழியை இன்று விவரித்தோம்.

→ டெலிகிராம் அரட்டை மூலம் செண்ட்ரி

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