🥇 संतरीसह प्रतिक्रिया अॅपमधील त्रुटींचा मागोवा घेणे

आज मी तुम्हाला रिअॅक्ट ऍप्लिकेशनमध्ये रिअल-टाइम एरर ट्रॅकिंगबद्दल सांगेन. एरर ट्रॅकिंगसाठी फ्रंट-एंड ऍप्लिकेशन सामान्यत: वापरले जात नाही. काही कंपन्या बर्‍याचदा बग ट्रॅकिंग बंद ठेवतात, दस्तऐवजीकरण, चाचण्या इ. नंतर त्याकडे परत येतात. तथापि, जर तुम्ही तुमचे उत्पादन अधिक चांगल्यासाठी बदलू शकत असाल तर ते करा!

1. तुम्हाला सेंट्रीची गरज का आहे?

मी असे गृहीत धरतो की तुम्हाला उत्पादनादरम्यान बग ट्रॅक करण्यात स्वारस्य आहे

हे पुरेसे नाही असे तुम्हाला वाटते का?

ठीक आहे, चला तपशील पाहू.

विकसकांनी सेंटरी वापरण्याची प्रमुख कारणे:

त्रुटींसह कोड उपयोजित करताना तुम्हाला जोखीम टाळण्याची अनुमती देते
कोड चाचणीसह QA ला मदत करा
समस्यांबद्दल त्वरित सूचना प्राप्त करा
त्वरीत चुका दुरुस्त करण्याची क्षमता
ऍडमिन पॅनेलमधील त्रुटींचे सोयीस्कर प्रदर्शन मिळवणे
वापरकर्ता/ब्राउझर विभागानुसार त्रुटींची क्रमवारी लावा

सीईओ/लीड प्रोजेक्टची मुख्य कारणे

पैसे वाचवा (आपल्या सर्व्हरवर सेंट्री स्थापित केली जाऊ शकते)
वापरकर्ता अभिप्राय मिळवत आहे
रिअल टाइममध्ये आपल्या प्रोजेक्टमध्ये काय चूक आहे हे समजून घेणे
तुमच्या अॅपसह लोकांना किती समस्या येत आहेत हे समजून घेणे
तुमच्या डेव्हलपर्सनी जिथे चुका केल्या त्या ठिकाणे शोधण्यात तुम्हाला मदत करा

मला वाटते की विकासकांना प्रथम या लेखात रस असेल. तुम्ही तुमच्या बॉसला सेन्ट्री समाकलित करण्यासाठी पटवून देण्यासाठी कारणांची ही यादी देखील वापरू शकता.

व्यवसाय सूचीतील शेवटच्या आयटमची काळजी घ्या.

तुम्हाला आधीच स्वारस्य आहे?

संतरी म्हणजे काय?

सेन्ट्री हा एक ओपन सोर्स बग ट्रॅकिंग अॅप्लिकेशन आहे जो डेव्हलपरना रीअल टाइममध्ये क्रॅश ट्रॅक करण्यात आणि त्याचे निराकरण करण्यात मदत करतो. हे विसरू नका की अनुप्रयोग तुम्हाला कार्यक्षमता वाढविण्यास आणि वापरकर्ता अनुभव सुधारण्यास अनुमती देतो. सेन्ट्री 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. या क्रियेनंतर आम्हाला एक त्रुटी संदेश प्राप्त झाला पाहिजे: न पकडलेली 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));
      }
    });
};

चला पद्धती तपासूया:

सेट लेव्हल तुम्हाला सेन्ट्री डॅशबोर्डमध्ये लेव्हल एरर घालण्याची परवानगी देते. यात गुणधर्म आहेत - 'घातक', 'त्रुटी', 'चेतावणी', 'लॉग', 'माहिती, 'डीबग', 'गंभीर').
सेट वापरकर्ता कोणताही वापरकर्ता डेटा (आयडी, ईमेल पत्ता, पेमेंट योजना इ.) जतन करण्यात मदत करते.
सेट अतिरिक्त आपल्याला आवश्यक असलेला कोणताही डेटा निर्दिष्ट करण्याची परवानगी देते, उदाहरणार्थ, संचयित करा.

जर तुम्हाला बगबद्दल वापरकर्त्याचा फीडबॅक मिळवायचा असेल तर तुम्ही showReportDialog फंक्शन वापरावे.

Sentry.showReportDialog();

निष्कर्ष:

आज आम्ही सेन्ट्रीला रिऍक्ट ऍप्लिकेशनमध्ये समाकलित करण्याचा एक मार्ग वर्णन केला आहे.

→ टेलिग्राम द्वारे चॅट सेंट्री

स्त्रोत: www.habr.com

Sentry वापरून प्रतिक्रिया अनुप्रयोगातील त्रुटींचा मागोवा घेणे

1. तुम्हाला सेंट्रीची गरज का आहे?

संतरी म्हणजे काय?

2. लॉगिन करा आणि एक प्रकल्प तयार करा

3. प्रतिक्रिया आणि संतरी एकत्रीकरण

4. पहिल्या त्रुटीचा मागोवा घेणे

एक टिप्पणी जोडा Отменить ответ