Sentry ການກວດສອບຂໍ້ບົກພ່ອງທາງໄກໃນແອັບພລິເຄຊັນ React frontend

ພວກເຮົາກໍາລັງຄົ້ນຫາການນໍາໃຊ້ Sentry ກັບ React.

ບົດຄວາມນີ້ແມ່ນສ່ວນຫນຶ່ງຂອງຊຸດທີ່ເລີ່ມຕົ້ນດ້ວຍການລາຍງານຄວາມຜິດພາດ Sentry ໂດຍໃຊ້ຕົວຢ່າງ: ສ່ວນ 1.

ການປະຕິບັດປະຕິກິລິຍາ

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

ພວກເຮົາຈະປະຕິບັດສອງປຸ່ມຂອງພວກເຮົາ, ສະບາຍດີແລະຂໍ້ຜິດພາດ, ໃນແອັບພລິເຄຊັນທີ່ມີ React. ພວກເຮົາເລີ່ມຕົ້ນໂດຍການສ້າງຄໍາຮ້ອງສະຫມັກເລີ່ມຕົ້ນຂອງພວກເຮົາ:

npx create-react-app react-app

ຫຼັງຈາກນັ້ນ, ພວກເຮົານໍາເຂົ້າຊຸດ Sentry:

yarn add @sentry/browser

ແລະ​ເລີ່ມ​ຕົ້ນ​ມັນ​:

react-app/src/index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://[email protected]/1289887',
    release: RELEASE,
  });
}
...

ຂໍ້ສັງເກດ:

• ໃນ​ລະ​ຫວ່າງ​ການ​ພັດ​ທະ​ນາ​, ພວກ​ເຮົາ​ມີ​ກົນ​ໄກ​ອື່ນໆ​ສໍາ​ລັບ​ການ​ຕິດ​ຕາມ​ບັນ​ຫາ​, ເຊັ່ນ​: console​, ດັ່ງ​ນັ້ນ​ພວກ​ເຮົາ​ພຽງ​ແຕ່​ເປີດ Sentry ສໍາ​ລັບ​ການ​ຜະ​ລິດ​ການ​ຜະ​ລິດ​.

ຕໍ່ໄປ, ພວກເຮົາປະຕິບັດປຸ່ມສະບາຍດີແລະຄວາມຜິດພາດຂອງພວກເຮົາແລະເພີ່ມໃຫ້ເຂົາເຈົ້າໃນຄໍາຮ້ອງສະຫມັກ:

react-app/src/Hello.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

react-app/src/MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () => {
    throw new Error('Uncaught');
  }
}

react-app/src/App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

ບັນຫາ (ແຜນທີ່ແຫຼ່ງ)

ພວກເຮົາສາມາດທົດສອບ Sentry ດ້ວຍການສ້າງການຜະລິດໂດຍການເຂົ້າ:

yarn build

ແລະຈາກ build folder ໃສ່:

npx http-server -c-1

ບັນຫາທີ່ພວກເຮົາແລ່ນເຂົ້າໄປໃນທັນທີແມ່ນວ່າບັນທຶກຄວາມຜິດພາດຂອງ Sentry ຫມາຍເຖິງຕົວເລກແຖວໃນ batch ຫຍໍ້; ບໍ່ມີປະໂຫຍດຫຼາຍ.

ການບໍລິການ Sentry ອະທິບາຍເລື່ອງນີ້ໂດຍການດຶງແຜນທີ່ແຫຼ່ງສໍາລັບແພັກເກັດທີ່ຫຼຸດລົງຫຼັງຈາກໄດ້ຮັບຂໍ້ຜິດພາດ. ໃນກໍລະນີນີ້ພວກເຮົາກໍາລັງແລ່ນຈາກ localhost (ບໍ່ສາມາດເຂົ້າເຖິງໄດ້ໂດຍບໍລິການ Sentry).

ວິທີແກ້ໄຂ (ແຜນທີ່ແຫຼ່ງຂໍ້ມູນ)

