ການຕິດຕາມຄວາມຜິດພາດໃນແອັບພລິເຄຊັນ React ໂດຍໃຊ້ Sentry

ມື້ນີ້ຂ້ອຍຈະບອກທ່ານກ່ຽວກັບການຕິດຕາມຄວາມຜິດພາດໃນເວລາທີ່ແທ້ຈິງໃນຄໍາຮ້ອງສະຫມັກ React. ຄໍາຮ້ອງສະຫມັກດ້ານຫນ້າບໍ່ໄດ້ຖືກນໍາໃຊ້ໂດຍທົ່ວໄປສໍາລັບການຕິດຕາມຄວາມຜິດພາດ. ບາງບໍລິສັດມັກຈະປິດການຕິດຕາມ bug, ກັບຄືນໄປຫາມັນຫຼັງຈາກເອກະສານ, ການທົດສອບ, ແລະອື່ນໆ. ຢ່າງໃດກໍຕາມ, ຖ້າທ່ານສາມາດປ່ຽນຜະລິດຕະພັນຂອງທ່ານໃຫ້ດີຂຶ້ນ, ຫຼັງຈາກນັ້ນພຽງແຕ່ເຮັດມັນ!

1. ເປັນຫຍັງທ່ານຕ້ອງການ Sentry?

ຂ້ອຍສົມມຸດວ່າເຈົ້າມີຄວາມສົນໃຈໃນການຕິດຕາມແມງໄມ້ໃນລະຫວ່າງການຜະລິດ

ເຈົ້າຄິດວ່ານີ້ບໍ່ພຽງພໍບໍ?

ຕົກລົງ, ໃຫ້ເບິ່ງລາຍລະອຽດ.

ເຫດຜົນອັນດັບຕົ້ນສໍາລັບນັກພັດທະນາທີ່ຈະໃຊ້ Sentry:

• ອະນຸຍາດໃຫ້ທ່ານເພື່ອຫຼີກເວັ້ນການຄວາມສ່ຽງໃນເວລາທີ່ການນໍາໃຊ້ລະຫັດທີ່ມີຄວາມຜິດພາດ
• ຊ່ວຍ QA ກັບການທົດສອບລະຫັດ
• ໄດ້ຮັບການແຈ້ງເຕືອນໄວກ່ຽວກັບບັນຫາ
• ຄວາມສາມາດໃນການແກ້ໄຂຂໍ້ຜິດພາດຢ່າງໄວວາ
• ໄດ້ຮັບການສະແດງຂໍ້ຜິດພາດທີ່ສະດວກໃນກະດານ admin
• ຈັດຮຽງຂໍ້ຜິດພາດຕາມພາກສ່ວນຜູ້ໃຊ້/ບຣາວເຊີ

ເຫດຜົນຫຼັກສໍາລັບໂຄງການ CEO/Lead

• ປະຫຍັດເງິນ (Sentry ສາມາດຕິດຕັ້ງຢູ່ໃນເຄື່ອງແມ່ຂ່າຍຂອງທ່ານ)
• ໄດ້ຮັບຄໍາຕິຊົມຂອງຜູ້ໃຊ້
• ເຂົ້າໃຈສິ່ງທີ່ຜິດພາດກັບໂຄງການຂອງເຈົ້າໃນເວລາຈິງ
• ຄວາມເຂົ້າໃຈກ່ຽວກັບຈໍານວນຂອງບັນຫາທີ່ປະຊາຊົນມີກັບ app ຂອງທ່ານ
• ຊ່ວຍໃຫ້ທ່ານຊອກຫາສະຖານທີ່ທີ່ນັກພັດທະນາຂອງທ່ານເຮັດຜິດພາດ

ຂ້ອຍຄິດວ່ານັກພັດທະນາຈະສົນໃຈໃນບົດຄວາມນີ້ກ່ອນ. ນອກນັ້ນທ່ານຍັງສາມາດນໍາໃຊ້ບັນຊີລາຍຊື່ຂອງເຫດຜົນນີ້ເພື່ອຊັກຊວນໃຫ້ນາຍຈ້າງຂອງທ່ານປະສົມປະສານ Sentry.

ຈົ່ງລະມັດລະວັງກັບລາຍການສຸດທ້າຍໃນບັນຊີລາຍຊື່ທຸລະກິດ.

ເຈົ້າສົນໃຈແລ້ວບໍ?

Sentry ແມ່ນຫຍັງ?

Sentry ແມ່ນແອັບພລິເຄຊັ່ນຕິດຕາມແມງໄມ້ທີ່ເປີດແຫຼ່ງທີ່ຊ່ວຍໃຫ້ນັກພັດທະນາຕິດຕາມ ແລະແກ້ໄຂການຂັດຂ້ອງໃນເວລາຈິງ. ຢ່າລືມວ່າແອັບພລິເຄຊັນຊ່ວຍໃຫ້ທ່ານເພີ່ມປະສິດທິພາບແລະປັບປຸງປະສົບການຂອງຜູ້ໃຊ້. Sentry ສະຫນັບສະຫນູນ JavaScript, Node, Python, PHP, Ruby, Java ແລະພາສາການຂຽນໂປຼແກຼມອື່ນໆ.

2. ເຂົ້າສູ່ລະບົບແລະສ້າງໂຄງການ

