ការតាមដានកំហុសនៅក្នុងកម្មវិធី React ដោយប្រើ Sentry

ថ្ងៃនេះខ្ញុំនឹងប្រាប់អ្នកអំពីការតាមដានកំហុសក្នុងពេលជាក់ស្តែងនៅក្នុងកម្មវិធី React ។ កម្មវិធីផ្នែកខាងមុខមិនត្រូវបានប្រើជាធម្មតាសម្រាប់ការតាមដានកំហុសទេ។ ក្រុមហ៊ុនមួយចំនួនតែងតែបិទការតាមដានកំហុស ដោយត្រលប់ទៅវាវិញបន្ទាប់ពីឯកសារ ការធ្វើតេស្ត។ល។ យ៉ាង​ណា​មិញ ប្រសិន​បើ​អ្នក​អាច​ផ្លាស់​ប្តូ​រ​ផលិតផល​របស់​អ្នក​ឱ្យ​កាន់​តែ​ល្អ​ប្រសើរ​នោះ​គ្រាន់​តែ​ធ្វើ​វា​!

1. ហេតុអ្វីបានជាអ្នកត្រូវការ Sentry?

ខ្ញុំសន្មត់ថាអ្នកចាប់អារម្មណ៍ក្នុងការតាមដានកំហុសអំឡុងពេលផលិត

តើអ្នកគិតថានេះមិនគ្រប់គ្រាន់ទេ?

មិនអីទេ តោះមើលព័ត៌មានលម្អិត។

ហេតុផលកំពូលសម្រាប់អ្នកអភិវឌ្ឍន៍ក្នុងការប្រើប្រាស់ Sentry៖

• អនុញ្ញាតឱ្យអ្នកជៀសវាងហានិភ័យនៅពេលដាក់ពង្រាយកូដដែលមានកំហុស
• ជួយ QA ជាមួយការធ្វើតេស្តកូដ
• ទទួលបានការជូនដំណឹងរហ័សអំពីបញ្ហា
• សមត្ថភាពក្នុងការកែកំហុសយ៉ាងឆាប់រហ័ស
• ទទួលបានការបង្ហាញងាយស្រួលនៃកំហុសនៅក្នុងផ្ទាំងគ្រប់គ្រង
• តម្រៀបកំហុសតាមផ្នែកអ្នកប្រើប្រាស់/កម្មវិធីរុករក

ហេតុផលចម្បងសម្រាប់គម្រោងនាយកប្រតិបត្តិ/អ្នកដឹកនាំ

• សន្សំប្រាក់ (Sentry អាចត្រូវបានដំឡើងនៅលើម៉ាស៊ីនមេរបស់អ្នក)
• ទទួលបានមតិអ្នកប្រើ
• ស្វែងយល់ពីអ្វីដែលខុសជាមួយគម្រោងរបស់អ្នកក្នុងពេលជាក់ស្តែង
• ការយល់ដឹងអំពីចំនួនបញ្ហាដែលមនុស្សមានជាមួយកម្មវិធីរបស់អ្នក។
• ជួយអ្នកស្វែងរកកន្លែងដែលអ្នកអភិវឌ្ឍន៍របស់អ្នកមានកំហុស

ខ្ញុំគិតថាអ្នកអភិវឌ្ឍន៍នឹងចាប់អារម្មណ៍លើអត្ថបទនេះជាមុនសិន។ អ្នកក៏អាចប្រើបញ្ជីហេតុផលនេះដើម្បីបញ្ចុះបញ្ចូលចៅហ្វាយរបស់អ្នកឱ្យរួមបញ្ចូល Sentry ផងដែរ។

សូមប្រយ័ត្នជាមួយធាតុចុងក្រោយនៅក្នុងបញ្ជីអាជីវកម្ម។

តើអ្នកចាប់អារម្មណ៍ហើយឬនៅ?

តើ Sentry ជាអ្វី?

Sentry គឺជាកម្មវិធីតាមដានកំហុសប្រភពបើកចំហដែលជួយអ្នកអភិវឌ្ឍន៍តាមដាន និងជួសជុលការគាំងក្នុងពេលជាក់ស្តែង។ កុំភ្លេចថាកម្មវិធីអនុញ្ញាតឱ្យអ្នកបង្កើនប្រសិទ្ធភាព និងកែលម្អបទពិសោធន៍អ្នកប្រើប្រាស់។ Sentry គាំទ្រ JavaScript, Node, Python, PHP, Ruby, Java និងភាសាសរសេរកម្មវិធីផ្សេងទៀត។

2. ចូល និងបង្កើតគម្រោង

