Sentry monitorim të largët për defektet në aplikacionet frontend React

Ne jemi duke studiuar përdorimin e Sentry me React.

Ky artikull është pjesë e një serie që fillon me mesazhet e gabimeve në Sentry si shembull: Pjesa 1.

Implementimi i React

Së pari, na nevojitet të shtojmë një projekt të ri Sentry për këtë aplikacion; nga faqja e internetit të Sentry. Në këtë rast, ne zgjedhim React.

Ne përsërisim implementimin e dy butonave tanë, Hello dhe Error, në aplikacionin me React. Fillojmë duke krijuar aplikacionin tonë të fillimit:

npx create-react-app react-app

Pastaj importojmë paketën Sentry:

yarn add @sentry/browser

dhe e inicializojmë 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://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

Vëzhgimet:

• Gjatë zhvillimit ne kemi mekanizma të tjera për vëzhgimin e problemeve, siç është konsola, prandaj e aktivizojmë Sentry vetëm për ndërtimet në prodhim.

Pastaj 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 = () =&gt; {
    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}"
        >
          Gabim
        </button>
      </div>
    )
  }

  handleClick = () =&gt; {
    throw new Error('Uncaught');
  }
}

react-app / src / App.js

...\nimport Hello from '.\/Hello';\nimport MyError from '.\/MyError';\n\nclass App extends Component {\n  render() {\n    return (
      <div classname="App">
        ...
        <hello />
        <myerror />
      </div>
    );\n  }\n}\n\nexport default App;

Problemi (Hartat e Burimeve)

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

yarn build

dhe nga dosja build futni:

npx http-server -c-1

Problemi me të cilin do të përballemi menjëherë është se regjistrimet e gabimeve të Sentry iu referohen numrave të rreshtave në paketën e zvogëluar; nuk është shumë e dobishme.

Shërbimi Sentry e shpjegon këtë duke tërhequr hartat origjinale për paketën e zvogëluar pas marrjes së gabimit. Në këtë rast, ne ikim nga localhost (në dispozitë të shërbimit Sentry).

Zgjidhjet (Harta Origjinale)

Zgjidhja e këtij problemi përfshin ekzekutimin e aplikacionit nga një server web publik. Një buton i thjeshtë përgjigjeje për këtë është të përdorni shërbimin GitHub Pages (falas). Hapat për t'u përdorur zakonisht janë si më poshtë:

1. Kopjoni përmbajtjen e dosjes ndërto në dosjen docs në direktorinë kryesore të repositorit.

2. Aktivizoni GitHub Pages në repositorin (nga GitHub), për të përdorur dosjen docs në master degën

3. Transferoni ndryshimet në GitHub

Shënim: pasi kuptova se duhej të përdorja create-create-app funkcioni i faqes kryesore për të nisur aplikacionin. U soll në shtimin e mëposhtëm në package.json:

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

Versioni përfundimtar i aplikacionit të nisur është i disponueshëm në:

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

Ilustrimi i Gabimeve të Kapura

Le të kalojmë përmes shtypjes së butonit Hello.

Me një gabim që shfaqet si më poshtë:

Vëzhgimet:

• Ky këtij raporti për gabimin nuk mund të jetë më i qartë, BRAVO.

Ilustrimi i Gabimeve të Pashikueshme

Po ashtu, le të kalojmë përmes shtypjes së butonit Gabim.

Me një gabim që shfaqet si më poshtë:

Trajtimi më i mirë i gabimeve të pashikueshme (renderim)

Hyrja në Kufijtë e Gabimeve

Një gabim JavaScript në pjesën e ndërfaqes së përdoruesit nuk duhet të dëmtojë funksionimin erë tërë aplikacionit. Për të zgjidhur këtë problem për përdoruesit e React, React 16 prezanton konceptin e ri "kufijve të gabimeve".

Kufijtë e gabimeve janë komponentë të React që kapin gabime JavaScript në çdo pjesë të pemës së komponentëve të tyre të bij, regjistrojnë këto gabime dhe shfaqin një ndërfaqe rezervë të përdoruesit në vend të pemës së komponentëve që ka dështuar. Kufijtë e gabimeve kapin gabime gjatë renderimit, në metodat e ciklit të jetës dhe në konstruktorët e tërë pemës nën ta.

…

Sjellja e re për gabimet e pa zbuluara

Ky ndryshim është i rëndësishëm. Duke filluar nga React 16, gabimet që nuk kapen nga ndonjë kufi gabimi do të çojnë në shkëputjen e tërë pemës së komponentëve të React.

— Dan Abramov — Trajtimi i Gabimeve në React 16

Një sqarim i rëndësishëm që më ka marrë një kohë për ta kuptuar është se sjellja e përmendur më parë funksionon vetëm me gabimet që gjenerohen në metodën e renderimit (ose, më e mundshme, në cilëndo nga metodat e ciklit të jetës). Për shembull, përdorimi i kufijve të gabimeve nuk do të kishte ndihmuar me butonin tonë Gabim; kjo gabim ishte në trajtuesin e klikimeve.

Le të krijojmë një shembull të një gabimi vizualizimi dhe pastaj të përdorim kufijtë e gabimeve për trajtimin më elegant të gabimeve.

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}"
        >
          Gabimi gjatë Renderimit
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      flag: true,
    });
  }
}

Vërejtje:

• Kur klikohet butoni, React do të shfaqet flag.busted.bogus, që gjeneron një gabim

• Pa kufirin e gabimeve, e gjithë struktura e komponenteve do të ishte çmontuar

Pastaj shkruajmë kodin tonë të kufirit të gabimeve (përdor metodën e re të ciklit të jetës componentDidCatch); kjo është, në thelb, një shembull i sjellë në artikullin e Dan Abramovit:

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>Diçka shkoi keq.</h1>;
    }
    return this.props.children;
  }
}

Më në fund, përdorim këtë komponent:

react-app / src / App.js

...<br />import MyRenderError from './MyRenderError';<br /><br />class App extends Component {<br />  render() {<br />    return (
      <errorboundary>
        <div classname="App">
          ...
        </div>
      </errorboundary>
    );
  }
}
...

Me këtë, klikimi i butonit Render Error shfaq një ndërfaqe rezervë dhe raporton gabimin në Sentry.

Përfundimi

Shpresoj se kjo ishte e dobishme për ju.

P.S. Linku në origjinal

P.S. Biseda në Telegram për Sentry https://t.me/sentry_ru

Burimi: habr.com