🥇Sentry monitorimi i largët i defekteve në aplikacionet front-end React

Ne pohojme përdorimin e Sentry me React.

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

Implementimi i React

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

Ne do të implementojmë përsëri dy butonat tanë, Hello dhe Error, aplikacioni me React. Fillojmë me krijimin e aplikacionit tonë fillestar:

npx create-react-app react-app

Pastaj importojmë paketën Sentry:

yarn add @sentry/browser

dhe e fillojmë 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ë tjerë për të parë problemet, si p.sh. konsola, kështu që aktivizojmë Sentry vetëm për ndërtimet prodhuese

Më pas, ne implementojmë butonat tanë Hello dhe Error dhe i shtojmë ata 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}"
        >
          Përshëndetje
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () =&gt; {
    this.setState({
      text: 'Përshëndetje Botë',
    });
    try {
      throw new Error('Kapur');
    } 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

...
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 ta testojmë Sentry me një ndërtim prodhues duke shkruar:

yarn build

dhe nga dosja build, shkruaj:

npx http-server -c-1

Problemi me të cilin ne përballemi menjëherë është se regjistrimet e gabimeve Sentry referohen në numrat e rreshtave në paketën e minimizuar; nuk është shumë e dobishme.

Shërbimi Sentry e shqipton këtë duke tërhequr hartat e burimit për paketën e minimizuar pasi merr gabimin. Në këtë rast, ne vrapojmë nga localhost (i paqasshëm për shërbimin Sentry).

Zgjidhjet (Hartat e Burimit)

Zgjidhja e këtij problemi përfshin ekzekutimin e aplikacionit nga një server të hapur. Një nga zgjidhjet më të thjeshta është përdorimi i shërbimit GitHub Pages (falas). Hapat për ta përdorur janë zakonisht këta:

Kopjoni përmbajtjen e dosjes build në folderin docs në katalogun kryesor të depozitat.
Aktivizoni GitHub Pages në depo (nga GitHub), për të përdorur dosjen docs në master depon
Transferoni ndryshimet në GitHub

Shënim: pasi kuptova se duhet të përdor create-create-app funksioni i faqes kryesore për të ekzekutuar aplikacionin. E gjithë kjo përfshinte shtimin e të mëposhtmes në package.json:

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

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

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

Ilustrimi i Gabimeve të Kapura

Le të kalojmë përmes klikimit të butonit Hello.

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

Vëzhgimet:

Ky raport gabimi nuk mund të jetë më i qartë, BRAVO.

Ilustrimi i Gabimeve të Papërfshira

Në mënyrë të ngjashme, le të kalojmë përmes klikimit të butonit Gabim.

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

Përpunimi më i mirë i gabimeve që nuk janë kapur (renderimi)

Prezantimi i Kufijve të Gabimeve
Gabimi i JavaScript në një pjesë të ndërfaqes së përdoruesit nuk duhet të prishë funksionimin e gjithë aplikacionit. Për të zgjidhur këtë problem për përdoruesit e React, React 16 introdukon konceptin e ri "kufijve të gabimeve".
Kufijtë e gabimeve janë komponente të React që kapin gabimet e JavaScript në çdo vend të pemës së tyre të komponenteve, regjistrojnë këto gabime dhe shfaqin një ndërfaqe rezervë përdoruesi në vend të pemës së komponenteve që është prishur. Kufijtë e gabimeve kapin gabimet gjatë renderimit, në metodat e ciklit të jetës dhe në konstruktoret e tërë pemës poshtë tyre.
…
Sjellje e re për gabimet e pazbuluara
Kjo ndryshim ka rëndësi të madhe. Duke filluar nga React 16, gabimet që nuk kapen nga ndonjë kufi gabimesh do të çojnë në çmontimin e gjithë pemës së komponenteve të React.
— Dan Abramov — Menaxhimi i Gabimeve në React 16

Një sqarim i rëndësishëm, që më mori pak kohë për ta kuptuar, është se sjellja e përmendur më sipër funksionon vetëm me gabimet që gjenerohen në metodën e renderimit (ose, më së shpeshti, në cilindo 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; ky gabim ishte në menaxherin e klikimeve.

Lëtsa krijojmë një shembuj gabimi të renderimit dhe pastaj të përdorim kufijtë e gabimeve për një menaxhim 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 i Renderimit
        </button>
        { flag &amp;&amp; <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

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

Vëzhgimi:

Kur klikoni butonin, React do të shfaqet flag.busted.bogus, i cili gjeneron një gabim
Pa një kufi gabimesh, e gjithë pena e komponenteve do të çmontohej

Pastaj shkruajmë kodin tonë të kufijit të gabimeve (përdor metodën e re të ciklit të jetës componentDidCatch); kjo, në thelb, është një shembuj 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>Di ndodhi një gabim.</h1>;
    }
    return this.props.children;
  }
}

Më në fund, 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>
    );
  }
}
...

Kështu, klikimi i butonit Render Error shfaq një ndërfaqe rezervë përdoruesi dhe raporton gabimin në Sentry.