ການແກ້ໄຂບັນຫານີ້ແມ່ນການດໍາເນີນການຄໍາຮ້ອງສະຫມັກຈາກເຄື່ອງແມ່ຂ່າຍເວັບໄຊຕ໌ສາທາລະນະ. ປຸ່ມຕອບກັບງ່າຍໆອັນດຽວເພື່ອໃຊ້ບໍລິການ GitHub Pages (ຟຣີ). ຂັ້ນ​ຕອນ​ການ​ນໍາ​ໃຊ້​ແມ່ນ​ປົກ​ກະ​ຕິ​ດັ່ງ​ຕໍ່​ໄປ​ນີ້​:

1. ຄັດລອກເນື້ອໃນຂອງໂຟນເດີ ການກໍ່ສ້າງ ໄປຫາໂຟນເດີ ເອກະສານ ໃນໄດເລກະທໍລີຮາກຂອງ repository.

2. ເປີດ ໜ້າ GitHub ຢູ່ໃນບ່ອນເກັບມ້ຽນ (ຈາກ GitHub) ເພື່ອໃຊ້ໂຟເດີ docs ໃນ ຕົ້ນສະບັບ ສາຂາ

3. ຊຸກຍູ້ການປ່ຽນແປງໄປຫາ GitHub

Примечание: ຫຼັງຈາກທີ່ຂ້ອຍຄິດອອກສິ່ງທີ່ຂ້ອຍຈໍາເປັນຕ້ອງໃຊ້ create-create-app ຟັງຊັນໜ້າຫຼັກເພື່ອເປີດແອັບພລິເຄຊັນ. ລົງມາເພື່ອເພີ່ມສິ່ງຕໍ່ໄປນີ້ໃສ່ package.json:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

ເວີຊັ່ນສຸດທ້າຍຂອງແອັບພລິເຄຊັນທີ່ເຮັດວຽກແມ່ນມີຢູ່:

https://larkintuckerllc.github.io/hello-sentry/

ພາບປະກອບຂອງແມງໄມ້ທີ່ຈັບໄດ້

ຍ່າງໄປໂດຍການຄລິກປຸ່ມສະບາຍດີ.

ມີ​ຄວາມ​ຜິດ​ພາດ​ປະ​ກົດ​ວ່າ​ດັ່ງ​ນີ້​:

ຂໍ້ສັງເກດ:

• ລາຍງານຂໍ້ຜິດພາດນີ້ບໍ່ສາມາດຈະແຈ້ງກວ່າ, ບຣາໂວ.

ຮູບປະກອບຂອງ Unaccounted ສໍາລັບຄວາມຜິດພາດ

ເຊັ່ນດຽວກັນ, ໃຫ້ໄປໂດຍຜ່ານການຄລິກປຸ່ມ Error.

ມີ​ຄວາມ​ຜິດ​ພາດ​ປະ​ກົດ​ວ່າ​ດັ່ງ​ນີ້​:

ການ​ຈັດ​ການ​ທີ່​ດີກ​ວ່າ​ຂອງ​ຄວາມ​ຜິດ​ພາດ​ທີ່​ບໍ່​ໄດ້​ບັນ​ຊີ (rendering​)

ການແນະນຳຂໍ້ຈຳກັດຄວາມຜິດພາດ

ຂໍ້ຜິດພາດຂອງ JavaScript ໃນສ່ວນຂອງສ່ວນຕິດຕໍ່ຜູ້ໃຊ້ບໍ່ຄວນທໍາລາຍແອັບພລິເຄຊັນທັງຫມົດ. ເພື່ອແກ້ໄຂບັນຫານີ້ສໍາລັບຜູ້ໃຊ້ React, React 16 ແນະນໍາແນວຄວາມຄິດໃຫມ່ທີ່ເອີ້ນວ່າ "error bounds".

