🥇Sentry удаленный мониторинг багов в фронтенд приложениях React

Мы изучаем использование Sentry с React.

Ky artikull është pjesë e një serie që fillon me raportimin e gabimeve Sentry duke përdorur një shembull: Pjesë 1.

Zbatimi i React

Fillimisht duhet të shtojmë një projekt të ri Sentry për këtë aplikacion; nga faqja e internetit Sentry. Në këtë rast zgjedhim React.

Ne do të ri-zbatojmë dy butonat tanë, Hello dhe Error, në një aplikacion me React. Ne fillojmë duke krijuar aplikacionin tonë fillestar:

npx create-react-app react-app

Pastaj ne importojmë paketën Sentry:

yarn add @sentry/browser

dhe inicializoni atë:

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

Vëzhgimet:

Gjatë zhvillimit, ne kemi mekanizma të tjerë për monitorimin e çështjeve, si p.sh. tastierën, kështu që ne aktivizojmë Sentry vetëm për ndërtimet e prodhimit

Më pas ne implementojmë butonat tanë Hello dhe Error dhe i shtojmë ato në aplikacion:

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;

Problemi (Hartat e burimit)

Ne mund të testojmë Sentry me një ndërtim prodhimi duke futur:

yarn build

и из build папки введите:

npx http-server -c-1

Problemi që hasim menjëherë është se të dhënat e gabimit të Sentry i referohen numrave të rreshtave në grupin e minuar; jo shumë i dobishëm.

Shërbimi Sentry e shpjegon këtë duke tërhequr hartat e burimit për paketën e reduktuar pas marrjes së një gabimi. Në këtë rast, ne po ekzekutojmë nga localhost (jo i aksesueshëm nga shërbimi Sentry).

Решения (Исходные Карты)

Решение этой проблемы сводится к запуску приложения с общедоступного веб-сервера. Одна простая кнопка ответа на него, чтобы использовать сервис GitHub Pages (бесплатно). Шаги для использования обычно следующие:

Kopjoni përmbajtjen e dosjes ndërtuar në dosje docs në direktoriumin rrënjë të depove.
Ndez Faqet GitHub në depo (nga GitHub) për të përdorur dosjen e dokumenteve në mjeshtër degët
Shtyni ndryshimet në GitHub

Shënim: pasi kuptova se çfarë duhet të përdor krijo-krijo-aplikacion funksioni i faqes kryesore për të nisur aplikacionin. Arriti të shtoja sa vijon në package.json:

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

Versioni përfundimtar i aplikacionit ekzekutiv është në dispozicion në:

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

Ilustrim i insekteve të kapur

Le të kalojmë duke klikuar butonin Hello.

Me një gabim që shfaqet si ky:

Vëzhgimet:

Ky raport i gabimeve nuk mund të ishte më i qartë, BRAVO.

Иллюстрация Неучтенных Ошибок

Po kështu, le të kalojmë përmes klikimit të butonit gabim.

Me një gabim që shfaqet si ky:

Trajtim më i mirë i gabimeve të pakontabilizuara (renderim)

Paraqitja e kufijve të gabimeve

Një gabim JavaScript në një pjesë të ndërfaqes së përdoruesit nuk duhet të prishë të gjithë aplikacionin. Për të zgjidhur këtë problem për përdoruesit e React, React 16 prezanton një koncept të ri të quajtur "kufijtë e gabimit".

Kufijtë e gabimeve janë komponentë React që kapin gabimet e JavaScript kudo në pemën e tyre të komponentit të fëmijës, regjistrojnë ato gabime dhe japin një ndërfaqe mbrapsht në vend të pemës së komponentit që u rrëzua. Kufijtë e gabimeve kapin gabimet gjatë renderimit, në metodat e ciklit jetësor dhe në konstruktorët e të gjithë pemës poshtë tyre.

...

Sjellje e re për gabime të pazbuluara

Это изменение имеет важное значение. Начиная с React 16, ошибки, которые не были пойманы какой-либо границей ошибок, приведут к размонтированию всего дерева компонентов React.

- Dan Abramov - Trajtimi i gabimeve në React 16

Një sqarim i rëndësishëm që më mori pak kohë para se ta kuptoja këtë është se sjellja e mësipërme funksionon vetëm me gabimet e hedhura në metodën e renderimit (ose më shumë gjasa në ndonjë nga metodat e ciklit jetësor). Например, использование границ ошибок не принесло бы никакой пользы с нашей кнопкой gabim; ky gabim ishte në mbajtësin e klikimeve.

Le të krijojmë një shembull të gabimit të paraqitjes dhe më pas të përdorim kufijtë e gabimit për ta trajtuar gabimin në mënyrë më të këndshme.

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

Vrojtim:

Kur shtypni butonin, Reagoj do të shfaqet flamur.i goditur.falsifikuar, e cila gjeneron një gabim
Pa një kufi gabimi, e gjithë pema përbërëse do të çmontohet

Pastaj shkruajmë kodin tonë të kufirit të gabimit (përdor metodën e re të ciklit të jetës komponentDidCatch); ky është në thelb shembulli i dhënë në artikullin e 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;
  }
}

Së fundi ne përdorim këtë komponent:

react-app/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

Megjithatë, klikimi i butonit Render Error shfaq UI-në e dytë dhe raporton një gabim te Sentry.

Përfundim

Shpresoj ta keni gjetur këtë të dobishme.

PS Lidhja me origjinalin

Bisedë PS Telegram përmes Sentry https://t.me/sentry_ru

Burimi: www.habr.com

Monitorimi i largët i defekteve në aplikacionet React frontend

Shto një koment Cancel përgjigje