🥇React frontend тиркемелериндеги мүчүлүштүктөрдү алыстан көзөмөлдөө ProHoster

Биз Sentry менен React колдонууну изилдеп жатабыз.

Бул макала мисал аркылуу Сентри каталарын кабарлоо менен башталган сериянын бир бөлүгү: бөлүгү 1.

React ишке ашыруу

Биринчиден, биз бул колдонмо үчүн жаңы Сентри долбоорун кошуу керек; Sentry сайтынан. Бул учурда биз React тандайбыз.

Биз React менен тиркемеде эки баскычыбызды, Hello жана Error, кайра ишке ашырабыз. Стартер колдонмобузду түзүү менен баштайбыз:

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

Байкоо:

Иштеп чыгуу учурунда бизде консол сыяктуу көйгөйлөргө мониторинг жүргүзүү үчүн башка механизмдер бар, ошондуктан биз өндүрүштү куруу үчүн Сентриди гана иштетебиз

Андан кийин биз 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;

Көйгөй (Булак карталары)

Биз Сентриди өндүрүштүк түзүлүш менен сынай алабыз:

yarn build

жана куруу папкасынан төмөнкүнү киргизиңиз:

npx http-server -c-1

Биз дароо туш болгон көйгөй, Сентридин ката жазуулары кичирейтилген партиядагы саптардын номерлерине тиешелүү; абдан пайдалуу эмес.

Сентри кызматы муну ката алгандан кийин кыскартылган пакет үчүн булак карталарын тартуу менен түшүндүрөт. Бул учурда биз localhost'тан иштеп жатабыз (Sentry кызматы тарабынан жеткиликтүү эмес).

Чечимдер (Булак карталары)

Бул көйгөйдүн чечими тиркемени жалпыга ачык веб-серверден иштетүү болуп саналат. GitHub Pages кызматын колдонуу үчүн бир жөнөкөй жооп баскычы (акысыз). колдонуу үчүн кадамдар, адатта, төмөнкүдөй:

Папканын мазмунун көчүрүңүз куруу папкага Документтер репозиторийдин түпкү каталогунда.
Күйгүзүү GitHub баракчалары репозиторийде (GitHubдан) документтер папкасын колдонуу үчүн кожоюн бутактары
Өзгөртүүлөрдү GitHub'ка түртүңүз

пикир: Мен эмнени колдонушум керектигин түшүнгөндөн кийин колдонмо түзүү-түзүү колдонмону ишке киргизүү үчүн башкы бет функциясы. Package.json файлына төмөнкүлөрдү кошууга келдим:

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

Иштеп жаткан колдонмонун акыркы версиясы төмөнкү даректе жеткиликтүү:

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

Кармалган мүчүлүштүктөрдүн иллюстрациясы

"Салам" баскычын басып өтөлү.

Ката төмөнкүдөй пайда болгондо:

Байкоо:

Бул мүчүлүштүк тууралуу отчет такыраак болушу мүмкүн эмес, МЫКТЫ ЖАСАЛДЫ.

Эсепке алынбаган каталардын иллюстрациясы

Ошо сыяктуу эле, баскычты чыкылдатууну карап көрөлү ката.

Ката төмөнкүдөй пайда болгондо:

Эсепке алынбаган каталарды жакшыраак иштетүү (көрсөтүү)

Ката чектерин киргизүү

Колдонуучу интерфейсинин бир бөлүгүндөгү JavaScript катасы колдонмону толугу менен бузбашы керек. React колдонуучулары үчүн бул көйгөйдү чечүү үчүн, React 16 "ката чектери" деп аталган жаңы концепцияны киргизет.

Ката чек аралары – бул React компоненттери, алар өздөрүнүн бала компоненттер дарагынын каалаган жеринде JavaScript каталарын кармап, ал каталарды журналга киргизип, бузулган компонент дарагынын ордуна кайра UI көрсөтөт. Ката чектери рендеринг учурунда, жашоо циклинин ыкмаларында жана алардын астындагы бүт дарактын конструкторлорунда каталарды кармайт.

...

Белгисиз каталар үчүн жаңы жүрүм-турум

Бул өзгөрүү маанилүү. React 16га карата, эч кандай ката чеги менен кармалбаган каталар бүтүндөй React компоненти дарагынын ажыратылышына алып келет.

- Дан Абрамов - React 16дагы каталарды иштетүү

Мен муну түшүнгөнгө чейин бир аз убакыт талап кылган маанилүү түшүндүрмө бул жогорудагы жүрүм-турум көрсөтүү методунда ташталган каталар менен гана иштейт (же жашоо циклинин кандайдыр бир ыкмаларында көбүрөөк). Мисалы, ката чектерин колдонуу биздин баскыч менен эч кандай жакшылыкка алып келбейт ката; бул ката чыкылдатуу иштеткичинде болгон.

Келгиле, катаны көрсөтүүнүн мисалын түзөлү, анан катаны жакшыраак чечүү үчүн ката чегин колдонолу.

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

Байкоо:

баскычын басканда, иш-аракет кылгыла көрсөтүлөт желек.басылган.жасалма, бул катаны жаратат
Ката чексиз, бүт компонент дарагы ажыратылат

Андан кийин биз ката чек кодун жазабыз (жашоо циклинин жаңы ыкмасын колдонот komponentDidCatch); Бул негизинен Дан Абрамовдун макаласында келтирилген мисал:

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 көрсөтүлөт жана Сентриге ката жөнүндө кабарлайт.

айактоо

Бул сизге пайдалуу болду деп үмүттөнөм.

PS Түпнуска шилтеме

Sentry аркылуу PS Telegram чаты https://t.me/sentry_ru

Source: www.habr.com

React frontend тиркемелериндеги мүчүлүштүктөрдү алыстан көзөмөлдөө

Комментарий кошуу жокко жооп