🥇Мониторинги фосилавии иштибоҳҳо дар барномаҳои React frontend

Мо бо истифода аз Sentry бо React омӯхта истодаем.

Ин мақола як қисми силсилаест, ки бо гузориш додани хатогиҳои Sentry бо истифода аз мисол сар мешавад: Қисми 1.

Амалисозии React

Аввалан мо бояд барои ин барнома лоиҳаи нави 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,
  });
}
...

Мушоҳидаҳо:

Ҳангоми таҳия, мо механизмҳои дигари мониторинги мушкилот дорем, ба монанди консол, аз ин рӯ мо танҳо 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

ва аз папкаи сохтмон ворид кунед:

npx http-server -c-1

Мушкилоте, ки мо дарҳол рӯ ба рӯ мешавем, ин аст, ки сабтҳои хатогиҳои Sentry ба рақамҳои сатр дар партияи хурдкардашуда ишора мекунанд; чандон фоиданок нест.

Хадамоти Sentry инро бо кашидани харитаҳои манбаъ барои бастаи камшуда пас аз гирифтани хато шарҳ медиҳад. Дар ин ҳолат мо аз localhost кор мекунем (хизмати Sentry дастрас нест).

Ҳалли (Харитаҳои манбаъ)

Ҳалли ин мушкилот ин аст, ки барнома аз веб-сервери ҷамъиятӣ иҷро карда шавад. Як тугмаи оддии ҷавоб барои истифодаи хидмати GitHub Pages (ройгон). Қадамҳои истифода одатан чунинанд:

Мундариҷаи ҷузвдонро нусхабардорӣ кунед сохтан ба папка Docs дар директорияи решаи анбор.
Кушоед Саҳифаҳои GitHub дар анбор (аз GitHub) барои истифода бурдани ҷузвдони ҳуҷҷатҳо дар усто филиалҳо
Тағиротро ба GitHub пахш кунед

эрод гирифтан: пас аз он ки ман фаҳмидам, ки ман чӣ бояд истифода кунам эҷод-эҷод-барнома Функсияи саҳифаи хонагӣ барои оғози барнома. Барои илова кардани инҳо ба package.json омад:

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

Варианти ниҳоии барномаи иҷрошаванда дар ин ҷо дастрас аст:

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

Тасвири хатоҳои дастгиршуда

Биёед бо зеркунии тугмаи Салом қадам гузорем.

Бо чунин хато пайдо мешавад:

Мушоҳидаҳо:

Ин гузориш дар бораи хатогиҳо равшантар шуда наметавонист, BRAVO.

Тасвири хатогиҳои баҳисобгирӣ

Ба ҳамин монанд, биёед тугмаро пахш кунем хатогӣ.

Бо чунин хато пайдо мешавад:

Муносибати беҳтари хатогиҳои баҳисобгирифташуда (намоиш)

Ҷорӣ намудани маҳдудиятҳои хатогиҳо

Хатогии 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,
    });
  }
}

Мушоҳида:

Вақте ки шумо тугмаро пахш мекунед, Натиҷа намоиш дода мешавад flag.busted.bogus, ки хатогиро ба вуҷуд меорад
Бе сарҳади хато, тамоми дарахти компонент ҷудо карда мешавад

Сипас, мо рамзи сарҳади хатогиҳои худро менависем (усули нави давраи ҳаётро истифода мебарад 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>
    );
  }
}
...

Аммо, пахш кардани тугмаи Render Error UI-и бозгаштро нишон медиҳад ва дар бораи хато ба Sentry хабар медиҳад.

Натиҷа

Ман умедворам, ки шумо ин муфид ёфтед.

PS Истинод ба аслӣ

Чати PS Telegram тавассути Sentry https://t.me/sentry_ru

Манбаъ: will.com

Sentry мониторинги дурдасти хатогиҳо дар барномаҳои Frontend React

Илова Эзоҳ Cancel ҷавоб