സെൻട്രി ഉപയോഗിച്ച് ഒരു റിയാക്റ്റ് ആപ്ലിക്കേഷനിൽ പിശകുകൾ ട്രാക്കുചെയ്യുന്നു

ഒരു റിയാക്റ്റ് ആപ്ലിക്കേഷനിലെ തത്സമയ പിശക് ട്രാക്കിംഗിനെക്കുറിച്ച് ഇന്ന് ഞാൻ നിങ്ങളോട് പറയും. ഒരു ഫ്രണ്ട്-എൻഡ് ആപ്ലിക്കേഷൻ സാധാരണയായി പിശക് ട്രാക്കിംഗിനായി ഉപയോഗിക്കാറില്ല. ചില കമ്പനികൾ പലപ്പോഴും ബഗ് ട്രാക്കിംഗ് മാറ്റിവയ്ക്കുകയും ഡോക്യുമെന്റേഷൻ, ടെസ്റ്റുകൾ മുതലായവയ്ക്ക് ശേഷം അതിലേക്ക് മടങ്ങുകയും ചെയ്യുന്നു. എന്നിരുന്നാലും, നിങ്ങളുടെ ഉൽപ്പന്നം മികച്ച രീതിയിൽ മാറ്റാൻ കഴിയുമെങ്കിൽ, അത് ചെയ്യുക!

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. ആദ്യ പിശക് ട്രാക്കുചെയ്യുന്നു

ഉദാഹരണത്തിന്, Deezer API ഉപയോഗിച്ച് ഞാൻ ഒരു ലളിതമായ സംഗീത ആപ്ലിക്കേഷൻ ഉപയോഗിച്ചു. നിങ്ങൾക്കത് കാണാൻ കഴിയും ഇവിടെ. നമുക്ക് ഒരു പിശക് സൃഷ്ടിക്കേണ്ടതുണ്ട്. "നിർവചിക്കാത്ത" പ്രോപ്പർട്ടി ആക്സസ് ചെയ്യുക എന്നതാണ് ഒരു വഴി

ഞങ്ങൾ വിളിക്കുന്ന ഒരു ബട്ടൺ സൃഷ്ടിക്കേണ്ടതുണ്ട് console.log с user.email. ഈ പ്രവർത്തനത്തിന് ശേഷം ഞങ്ങൾക്ക് ഒരു പിശക് സന്ദേശം ലഭിക്കും: പിടിക്കപ്പെടാത്ത ടൈപ്പ് പിശക് (നിർവചിക്കാത്തതിൽ നിന്ന് പ്രോപ്പർട്ടി വായിക്കാൻ കഴിയില്ല 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));
    }
  });

ക്യാച്ച് 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));
      }
    });
};

നമുക്ക് രീതികൾ പരിശോധിക്കാം:

• സെറ്റ് ലെവൽ സെൻട്രി ഡാഷ്‌ബോർഡിലേക്ക് ഒരു ലെവൽ പിശക് ചേർക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു. ഇതിന് ഗുണങ്ങളുണ്ട് - 'മാരകമായ', 'പിശക്', 'മുന്നറിയിപ്പ്', 'ലോഗ്', 'വിവരം, 'ഡീബഗ്', 'നിർണ്ണായക').
• സെറ്റ് യൂസർ ഏതെങ്കിലും ഉപയോക്തൃ ഡാറ്റ (ഐഡി, ഇമെയിൽ വിലാസം, പേയ്മെന്റ് പ്ലാൻ മുതലായവ) സംരക്ഷിക്കാൻ സഹായിക്കുന്നു.
• setExtra നിങ്ങൾക്ക് ആവശ്യമുള്ള ഏത് ഡാറ്റയും വ്യക്തമാക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഉദാഹരണത്തിന്, സ്റ്റോർ.

നിങ്ങൾക്ക് ഒരു ബഗിനെക്കുറിച്ച് ഉപയോക്തൃ ഫീഡ്‌ബാക്ക് ലഭിക്കണമെങ്കിൽ, നിങ്ങൾ showReportDialog ഫംഗ്‌ഷൻ ഉപയോഗിക്കണം.

Sentry.showReportDialog();

തീരുമാനം:

സെൻട്രിയെ ഒരു റിയാക്റ്റ് ആപ്ലിക്കേഷനിലേക്ക് സമന്വയിപ്പിക്കുന്നതിനുള്ള ഒരു മാർഗ്ഗം ഞങ്ങൾ ഇന്ന് വിവരിച്ചു.

→ ടെലിഗ്രാം ചാറ്റ് ചെയ്തത് സെന്റി

അവലംബം: www.habr.com