Sentry භාවිතයෙන් ප්‍රතික්‍රියා යෙදුමක දෝෂ ලුහුබැඳීම

React Application එකක real-time error tracking ගැන අද මම ඔබට කියන්නම්. දෝෂ ලුහුබැඳීම සඳහා සාමාන්‍යයෙන් ඉදිරිපස යෙදුමක් භාවිතා නොවේ. සමහර සමාගම් බොහෝ විට දෝෂ ලුහුබැඳීම කල් දමයි, ලේඛනගත කිරීම, පරීක්ෂණ ආදියෙන් පසුව එය වෙත ආපසු යාම. කෙසේ වෙතත්, ඔබට ඔබේ නිෂ්පාදනය වඩා හොඳ ලෙස වෙනස් කළ හැකි නම්, එය කරන්න!

1. ඔබට Sentry අවශ්‍ය වන්නේ ඇයි?

නිෂ්පාදනය අතරතුර දෝෂ නිරීක්ෂණය කිරීමට ඔබ උනන්දු යැයි මම උපකල්පනය කරමි

මෙය මදි යැයි ඔබ සිතනවාද?

හරි අපි බලමු විස්තර ටික.

සංවර්ධකයින් Sentry භාවිතා කිරීමට ප්‍රධාන හේතු:

• දෝෂ සහිත කේතය යෙදවීමේදී අවදානම් වළක්වා ගැනීමට ඔබට ඉඩ සලසයි
• කේත පරීක්ෂාව සමඟ QA උදව් කරන්න
• ගැටළු පිළිබඳ ඉක්මන් දැනුම්දීම් ලබා ගන්න
• දෝෂ ඉක්මනින් නිවැරදි කිරීමේ හැකියාව
• පරිපාලක පැනලයේ පහසු දෝෂ දර්ශනයක් ලබා ගැනීම
• පරිශීලක/බ්‍රවුසර් කොටස අනුව දෝෂ වර්ග කරන්න

CEO/Lead ව්‍යාපෘතිය සඳහා ප්‍රධාන හේතු

• මුදල් ඉතිරි කරන්න (Sentry ඔබේ සේවාදායකයේ ස්ථාපනය කළ හැක)
• පරිශීලක ප්‍රතිපෝෂණ ලබා ගැනීම
• තථ්‍ය කාලීනව ඔබේ ව්‍යාපෘතියේ ඇති වරද කුමක්දැයි වටහා ගැනීම
• ඔබගේ යෙදුම සමඟ මිනිසුන්ට ඇති ගැටළු ගණන තේරුම් ගැනීම
• ඔබේ සංවර්ධකයින් වැරදි කළ ස්ථාන සොයා ගැනීමට ඔබට උදවු කරන්න

සංවර්ධකයින් මෙම ලිපිය ගැන මුලින්ම උනන්දු වනු ඇතැයි මම සිතමි. Sentry ඒකාබද්ධ කිරීමට ඔබේ ප්‍රධානියාට ඒත්තු ගැන්වීමට ඔබට මෙම හේතු ලැයිස්තුව භාවිතා කළ හැකිය.

ව්යාපාර ලැයිස්තුවේ අවසන් අයිතමය සමඟ ප්රවේශම් වන්න.

ඔබ දැනටමත් උනන්දු ද?

Sentry යනු කුමක්ද?

Sentry යනු විවෘත මූලාශ්‍ර දෝෂ ලුහුබැඳීමේ යෙදුමක් වන අතර එය සංවර්ධකයින්ට තථ්‍ය කාලීන බිඳවැටීම් නිරීක්ෂණය කිරීමට සහ නිවැරදි කිරීමට උපකාරී වේ. යෙදුම ඔබට කාර්යක්ෂමතාව වැඩි කිරීමට සහ පරිශීලක අත්දැකීම් වැඩිදියුණු කිරීමට ඉඩ සලසන බව අමතක නොකරන්න. Sentry JavaScript, Node, Python, PHP, Ruby, Java සහ අනෙකුත් ක්‍රමලේඛන භාෂා සඳහා සහය දක්වයි.

2. පුරනය වී ව්‍යාපෘතියක් සාදන්න

• ඔබගේ Sentry ගිණුම විවෘත කරන්න. ඔබට ලොග් වීමට සිදු විය හැක. (ඔබේ සේවාදායකයේ Sentry ස්ථාපනය කළ හැකි බව කරුණාවෙන් සලකන්න)
• ඊළඟ පියවර වන්නේ ව්යාපෘතියක් නිර්මාණය කිරීමයි
• ලැයිස්තුවෙන් ඔබේ භාෂාව තෝරන්න. (අපි React තේරීමට යන්නෙමු. "Create Project" ක්ලික් කරන්න)

