Sentry ការត្រួតពិនិត្យពីចម្ងាយនៃកំហុសនៅក្នុងកម្មវិធី React frontend

យើងកំពុងស្វែងរកការប្រើប្រាស់ Sentry ជាមួយ React។

អត្ថបទនេះគឺជាផ្នែកមួយនៃស៊េរីដែលចាប់ផ្តើមជាមួយនឹងការរាយការណ៍កំហុស Sentry ដោយប្រើឧទាហរណ៍មួយ៖ ផ្នែកនៃ 1.

ការអនុវត្តប្រតិកម្ម

ដំបូងយើងត្រូវបន្ថែមគម្រោង Sentry ថ្មីសម្រាប់កម្មវិធីនេះ។ ពីគេហទំព័រ Sentry ។ ក្នុងករណីនេះយើងជ្រើសរើស React ។

យើងនឹងអនុវត្តឡើងវិញនូវប៊ូតុងពីររបស់យើងគឺ Hello និង Error នៅក្នុងកម្មវិធីជាមួយ 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,
  });
}
...

ការសង្កេត៖

• ក្នុងអំឡុងពេលនៃការអភិវឌ្ឍន៍ យើងមានយន្តការផ្សេងទៀតសម្រាប់ត្រួតពិនិត្យបញ្ហា ដូចជាកុងសូល ដូច្នេះយើងបើកដំណើរការតែ Sentry សម្រាប់ការបង្កើតផលិតកម្មប៉ុណ្ណោះ។

បន្ទាប់មក យើងអនុវត្តប៊ូតុង Hello និង Error របស់យើង ហើយបន្ថែមវាទៅក្នុងកម្មវិធី៖

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 បញ្ចូល៖

npx http-server -c-1

បញ្ហាដែលយើងដំណើរការភ្លាមៗគឺថា កំណត់ត្រាកំហុសរបស់ Sentry សំដៅលើលេខបន្ទាត់នៅក្នុងក្រុមដែលបានបង្រួមតូច។ មិនមានប្រយោជន៍ខ្លាំងណាស់។

សេវា Sentry ពន្យល់រឿងនេះដោយទាញផែនទីប្រភពសម្រាប់កញ្ចប់ព័ត៌មានដែលបានកាត់បន្ថយបន្ទាប់ពីទទួលបានកំហុស។ ក្នុងករណីនេះយើងកំពុងដំណើរការពី localhost (មិនអាចចូលប្រើបានដោយសេវា Sentry)។

ដំណោះស្រាយ (ផែនទីប្រភព)

ដំណោះស្រាយចំពោះបញ្ហានេះគឺត្រូវដំណើរការកម្មវិធីពីម៉ាស៊ីនមេបណ្តាញសាធារណៈ។ ប៊ូតុងឆ្លើយតបដ៏សាមញ្ញមួយដើម្បីប្រើប្រាស់សេវាកម្ម GitHub Pages (ឥតគិតថ្លៃ)។ ជំហានក្នុងការប្រើប្រាស់ជាធម្មតាមានដូចខាងក្រោម៖

1. ចម្លងមាតិកានៃថតឯកសារ ស្ថាបនា ទៅថត ឯកសារ នៅក្នុងថត root នៃឃ្លាំង។

2. បើក ហ្គីតហបទំព័រ។ នៅក្នុងឃ្លាំង (ពី GitHub) ដើម្បីប្រើថតឯកសារនៅក្នុង មេ សាខា។

3. ជំរុញការផ្លាស់ប្តូរទៅ GitHub

ការកត់សម្គាល់៖ បន្ទាប់​ពី​ខ្ញុំ​រក​ឃើញ​អ្វី​ដែល​ខ្ញុំ​ត្រូវ​ប្រើ បង្កើត-បង្កើត-កម្មវិធី មុខងារទំព័រដើម ដើម្បីបើកដំណើរការកម្មវិធី។ បានចុះមកដើម្បីបន្ថែមដូចខាងក្រោមទៅ package.json៖

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

កំណែចុងក្រោយនៃកម្មវិធីដែលកំពុងដំណើរការមាននៅ៖

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

រូបភាពនៃ Caught Bugs

តោះ​ចូល​ទៅ​ចុច​ប៊ូតុង Hello។

ជាមួយនឹងកំហុសលេចឡើងដូចនេះ៖

ការសង្កេត៖

• របាយការណ៍កំហុសនេះមិនអាចច្បាស់ជាងនេះទេ ប្រោអូ.

រូបភាពនៃ Unaccounted សម្រាប់កំហុស

