🥇React frontend қолданбаларындағы қателерді қашықтан бақылау ProHoster

Біз React көмегімен Sentry пайдалануды зерттеп жатырмыз.

Бұл мақала мысал арқылы 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 мүмкіндігін қосамыз

Содан кейін біз «Сәлем» және «Қате» түймелерін қолданамыз және оларды қолданбаға қосамыз:

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/

Ұсталған қателердің иллюстрациясы

«Сәлем» түймесін басу арқылы өтейік.

Мынадай қате пайда болғанда:

Бақылаулар:

Бұл қате туралы есеп анық болуы мүмкін емес, БРАВО.

Есепке алынбаған қателердің иллюстрациясы

Сол сияқты, түймені басу арқылы өтейік қателік.

Мынадай қате пайда болғанда:

Есептелмеген қателерді жақсырақ өңдеу (көрсету)

Қателік шектеулерді енгізу

Пайдаланушы интерфейсінің бір бөлігіндегі JavaScript қатесі бүкіл қолданбаны бұзбауы керек. React пайдаланушылары үшін бұл мәселені шешу үшін React 16 «қате шекаралары» деп аталатын жаңа тұжырымдаманы ұсынады.

Қате шекаралары - JavaScript қателерін еншілес құрамдас тармағының кез келген жерінен ұстайтын, сол қателерді тіркейтін және бұзылған құрамдас ағашының орнына қалпына келтіру интерфейсін көрсететін React құрамдастары. Қате шекаралары көрсету кезінде, өмірлік цикл әдістерінде және олардың астындағы бүкіл ағаштың конструкторларында қателерді ұстайды.

...

Анықталмаған қателер үшін жаңа әрекет

Бұл өзгеріс маңызды. React 16-дан бастап қате шекарасы анықталмаған қателер бүкіл 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>
    );
  }
}
...

Дегенмен, "Рендеринг қатесі" түймешігін басу резервтік пайдаланушы интерфейсін көрсетеді және қате туралы Sentry қызметіне хабарлайды.

Аяқтау

Сізге бұл пайдалы болды деп үміттенемін.

PS Түпнұсқаға сілтеме

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

Ақпарат көзі: www.habr.com

React frontend қолданбаларындағы қателерді қашықтан бақылау

пікір қалдыру Жауапты болдырмау