ከሴንትሪ ጋር በReact መተግበሪያ ውስጥ ስህተቶችን መከታተል

ዛሬ በReact መተግበሪያ ውስጥ በእውነተኛ ጊዜ የስህተት መከታተያ ውስጥ እመራችኋለሁ። የፊት ለፊት ትግበራ በተለምዶ ለሳንካ ክትትል አያገለግልም። አንዳንድ ኩባንያዎች ብዙውን ጊዜ የሳንካ ክትትልን ወደ ጎን ያስቀምጣሉ, ከሰነዶች, ሙከራዎች, ወዘተ በኋላ ወደ እሱ ይመለሳሉ. ነገር ግን, ምርትዎን በተሻለ ሁኔታ መቀየር ከቻሉ, ከዚያ ብቻ ያድርጉት!

1. ሴንትሪ ለምን ያስፈልግዎታል?

በምርት ጊዜ የሳንካ ክትትል ለማድረግ ፍላጎት እንዳለህ እገምታለሁ።

ይህ በቂ አይደለም ብለው ያስባሉ?

እሺ ዝርዝሩን እንይ።

ሴንትሪን ለገንቢዎች ለመጠቀም ዋና ዋና ምክንያቶች፡-

• ከስህተቶች ጋር ኮድ ሲጠቀሙ አደጋዎችን እንዲያስወግዱ ያስችልዎታል
• በኮድ ሙከራ ውስጥ QA ን ያግዙ
• ፈጣን የችግር ማሳወቂያዎችን ያግኙ
• ስህተቶችን በፍጥነት የማስተካከል ችሎታ
• በአስተዳዳሪ ፓነል ውስጥ ምቹ የሆነ የስህተት ማሳያ ማግኘት
• ስህተቶችን በተጠቃሚ/አሳሽ ክፍል ደርድር

ዋና ዋና ምክንያቶች ዋና ሥራ አስፈፃሚ / መሪ ፕሮጀክት

• ገንዘብ ይቆጥቡ (ሴንት በአገልጋዮችዎ ላይ ሊጫን ይችላል)
• የተጠቃሚ ግብረመልስ ያግኙ
• በእውነተኛ ጊዜ በፕሮጀክትዎ ላይ ምን ችግር እንዳለ መረዳት
• ሰዎች በእርስዎ መተግበሪያ ላይ ያሉባቸውን ችግሮች ብዛት መረዳት
• የእርስዎ ገንቢዎች ስህተት የሠሩባቸውን ቦታዎች ለማግኘት እገዛ ያድርጉ

በመጀመሪያ ደረጃ ገንቢዎቹ በዚህ ጽሑፍ ላይ ፍላጎት ይኖራቸዋል ብዬ አስባለሁ. አለቃዎን ሴንትሪን እንዲያዋህድ ለማሳመን ይህንን የምክንያቶች ዝርዝር መጠቀም ይችላሉ።

በንግድ ዝርዝሩ ላይ ላለው የመጨረሻ ንጥል ይጠንቀቁ።

አስቀድመው ፍላጎት አለዎት?

ሴንትሪ ምንድን ነው?

ሴንትሪ ገንቢዎች ብልሽቶችን በቅጽበት እንዲከታተሉ እና እንዲያስተካክሉ የሚያግዝ ክፍት ምንጭ የሳንካ መከታተያ መተግበሪያ ነው። መተግበሪያው ቅልጥፍናን ለመጨመር እና የተጠቃሚን ተሞክሮ ለማሻሻል እንደሚፈቅድልዎ አይርሱ። ሴንትሪ JavaScript፣ Node፣ Python፣ PHP፣ Ruby፣ Java እና ሌሎች የፕሮግራም ቋንቋዎችን ይደግፋል።

2. ይግቡ እና ፕሮጀክት ይፍጠሩ

• የ Sentry መለያዎን ይክፈቱ። መግባት ሊኖርብህ ይችላል። (እባክዎ ሴንትሪ በአገልጋዮችዎ ላይ ሊጫን እንደሚችል ልብ ይበሉ)
• ቀጣዩ ደረጃ ፕሮጀክት መፍጠር ነው
• ከዝርዝሩ ውስጥ የእርስዎን ቋንቋ ይምረጡ። (Reactን እንመርጣለን:: "ፕሮጀክት ፍጠር" የሚለውን ይጫኑ)

ማመልከቻዎን ያዘጋጁ። ሴንትሪን ወደ መያዣ እንዴት እንደሚዋሃዱ መሰረታዊ ምሳሌን ከዚህ በታች ማየት ይችላሉ፡-

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 ጋር ተጠቀምኩ። እርስዎ ማየት ይችላሉ እዚህ. ስህተት መፍጠር አለብን። አንደኛው መንገድ "ያልተገለጸ" ንብረትን መድረስ ነው

የሚጣራ ቁልፍ መፍጠር አለብን የኮንሶል ሎግ с ተጠቃሚ.ኢሜል. ከዚህ እርምጃ በኋላ የስህተት መልእክት መቀበል አለብን፡- ያልተያዘ የታይፕ ስህተት (ያልተገለጸ ንብረት ማንበብ አይቻልም 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. አጠቃቀም Sentry መጨረሻ ነጥብ ጋር ኤ ፒ አይ

እሺ በቀደሙት አንቀጾች ውስጥ የጃቫስክሪፕት ልዩነትን ሸፍነናል። ሆኖም፣ በXHR ስህተቶች ምን እናደርጋለን?

ሴንትሪ ብጁ የስህተት አያያዝም አለው። ለኤpi bug መከታተያ ተጠቀምኩት።

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

ይህንን ተግባር በAPi ጥሪ ውስጥ አስመጣ።

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 ማንኛውንም የተጠቃሚ ውሂብ (መታወቂያ፣ ኢሜይል አድራሻ፣ የክፍያ እቅድ፣ ወዘተ) ለማስቀመጥ ይረዳል።
• አዘጋጅ ኤክስትራ የሚፈልጉትን ማንኛውንም ውሂብ እንዲያዘጋጁ ይፈቅድልዎታል ፣ ለምሳሌ ፣ መደብር።

በሳንካ ላይ የተጠቃሚ ግብረመልስ ከፈለግክ የሾው ሪፖርትዲያሎግ ተግባር መጠቀም አለብህ።

Sentry.showReportDialog();

ማጠቃለያ:

ዛሬ ሴንትሪን ወደ React መተግበሪያ የማዋሃድ መንገዶች አንዱን ገለጽን።

→ የቴሌግራም ውይይት በ Sentry

ምንጭ: hab.com