ដូចគ្នានេះដែរសូមចូលទៅតាមរយៈការចុចប៊ូតុង កំហុសក្នុងការ.

ជាមួយនឹងកំហុសលេចឡើងដូចនេះ៖

ការ​ដោះស្រាយ​កំហុស​ដែល​មិន​បាន​គណនី​បាន​ល្អ​ប្រសើរ (ការ​បង្ហាញ​)

សេចក្តីផ្តើមនៃដែនកំណត់កំហុស

កំហុស JavaScript នៅក្នុងផ្នែកនៃចំណុចប្រទាក់អ្នកប្រើមិនគួរបំបែកកម្មវិធីទាំងមូលទេ។ ដើម្បីដោះស្រាយបញ្ហានេះសម្រាប់អ្នកប្រើប្រាស់ React React 16 ណែនាំនូវគោលគំនិតថ្មីហៅថា "error bounds"។

ព្រំដែនកំហុសគឺជាសមាសធាតុ React ដែលចាប់កំហុស JavaScript គ្រប់ទីកន្លែងនៅក្នុងមែកធាងសមាសភាគកូនរបស់ពួកគេ កត់ត្រាកំហុសទាំងនោះ និងបង្កើត UI ជំនួសជំនួសមែកធាងសមាសភាគដែលបានគាំង។ ព្រំដែនកំហុសចាប់កំហុសកំឡុងពេលបង្ហាញ វិធីសាស្រ្តវដ្តជីវិត និងនៅក្នុងអ្នកសាងសង់ដើមឈើទាំងមូលនៅខាងក្រោមពួកវា។

...

ឥរិយាបថថ្មីសម្រាប់កំហុសដែលមិនបានរកឃើញ

ការផ្លាស់ប្តូរនេះគឺសំខាន់។ គិតត្រឹម React 16 កំហុសដែលមិនត្រូវបានចាប់បានដោយព្រំដែនកំហុសណាមួយនឹងបណ្តាលឱ្យមែកធាងសមាសភាគ React ទាំងមូលត្រូវបានដកចេញ។

- Dan Abramov - ការដោះស្រាយកំហុសក្នុងប្រតិកម្ម ១៦

ការ​បញ្ជាក់​ដ៏​សំខាន់​មួយ​ដែល​បាន​ចំណាយ​ពេល​មួយ​រយៈ​មុន​ពេល​ខ្ញុំ​ដឹង​ថា​នេះ​ជា​រឿង​នោះ។ ឥរិយាបថខាងលើដំណើរការតែជាមួយកំហុសដែលបានបោះចោលនៅក្នុងវិធីសាស្ត្របង្ហាញ (ឬទំនងជានៅក្នុងវិធីណាមួយនៃវដ្តជីវិត). ឧទាហរណ៍ ការប្រើ​ព្រំដែន​កំហុស​នឹង​មិន​ធ្វើ​អ្វី​ល្អ​ជាមួយ​នឹង​ប៊ូតុង​របស់​យើង​ទេ។ កំហុសក្នុងការ; កំហុសនេះគឺនៅក្នុងកម្មវិធីគ្រប់គ្រងការចុច។

តោះបង្កើតឧទាហរណ៍បង្ហាញកំហុស ហើយបន្ទាប់មកប្រើព្រំដែនកំហុស ដើម្បីដោះស្រាយកំហុសកាន់តែល្អ

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

ការសង្កេត៖

• នៅពេលអ្នកចុចប៊ូតុង, ប្រតិកម្ម នឹងត្រូវបានបង្ហាញ flag.busted.bogusដែលបង្កើតកំហុស

• បើគ្មានព្រំដែនកំហុសទេ មែកធាងសមាសភាគទាំងមូលនឹងមិនត្រូវបានភ្ជាប់

បន្ទាប់មកយើងសរសេរកូដព្រំដែនកំហុសរបស់យើង (ប្រើវិធីសាស្ត្រវដ្តជីវិតថ្មី។ សមាសភាគ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>
    );
  }
}
...

ទោះយ៉ាងណាក៏ដោយ ការចុចប៊ូតុង បង្ហាញកំហុសបង្ហាញ UI ត្រលប់មកវិញ ហើយរាយការណ៍ពីកំហុសទៅ Sentry ។

ការបញ្ចប់

ខ្ញុំសង្ឃឹមថាអ្នកបានរកឃើញវាមានប្រយោជន៍។

PS ភ្ជាប់ទៅដើម

PS Telegram ជជែកតាម Sentry https://t.me/sentry_ru

ប្រភព: www.habr.com