ຂອບເຂດຄວາມຜິດພາດແມ່ນອົງປະກອບ React ທີ່ຈັບຂໍ້ຜິດພາດຂອງ JavaScript ຢູ່ທຸກບ່ອນໃນຕົ້ນໄມ້ອົງປະກອບຂອງລູກຂອງພວກເຂົາ, ບັນທຶກຄວາມຜິດພາດເຫຼົ່ານັ້ນ, ແລະສະແດງ UI ກັບຄືນແທນຕົ້ນໄມ້ອົງປະກອບທີ່ crashed. ຂອບເຂດຄວາມຜິດພາດຈັບຄວາມຜິດພາດໃນລະຫວ່າງການສະແດງຜົນ, ໃນວິທີການ lifecycle, ແລະໃນຜູ້ກໍ່ສ້າງຕົ້ນໄມ້ທັງຫມົດຂ້າງລຸ່ມນີ້.

...

ພຶດຕິກໍາໃຫມ່ສໍາລັບຄວາມຜິດພາດທີ່ບໍ່ໄດ້ກວດພົບ

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

- Dan Abramov - ການຈັດການຄວາມຜິດພາດໃນ React 16

ຄວາມກະຈ່າງແຈ້ງທີ່ສໍາຄັນທີ່ເຮັດໃຫ້ຂ້ອຍໃຊ້ເວລາຫນຶ່ງກ່ອນທີ່ຂ້ອຍຈະຮູ້ວ່ານີ້ແມ່ນສິ່ງນັ້ນ ພຶດຕິກໍາຂ້າງເທິງນີ້ພຽງແຕ່ເຮັດວຽກກັບຄວາມຜິດພາດທີ່ຖິ້ມໃນວິທີການ render (ຫຼືອາດຈະຫຼາຍກວ່າໃນວິທີການ lifecycle ໃດ). ຕົວຢ່າງ, ການໃຊ້ຂອບເຂດຄວາມຜິດພາດຈະບໍ່ເຮັດດີກັບປຸ່ມຂອງພວກເຮົາ Error; ຄວາມຜິດພາດນີ້ແມ່ນຢູ່ໃນຕົວຈັດການຄລິກ.

ໃຫ້ພວກເຮົາສ້າງຕົວຢ່າງ render error ແລະຫຼັງຈາກນັ້ນໃຊ້ error bounds ເພື່ອຈັດການຄວາມຜິດພາດໄດ້ຢ່າງສະຫງ່າງາມ.

react-app/src/MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      flag: true,
    });
  }
}

ການສັງເກດ:

• ເມື່ອທ່ານກົດປຸ່ມ, React ຈະຖືກສະແດງ flag.busted.bogus, ເຊິ່ງສ້າງຄວາມຜິດພາດ

• ຖ້າບໍ່ມີຂອບເຂດຄວາມຜິດພາດ, ຕົ້ນໄມ້ອົງປະກອບທັງໝົດຈະຖືກຖອນການເຊື່ອມຕໍ່

ຫຼັງຈາກນັ້ນ, ພວກເຮົາຂຽນລະຫັດຂອບເຂດຄວາມຜິດພາດຂອງພວກເຮົາ (ໃຊ້ວິທີການ lifecycle ໃຫມ່ ສ່ວນປະກອບDidCatch); ນີ້ແມ່ນຕົວຢ່າງທີ່ສໍາຄັນໃນບົດຄວາມຂອງ Dan Abramov:

react-app/src/ErrorBoundary.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

ສຸດທ້າຍພວກເຮົາໃຊ້ອົງປະກອບນີ້:

react-app/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

ແນວໃດກໍ່ຕາມ, ການຄລິກປຸ່ມ Render Error ສະແດງ UI ສຳຮອງ ແລະລາຍງານຂໍ້ຜິດພາດຕໍ່ກັບ Sentry.

ການສໍາເລັດ

ຂ້ອຍຫວັງວ່າເຈົ້າພົບວ່າອັນນີ້ເປັນປະໂຫຍດ.

PS ເຊື່ອມຕໍ່ກັບຕົ້ນສະບັບ

PS Telegram ສົນທະນາຜ່ານ Sentry https://t.me/sentry_ru

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