સંત્રી સાથે પ્રતિક્રિયા એપ્લિકેશનમાં ટ્રૅકિંગ ભૂલો

આજે હું તમને રીએક્ટ એપમાં રીઅલ-ટાઇમ એરર ટ્રેકિંગ દ્વારા લઈ જઈશ. ફ્રન્ટએન્ડ એપ્લિકેશનનો ઉપયોગ સામાન્ય રીતે બગ ટ્રેકિંગ માટે થતો નથી. કેટલીક કંપનીઓ ઘણીવાર બગ ટ્રેકિંગને બાજુ પર રાખે છે, દસ્તાવેજીકરણ, પરીક્ષણો વગેરે પછી તેના પર પાછા ફરે છે. જો કે, જો તમે તમારા ઉત્પાદનને વધુ સારા માટે બદલી શકો છો, તો પછી તે કરો!

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. પ્રથમ ભૂલ ટ્રેકિંગ

ઉદાહરણ તરીકે, મેં ડીઝર API સાથે એક સરળ સંગીત એપ્લિકેશનનો ઉપયોગ કર્યો. તમે તેને જોઈ શકો છો અહીં. આપણે એક ભૂલ બનાવવાની જરૂર છે. એક રીત એ છે કે "અવ્યાખ્યાયિત" મિલકતને ઍક્સેસ કરવી

આપણે એક બટન બનાવવાની જરૂર છે જે કૉલ કરે છે કન્સોલ લોગ с user.email. આ ક્રિયા પછી અમને એક ભૂલ સંદેશ પ્રાપ્ત થવો જોઈએ: ન પકડાયેલ TypeError (અવ્યાખ્યાયિત માંથી મિલકત વાંચી શકાતી નથી 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. ઉપયોગ સેન્ટ્રી અંતિમ બિંદુ સાથે 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);
};

તમારા 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));
      }
    });
};

ચાલો પદ્ધતિઓ તપાસીએ:

• સેટ લેવલ તમને સંત્રી ડેશબોર્ડમાં સ્તરની ભૂલ દાખલ કરવાની મંજૂરી આપે છે. તેમાં ગુણધર્મો છે - 'ઘાતક', 'ભૂલ', 'ચેતવણી', 'લોગ', 'માહિતી, 'ડિબગ', 'ક્રિટિકલ').
• સેટ યુઝર કોઈપણ વપરાશકર્તા ડેટા (આઈડી, ઈમેઈલ સરનામું, ચુકવણી યોજના, વગેરે) સાચવવામાં મદદ કરે છે.
• setExtra તમને જરૂરી કોઈપણ ડેટા સેટ કરવાની મંજૂરી આપે છે, ઉદાહરણ તરીકે, સ્ટોર.

જો તમે બગ પર વપરાશકર્તા પ્રતિસાદ ઇચ્છો છો, તો તમારે showReportDialog ફંક્શનનો ઉપયોગ કરવો જોઈએ.

Sentry.showReportDialog();

ઉપસંહાર:

આજે અમે સંત્રીને પ્રતિક્રિયા એપ્લિકેશનમાં એકીકૃત કરવાની એક રીતનું વર્ણન કર્યું છે.

→ દ્વારા ટેલિગ્રામ ચેટ સેન્ટ્રી

સોર્સ: www.habr.com