🥇Sentry remote monitoring ng mga bug sa React frontend applications

Nag-e-explore kami gamit ang Sentry with React.

Ang artikulong ito ay bahagi ng isang serye na nagsisimula sa pag-uulat ng mga error sa Sentry gamit ang isang halimbawa: Часть 1.

Pagpapatupad ng React

Una kailangan naming magdagdag ng bagong proyekto ng Sentry para sa application na ito; mula sa website ng Sentry. Sa kasong ito, pipiliin namin ang React.

Muli naming ipapatupad ang aming dalawang button, Hello at Error, sa isang application na may React. Magsisimula kami sa pamamagitan ng paglikha ng aming starter application:

npx create-react-app react-app

Pagkatapos ay ini-import namin ang pakete ng Sentry:

yarn add @sentry/browser

at simulan ito:

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

Mga pagmamasid:

Sa panahon ng pag-develop, mayroon kaming iba pang mga mekanismo para sa pagsubaybay sa mga isyu, tulad ng console, kaya pinapagana lang namin ang Sentry para sa mga production build.

Susunod na ipinatupad namin ang aming Hello at Error button at idagdag ang mga ito sa application:

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;

Problema (Source Maps)

Maaari naming subukan ang Sentry na may production build sa pamamagitan ng pagpasok ng:

yarn build

at mula sa build folder ipasok ang:

npx http-server -c-1

Ang problema kaagad naming nararanasan ay ang mga talaan ng error ng Sentry ay tumutukoy sa mga numero ng linya sa minified batch; hindi masyadong kapaki-pakinabang.

Ipinapaliwanag ito ng serbisyo ng Sentry sa pamamagitan ng paghila sa mga source na mapa para sa pinababang packet pagkatapos makatanggap ng error. Sa kasong ito kami ay tumatakbo mula sa localhost (hindi naa-access ng serbisyo ng Sentry).

Mga Solusyon (Source Maps)

Ang solusyon sa problemang ito ay ang patakbuhin ang application mula sa isang pampublikong web server. Isang simpleng reply button para magamit ang serbisyo ng GitHub Pages (libre). Ang mga hakbang na gagamitin ay karaniwang ang mga sumusunod:

Kopyahin ang mga nilalaman ng folder magtayo sa folder doc sa root directory ng repository.
I-on Mga Pahina ng GitHub sa repositoryo (mula sa GitHub) para magamit ang folder ng docs panginoon mga sanga
I-push ang mga pagbabago sa GitHub

Nota: pagkatapos kong malaman kung ano ang kailangan kong gamitin lumikha-lumikha-app function ng home page upang ilunsad ang application. Bumaba sa pagdaragdag ng sumusunod sa package.json:

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

Ang huling bersyon ng tumatakbong application ay makukuha sa:

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

Ilustrasyon ng mga Nahuli na Bug

Maglakad tayo sa pamamagitan ng pag-click sa button na Hello.

Sa isang error na lumilitaw tulad nito:

Mga pagmamasid:

Ang ulat ng bug na ito ay hindi maaaring maging mas malinaw, Bravo.

Ilustrasyon ng Unaccounted for Errors

Gayundin, dumaan tayo sa pag-click sa pindutan pagkakamali.

Sa isang error na lumilitaw tulad nito:

Mas mahusay na paghawak ng mga hindi na-account na error (pag-render)

Pagpapakilala ng Error Limits

Ang isang error sa JavaScript sa bahagi ng user interface ay hindi dapat masira ang buong application. Upang malutas ang problemang ito para sa mga user ng React, ipinakilala ng React 16 ang isang bagong konsepto na tinatawag na "mga hangganan ng error."

Ang mga hangganan ng error ay mga bahagi ng React na nakakakuha ng mga error sa JavaScript saanman sa kanilang child component tree, nag-log sa mga error na iyon, at nag-render ng fallback na UI sa halip na ang component tree na nag-crash. Ang mga hangganan ng error ay nakakakuha ng mga error sa panahon ng pag-render, sa mga pamamaraan ng lifecycle, at sa mga constructor ng buong puno sa ibaba ng mga ito.

...

Bagong gawi para sa mga hindi natukoy na error

Ang pagbabagong ito ay makabuluhan. Mula sa React 16, ang mga error na hindi nakuha ng anumang hangganan ng error ay magreresulta sa pag-unmount ng buong React component tree.

- Dan Abramov - Error sa Paghawak sa React 16

Isang mahalagang paglilinaw na tumagal sa akin bago ko napagtanto na ito ay iyon ang pag-uugali sa itaas ay gumagana lamang sa mga error na itinapon sa paraan ng pag-render (o mas malamang sa alinman sa mga pamamaraan ng lifecycle). Halimbawa, ang paggamit ng mga hangganan ng error ay hindi makakabuti sa aming button pagkakamali; ang error na ito ay nasa click handler.

Gumawa tayo ng isang halimbawa ng error sa pag-render at pagkatapos ay gumamit ng mga hangganan ng error upang mahawakan ang error nang mas maganda.

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

Pagmamasid:

Kapag pinindot mo ang pindutan, Gantihin ay ipapakita bandila.busted.bogus, na bumubuo ng isang error
Kung walang hangganan ng error, aalisin sa pagkaka-mount ang buong component tree

Pagkatapos ay isusulat namin ang aming error boundary code (gumagamit ng bagong paraan ng lifecycle componentDidCatch); ito ay mahalagang halimbawa na ibinigay sa artikulo ni 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;
  }
}

Sa wakas ginagamit namin ang bahaging ito:

react-app/src/App.js

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

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

Gayunpaman, ang pag-click sa button na Render Error ay nagpapakita ng fallback na UI at nag-uulat ng error sa Sentry.

Pagtapos

Sana ay nakakatulong ito.

PS Link sa orihinal

PS Telegram chat sa pamamagitan ng Sentry https://t.me/sentry_ru

Pinagmulan: www.habr.com

Sentry remote monitoring ng mga bug sa React frontend applications

Magdagdag ng komento Kanselahin ang sumagot