ඔබගේ අයදුම්පත අභිරුචිකරණය කරන්න. Sentry කන්ටේනරයකට ඒකාබද්ධ කරන්නේ කෙසේද යන්න පිළිබඳ මූලික උදාහරණයක් පහතින් දැකිය හැකිය:

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

ඔබ මීළඟට කුමක් කළ යුතු දැයි සොයා ගැනීමට ඔබට උපකාර කිරීමට Sentry සතුව ප්‍රයෝජනවත් විශාරදයෙක් සිටී. ඔබට මෙම පියවර අනුගමනය කළ හැකිය. මට ඔබේ පළමු දෝෂ හසුරුවන්නා නිර්මාණය කරන්නේ කෙසේදැයි පෙන්වීමට අවශ්‍යයි. නියමයි, අපි ව්යාපෘතියක් නිර්මාණය කළා! අපි ඊළඟ පියවරට යමු

3. ප්රතික්රියා සහ සෙන්ට්රි ඒකාබද්ධ කිරීම

ඔබ ඔබේ ව්‍යාපෘතියේ npm පැකේජය ස්ථාපනය කළ යුතුය.

npm i @sentry/browser

ඔබේ කන්ටේනරයේ Sentry ආරම්භ කරන්න:

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

මෙම බොත්තම ඒකාබද්ධ කිරීමෙන් පසුව, ඔබ එය බ්රවුසරයේ පරීක්ෂා කළ යුතුය.

අපේ මුල්ම වැරැද්ද තියෙන්නේ

හූ-හූ!

ඔබ හෙඩර් දෝෂය මත ක්ලික් කළහොත්, ඔබට ස්ටැක් ට්‍රේස් එකක් පෙනෙනු ඇත.

පණිවිඩ නරක ලෙස පෙනේ. හැබයි අපි දැකල තියෙනව කෝඩ් එක කොහෙද කියල තේරෙන්නෙ නැතුව Error Message එනවා. පෙරනිමියෙන් අපි ReactJS හි මූලාශ්‍ර සිතියම ගැන කතා කරන්නේ ඒවා වින්‍යාස කර නොමැති බැවිනි.

මූලාශ්‍ර සිතියම සැකසීම සඳහා උපදෙස් සැපයීමට ද මම කැමැත්තෙමි, නමුත් එය මෙම ලිපිය මා අදහස් කළ ප්‍රමාණයට වඩා දිගු කරයි.

ඔබට මෙම මාතෘකාව අධ්යයනය කළ හැකිය මෙහි. ඔබ මෙම ලිපිය ගැන උනන්දුවක් දක්වන්නේ නම්, දිමිත්‍රි නොෂෙන්කෝ මූලාශ්‍ර සිතියම් ඒකාබද්ධ කිරීම පිළිබඳ දෙවන කොටස ප්‍රකාශයට පත් කරනු ඇත. ඉතින්, තව ලයික් ගහලා දායක වෙන්න දිමිත්‍රි නොෂෙන්කෝදෙවන කොටස අතපසු නොකිරීමට.

5. භාවිතය වූ දමිල්වානි බ්රිතාන්යයෙන් අවසාන ලක්ෂ්‍යය සමඟ API

හරි. අපි කලින් ඡේදවල javascript ව්‍යතිරේකය ආවරණය කර ඇත. කෙසේ වෙතත්, XHR දෝෂ සම්බන්ධයෙන් අපි කුමක් කරමුද?

Sentry සතුව අභිරුචි දෝෂ හැසිරවීමක් ද ඇත. මම එය api දෝෂ නිරීක්ෂණය කිරීමට භාවිතා කළෙමි.

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 ඕනෑම පරිශීලක දත්ත (ID, ඊමේල් ලිපිනය, ගෙවීම් සැලැස්ම, ආදිය) සුරැකීමට උපකාරී වේ.
• setExtra ඔබට අවශ්ය ඕනෑම දත්තයක් නියම කිරීමට ඉඩ සලසයි, උදාහරණයක් ලෙස, ගබඩා කරන්න.

ඔබට දෝෂයක් ගැන පරිශීලක ප්‍රතිපෝෂණ ලබා ගැනීමට අවශ්‍ය නම්, ඔබ showReportDialog ශ්‍රිතය භාවිතා කළ යුතුය.

Sentry.showReportDialog();

නිගමනය:

අද අපි Sentry ප්‍රතික්‍රියා යෙදුමකට ඒකාබද්ධ කිරීමට එක් ක්‍රමයක් විස්තර කළෙමු.

→ ටෙලිග්‍රාම් චැට් මගින් වූ දමිල්වානි බ්රිතාන්යයෙන්

මූලාශ්රය: www.habr.com