• ເປີດບັນຊີ Sentry ຂອງທ່ານ. ທ່ານອາດຈະຕ້ອງເຂົ້າສູ່ລະບົບ. (ກະລຸນາສັງເກດວ່າ Sentry ສາມາດຕິດຕັ້ງຢູ່ໃນເຄື່ອງແມ່ຂ່າຍຂອງທ່ານ)
• ຂັ້ນຕອນຕໍ່ໄປແມ່ນການສ້າງໂຄງການ
• ເລືອກພາສາຂອງທ່ານຈາກລາຍການ. (ພວກເຮົາຈະເລືອກ React. ຄລິກ "ສ້າງໂຄງການ")

ປັບແຕ່ງແອັບພລິເຄຊັນຂອງທ່ານ. ຕົວຢ່າງພື້ນຖານຂອງວິທີການລວມ 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. ການປະສົມປະສານ React ແລະ Sentry

ທ່ານຕ້ອງຕິດຕັ້ງແພັກເກັດ 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. ຫຼັງ​ຈາກ​ການ​ດໍາ​ເນີນ​ການ​ນີ້​ພວກ​ເຮົາ​ຄວນ​ຈະ​ໄດ້​ຮັບ​ຂໍ້​ຄວາມ​ຜິດ​ພາດ​: Uncaught TypeError (ບໍ່ສາມາດອ່ານຄຸນສົມບັດຈາກ undefined 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);

ຫຼັງຈາກປະສົມປະສານປຸ່ມນີ້, ທ່ານຄວນທົດສອບມັນຢູ່ໃນຕົວທ່ອງເວັບ.

ພວກເຮົາມີຄວາມຜິດພາດຄັ້ງທໍາອິດຂອງພວກເຮົາ

ວ້າວ!

ຖ້າທ່ານຄລິກໃສ່ຄວາມຜິດພາດ header, ທ່ານຈະເຫັນເປັນ stack trace.

ຂໍ້ຄວາມເບິ່ງບໍ່ດີ. ແນ່ນອນພວກເຮົາໄດ້ເຫັນຂໍ້ຄວາມສະແດງຂໍ້ຜິດພາດໂດຍບໍ່ເຂົ້າໃຈວ່າລະຫັດຢູ່ໃສ. ໂດຍຄ່າເລີ່ມຕົ້ນພວກເຮົາກໍາລັງເວົ້າກ່ຽວກັບແຜນທີ່ແຫຼ່ງໃນ ReactJS ເພາະວ່າພວກມັນບໍ່ໄດ້ຖືກຕັ້ງຄ່າ.

ຂ້າພະເຈົ້າຍັງຢາກຈະໃຫ້ຄໍາແນະນໍາສໍາລັບການຕັ້ງຄ່າແຜນທີ່ແຫຼ່ງ, ແຕ່ມັນຈະເຮັດໃຫ້ບົດຄວາມນີ້ຍາວກວ່າທີ່ຂ້ອຍຕັ້ງໃຈ.

ທ່ານສາມາດສຶກສາຫົວຂໍ້ນີ້ ທີ່ນີ້. ຖ້າທ່ານມີຄວາມສົນໃຈໃນບົດຄວາມນີ້, Dmitry Nozhenko ຈະເຜີຍແຜ່ພາກທີສອງກ່ຽວກັບການລວມເອົາແຜນທີ່ແຫຼ່ງ. ສະນັ້ນ, ກົດຖືກໃຈແລະຕິດຕາມເພີ່ມເຕີມ Dmitry Nozhenkoເພື່ອບໍ່ໃຫ້ພາດພາກທີສອງ.

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

ໃຫ້​ກວດ​ເບິ່ງ​ວິ​ທີ​ການ​:

• ລະດັບ ອະນຸຍາດໃຫ້ທ່ານໃສ່ຄວາມຜິດພາດໃນລະດັບເຂົ້າໄປໃນ dashboard sentry. ມັນມີຄຸນສົມບັດ - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical').
• setUser ຊ່ວຍບັນທຶກຂໍ້ມູນຜູ້ໃຊ້ໃດໆ (id, ທີ່ຢູ່ອີເມວ, ແຜນການຈ່າຍເງິນ, ແລະອື່ນໆ).
• setExtra ອະນຸຍາດໃຫ້ທ່ານລະບຸຂໍ້ມູນໃດໆທີ່ທ່ານຕ້ອງການ, ຕົວຢ່າງ, ເກັບຮັກສາ.

ຖ້າທ່ານຕ້ອງການໄດ້ຮັບຄໍາຕິຊົມຂອງຜູ້ໃຊ້ກ່ຽວກັບຂໍ້ຜິດພາດ, ທ່ານຄວນໃຊ້ຟັງຊັນ showReportDialog.

Sentry.showReportDialog();

ສະຫຼຸບ:

ມື້ນີ້ພວກເຮົາໄດ້ອະທິບາຍວິທີຫນຶ່ງທີ່ຈະລວມ Sentry ເຂົ້າໄປໃນຄໍາຮ້ອງສະຫມັກ React.

→ Telegram ສົນທະນາໂດຍ ທະຫານເຮືອ

ແຫຼ່ງຂໍ້ມູນ: www.habr.com