• បើកគណនី Sentry របស់អ្នក។ អ្នកប្រហែលជាត្រូវចូល។ (សូមចំណាំថា Sentry អាចត្រូវបានដំឡើងនៅលើម៉ាស៊ីនមេរបស់អ្នក)
• ជំហានបន្ទាប់គឺបង្កើតគម្រោង
• ជ្រើសរើសភាសារបស់អ្នកពីបញ្ជី។ (យើងនឹងជ្រើសរើស ប្រតិកម្ម។ ចុច "បង្កើតគម្រោង")

ប្ដូរកម្មវិធីរបស់អ្នកតាមបំណង។ ឧទាហរណ៍ជាមូលដ្ឋាននៃរបៀបបញ្ចូល 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. ការរួមបញ្ចូលប្រតិកម្ម និង Sentry

អ្នកត្រូវតែដំឡើងកញ្ចប់ npm នៅក្នុងគម្រោងរបស់អ្នក។

npm i @sentry/browser

ចាប់ផ្តើម Sentry នៅក្នុងធុងរបស់អ្នក៖

Sentry.init({
 // dsn: #dsnUrl,
});

DSN មានទីតាំងនៅក្នុង Projects -> Settings -> Client Keys។ អ្នកអាចស្វែងរកកូនសោនៅក្នុងរបារស្វែងរក។

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 (មិនអាចអានលក្ខណសម្បត្តិពីមិនបានកំណត់ 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);

បន្ទាប់ពីបញ្ចូលប៊ូតុងនេះ អ្នកគួរតែសាកល្បងវានៅក្នុងកម្មវិធីរុករក។

យើងមានកំហុសដំបូងរបស់យើង។

ហូហូ!

ប្រសិនបើអ្នកចុចលើកំហុសបឋមកថា អ្នកនឹងឃើញដានជង់។

សារមើលទៅអាក្រក់។ ជា​ការ​ពិត​ណាស់​យើង​បាន​ឃើញ​សារ​កំហុស​ដោយ​មិន​យល់​ពី​កន្លែង​ដែល​កូដ​នោះ​។ តាមលំនាំដើម យើងកំពុងនិយាយអំពីផែនទីប្រភពនៅក្នុង ReactJS ព្រោះវាមិនត្រូវបានកំណត់រចនាសម្ព័ន្ធទេ។

ខ្ញុំ​ក៏​ចង់​ផ្តល់​ការណែនាំ​សម្រាប់​ការ​បង្កើត​ផែនទី​ប្រភព ប៉ុន្តែ​វា​នឹង​ធ្វើ​ឱ្យ​អត្ថបទ​នេះ​វែង​ជាង​អ្វី​ដែល​ខ្ញុំ​ចង់​បាន។

អ្នកអាចសិក្សាប្រធានបទនេះ។ នៅទីនេះ. ប្រសិនបើអ្នកចាប់អារម្មណ៍អត្ថបទនេះ, លោក Dmitry Nozhenko នឹងបោះពុម្ពផ្នែកទីពីរអំពីការរួមបញ្ចូលផែនទីប្រភព។ ដូច្នេះសូមចុច Like និង Subscribe បន្ថែមទៀត លោក Dmitry Nozhenkoដើម្បីកុំឱ្យខកខានផ្នែកទីពីរ។

ការប្រើប្រាស់ ឆ្មាំ។ ជាមួយនឹងចំណុចបញ្ចប់ ការ 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));
      }
    });
};

តោះពិនិត្យមើលវិធីសាស្រ្ត៖

• កម្រិតកំណត់ អនុញ្ញាតឱ្យអ្នកបញ្ចូលកំហុសកម្រិតមួយទៅក្នុងផ្ទាំងគ្រប់គ្រងការបញ្ជូន។ វាមានលក្ខណៈសម្បត្តិ - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'critical') ។
• កំណត់អ្នកប្រើប្រាស់ ជួយរក្សាទុកទិន្នន័យអ្នកប្រើប្រាស់ណាមួយ (លេខសម្គាល់ អាសយដ្ឋានអ៊ីមែល ផែនការទូទាត់។ល។)។
• កំណត់បន្ថែម អនុញ្ញាតឱ្យអ្នកបញ្ជាក់ទិន្នន័យណាមួយដែលអ្នកត្រូវការ ឧទាហរណ៍ រក្សាទុក។

ប្រសិនបើអ្នកចង់ទទួលបានមតិអ្នកប្រើអំពីកំហុស អ្នកគួរតែប្រើមុខងារ showReportDialog។

Sentry.showReportDialog();

សេចក្តីសន្និដ្ឋាន:

ថ្ងៃនេះយើងបានពណ៌នាអំពីវិធីមួយក្នុងការបញ្ចូល Sentry ទៅក្នុងកម្មវិធី React ។

→ Telegram ជជែកដោយ ឆ្មាំ។

ប្រភព: www.habr.com