🥇Sentry remote monitoring sa mga bug sa React frontend applications

Kami nagsuhid gamit ang Sentry with React.

Kini nga artikulo bahin sa usa ka serye nga nagsugod sa pagreport sa mga sayup sa Sentry gamit ang usa ka pananglitan: Bahin sa 1.

Pagpatuman sa Reaksyon

Una kinahanglan namon nga magdugang usa ka bag-ong proyekto sa Sentry alang sa kini nga aplikasyon; gikan sa website sa Sentry. Sa kini nga kaso gipili namon ang React.

Atong ipatuman pag-usab ang atong duha ka buton, Hello ug Error, sa usa ka aplikasyon nga adunay React. Nagsugod kami pinaagi sa paghimo sa among aplikasyon sa pagsugod:

npx create-react-app react-app

Dayon among gi-import ang Sentry package:

yarn add @sentry/browser

ug pagsugod niini:

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 obserbasyon:

Atol sa pag-uswag, kami adunay uban pang mga mekanismo alang sa pag-monitor sa mga isyu, sama sa console, mao nga mahimo ra namon ang Sentry alang sa paghimo sa produksiyon.

Sunod among ipatuman ang among Hello ug Error button ug idugang kini sa aplikasyon:

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)

Mahimo natong sulayan ang Sentry nga adunay paghimo sa produksiyon pinaagi sa pagsulod:

yarn build

ug gikan sa build folder pagsulod:

npx http-server -c-1

Ang problema nga atong masugatan dayon mao nga ang mga rekord sa sayop ni Sentry nagtumong sa mga numero sa linya sa minified batch; dili kaayo mapuslanon.

Gipatin-aw kini sa serbisyo sa Sentry pinaagi sa pagbira sa gigikanan nga mga mapa alang sa pagkunhod sa pakete pagkahuman nakadawat usa ka sayup. Sa kini nga kaso kami nagdagan gikan sa localhost (dili ma-access sa serbisyo sa Sentry).

Mga Solusyon (Source Maps)

Ang solusyon sa kini nga problema mao ang pagpadagan sa aplikasyon gikan sa usa ka publiko nga web server. Usa ka yano nga buton sa pagtubag aron magamit ang serbisyo sa GitHub Pages (libre). Ang mga lakang nga gamiton kasagaran mao ang mosunod:

Kopyaha ang sulod sa folder pagtukod sa folder docs sa root directory sa repository.
Padayon Mga Panid sa GitHub sa repository (gikan sa GitHub) aron magamit ang docs folder sa agalon mga sanga
Iduso ang mga pagbag-o sa GitHub

Примечание: pagkahuman nako nahibal-an kung unsa ang kinahanglan nako gamiton paghimo-pagbuhat-app home page function aron ilunsad ang aplikasyon. Mianhi sa pagdugang sa mosunod sa package.json:

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

Ang katapusang bersyon sa nagdagan nga aplikasyon anaa sa:

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

Ilustrasyon sa Nadakpan nga mga Bug

Atong lakaw pinaagi sa pag-klik sa Hello button.

Uban sa usa ka sayup nga makita sama niini:

Mga obserbasyon:

Kini nga bug report dili mahimong mas klaro, Bravo.

Ilustrasyon sa Wala Maisip nga mga Kasaypanan

Ingon usab, adto ta pinaagi sa pag-klik sa buton Sayop.

Uban sa usa ka sayup nga makita sama niini:

Mas maayo nga pagdumala sa wala maisip nga mga sayup (paghubad)

Pagpaila sa Error Limits

Ang usa ka sayup sa JavaScript sa bahin sa interface sa gumagamit kinahanglan dili makaguba sa tibuuk nga aplikasyon. Aron masulbad kini nga problema alang sa mga tiggamit sa React, ang React 16 nagpaila sa usa ka bag-ong konsepto nga gitawag nga "mga utlanan sa sayup".

Ang mga utlanan sa sayup mao ang mga sangkap sa React nga nakakuha sa mga sayup sa JavaScript bisan diin sa punoan sa sangkap sa ilang bata, pag-log sa mga sayup, ug paghimo usa ka fallback nga UI imbis sa punoan sa sangkap nga nahagsa. Ang mga utlanan sa kasaypanan nakakuha sa mga sayup sa panahon sa pag-render, sa mga pamaagi sa siklo sa kinabuhi, ug sa mga nagtukod sa tibuuk nga punoan sa ubos niini.

...

Bag-ong pamatasan alang sa wala mamatikdi nga mga sayup

Kini nga pagbag-o hinungdanon. Ingon sa React 16, ang mga sayup nga wala makuha sa bisan unsang utlanan sa sayup moresulta sa tibuuk nga punoan sa sangkap sa React nga wala ma-mount.

- Dan Abramov - Sayop sa Pagdumala sa React 16

Usa ka importante nga pagpatin-aw nga nagdugay kanako sa wala pa ako nakaamgo nga kini mao kana ang pamatasan sa ibabaw nagtrabaho lamang sa mga sayup nga gilabay sa pamaagi sa paghubad (o lagmit sa bisan unsang mga pamaagi sa lifecycle). Pananglitan, ang paggamit sa mga utlanan sa sayup wala’y mahimo sa among buton Sayop; kini nga sayop anaa sa click handler.

Maghimo kita og usa ka panig-ingnan sa paghubad sa sayup ug dayon gamiton ang mga utlanan sa sayup aron madumala ang sayup nga labi ka matahum.

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

Pagpaniid:

Kung imong gipindot ang buton, React ipasundayag flag.busted.bogus, nga makamugna og sayop
Kung wala’y utlanan sa sayup, ang tibuuk nga punoan sa sangkap dili ma-mount

Dayon among isulat ang among error boundary code (naggamit sa bag-ong pamaagi sa lifecycle componentDidCatch); mao kini ang esensya nga pananglitan nga gihatag 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 katapusan gigamit namon kini nga sangkap:

react-app/src/App.js

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

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

Bisan pa, ang pag-klik sa Render Error button nagpakita sa fallback UI ug nagreport sa usa ka sayup sa Sentry.

Pagkompleto

Nanghinaut ko nga nakatabang kini kanimo.

PS Link sa orihinal

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

Source: www.habr.com

Sentry remote monitoring sa mga bug sa React frontend applications

Idugang sa usa ka comment Отменить ответ