सेन्ट्री प्रयोग गरेर प्रतिक्रिया अनुप्रयोगमा ट्र्याकिङ त्रुटिहरू

आज म तपाईंलाई प्रतिक्रिया अनुप्रयोगमा वास्तविक-समय त्रुटि ट्र्याकिङको बारेमा बताउनेछु। फ्रन्ट-एन्ड अनुप्रयोग सामान्यतया त्रुटि ट्र्याकिङको लागि प्रयोग गरिँदैन। केही कम्पनीहरूले प्रायः बग ट्र्याकिङ बन्द राख्छन्, कागजातहरू, परीक्षणहरू, इत्यादि पछि यसमा फर्कन्छन्। यद्यपि, यदि तपाइँ आफ्नो उत्पादनलाई राम्रोको लागि परिवर्तन गर्न सक्नुहुन्छ भने, त्यसो गर्नुहोस्!

1. तपाईलाई किन सेन्ट्री चाहिन्छ?

म अनुमान गर्छु कि तपाई उत्पादनको क्रममा बगहरू ट्र्याक गर्नमा रुचि राख्नुहुन्छ

के तपाईलाई यो पर्याप्त छैन जस्तो लाग्छ?

ठीक छ, विवरणहरू हेरौं।

विकासकर्ताहरू सेन्ट्री प्रयोग गर्नका लागि शीर्ष कारणहरू:

• त्रुटिहरूसँग कोड डिप्लोइ गर्दा तपाईंलाई जोखिमहरूबाट बच्न अनुमति दिन्छ
• कोड परीक्षणको साथ QA मद्दत गर्नुहोस्
• समस्याहरूको बारेमा द्रुत सूचनाहरू प्राप्त गर्नुहोस्
• त्रुटिहरू छिटो सच्याउन सक्ने क्षमता
• प्रशासक प्यानलमा त्रुटिहरूको सुविधाजनक प्रदर्शन प्राप्त गर्दै
• प्रयोगकर्ता/ब्राउजर खण्ड अनुसार त्रुटिहरू क्रमबद्ध गर्नुहोस्

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

• पैसा बचत गर्नुहोस् (सेन्ट्री तपाईंको सर्भरमा स्थापना गर्न सकिन्छ)
• प्रयोगकर्ता प्रतिक्रिया प्राप्त गर्दै
• वास्तविक समयमा तपाईंको परियोजनामा ​​के गलत छ बुझ्दै
• तपाईंको एपमा मानिसहरूलाई हुने समस्याहरूको सङ्ख्या बुझ्दै
• तपाईंका विकासकर्ताहरूले गल्ती गरेको ठाउँहरू फेला पार्न मद्दत गर्नुहोस्

मलाई लाग्छ कि विकासकर्ताहरू पहिले यस लेखमा रुचि राख्छन्। तपाईले आफ्नो मालिकलाई सेन्ट्रीलाई एकीकृत गर्न मनाउन कारणहरूको यो सूची पनि प्रयोग गर्न सक्नुहुन्छ।

व्यापार सूचीमा अन्तिम वस्तुसँग सावधान रहनुहोस्।

तपाईं पहिले नै रुचि छ?

सेन्ट्री भनेको के हो?

सेन्ट्री एक खुला स्रोत बग ट्र्याकिङ अनुप्रयोग हो जसले विकासकर्ताहरूलाई वास्तविक समयमा क्र्यासहरू ट्र्याक गर्न र समाधान गर्न मद्दत गर्दछ। नबिर्सनुहोस् कि अनुप्रयोगले तपाईंलाई दक्षता बढाउन र प्रयोगकर्ता अनुभव सुधार गर्न अनुमति दिन्छ। सेन्ट्रीले जाभास्क्रिप्ट, नोड, पाइथन, 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 с 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 मा स्रोत नक्साको बारेमा कुरा गर्दैछौं किनभने तिनीहरू कन्फिगर गरिएका छैनन्।

म स्रोत नक्सा सेटअप गर्न निर्देशनहरू पनि प्रदान गर्न चाहन्छु, तर यसले यो लेखलाई मैले चाहेको भन्दा धेरै लामो बनाउनेछ।

तपाईं यो विषय अध्ययन गर्न सक्नुहुन्छ यहाँ। यदि तपाइँ यस लेखमा रुचि राख्नुहुन्छ भने, दिमित्री नोजेन्को स्रोत नक्सा एकीकरणको बारेमा दोस्रो भाग प्रकाशित गर्नेछ। त्यसोभए, धेरै लाइक हिट गर्नुहोस् र सदस्यता लिनुहोस् दिमित्री नोजेन्कोदोस्रो भाग नछुटाउनको लागि।

२. उपयोग Sentry अन्त बिन्दु संग एपीआई

ठिक छ। हामीले अघिल्लो अनुच्छेदहरूमा जाभास्क्रिप्ट अपवादलाई कभर गरेका छौं। यद्यपि, हामी 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();

निष्कर्ष:

आज हामीले सेन्ट्रीलाई प्रतिक्रिया अनुप्रयोगमा एकीकृत गर्ने एउटा तरिका वर्णन गर्‍यौं।

→ टेलिग्राम च्याट द्वारा Sentry

स्रोत: www.habr.com