🥇Sentry ngawaskeun jauh bug dina aplikasi frontend React

Kami ngajalajah ngagunakeun Sentry sareng React.

Tulisan ieu mangrupikeun bagian tina séri anu dimimitian ku ngalaporkeun kasalahan Sentry nganggo conto: 1 bagian.

Palaksanaan Réaksi

Mimiti urang kedah nambihan proyék Sentry énggal pikeun aplikasi ieu; ti ramatloka Sentry. Dina hal ieu urang milih Réaksi.

Kami bakal nerapkeun deui dua tombol kami, Halo sareng Kasalahan, dina aplikasi nganggo React. Urang mimitian ku nyieun aplikasi starter kami:

npx create-react-app react-app

Teras we impor pakét Sentry:

yarn add @sentry/browser

jeung initialize eta:

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

Observasi:

Salila pamekaran, urang gaduh mékanisme sanés pikeun ngawaskeun masalah, sapertos konsol, janten urang ngan ukur ngaktifkeun Sentry pikeun ngawangun produksi.

Salajengna urang nerapkeun tombol Halo sareng Kasalahan kami sareng tambahkeun kana aplikasi:

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

meta-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;

Masalah (Sumber Peta)

Urang tiasa nguji Sentry kalayan ngawangun produksi ku ngalebetkeun:

yarn build

sareng ti folder ngawangun lebetkeun:

npx http-server -c-1

Masalah urang langsung ngajalankeun kana éta catetan kasalahan Sentry urang nujul ka nomer garis dina bets minified; teu pisan mangpaat.

Ladenan Sentry ngajelaskeun ieu ku cara narik peta sumber pikeun pakét anu dikirangan saatos nampi kasalahan. Dina hal ieu urang ngajalankeun ti localhost (henteu diaksés ku jasa Sentry).

Solusi (Peta Sumber)

Solusi pikeun masalah ieu nyaéta ngajalankeun aplikasi tina pangladén wéb umum. Hiji tombol balesan saderhana pikeun nganggo jasa GitHub Pages (gratis). Léngkah-léngkah anu dianggo biasana sapertos kieu:

Salin eusi polder ngawangun kana map docs dina diréktori akar Repository nu.
Hurungkeun Kaca GitHub dina gudang (tina GitHub) pikeun nganggo folder docs di ngawasaan dahan
Push parobahan GitHub

nyarios: saatos kuring terang naon anu kuring kedah dianggo nyieun-nyieun-aplikasi fungsi halaman imah pikeun ngajalankeun aplikasi. Turun pikeun nambihan ieu kana package.json:

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

Versi ahir aplikasi anu dijalankeun sayogi di:

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

Ilustrasi Bray Bugs

Hayu urang leumpang ngaliwatan ngaklik tombol Hello.

Kalayan kasalahan muncul sapertos kieu:

Observasi:

Laporan bug ieu teu tiasa langkung jelas, Bravo.

Ilustrasi Unaccounted pikeun Kasalahan

Kitu ogé, hayu urang ngaliwatan tombol klik kasalahan.

Kalayan kasalahan muncul sapertos kieu:

Penanganan anu langkung saé pikeun kasalahan anu teu kaétang (rendering)

Bubuka Watesan Kasalahan

Kasalahan JavaScript dina bagian tina panganteur pamaké teu kudu megatkeun sakabéh aplikasi. Pikeun ngajawab masalah ieu pikeun pamaké React, React 16 ngenalkeun konsép anyar anu disebut "wates kasalahan".

Watesan kasalahan nyaéta komponén Réaksi anu nyekel kasalahan JavaScript di mana waé dina tangkal komponén anakna, log kasalahan éta, sareng ngajantenkeun UI fallback tinimbang tangkal komponén anu nabrak. Kasalahan wates nyekel kasalahan salila rendering, dina métode lifecycle, sarta dina konstruktor sakabéh tangkal handap aranjeunna.

...

kabiasaan anyar pikeun kasalahan undetected

Parobahan ieu signifikan. Salaku of React 16, kasalahan anu teu katangkep ku sagala wates kasalahan bakal ngakibatkeun sakabéh tangkal komponén Réaksi unmounted.

- Dan Abramov - Nanganan Kasalahan dina Réaksi 16

Hiji klarifikasi penting nu nyandak kuring bari saméméh kuring sadar ieu éta paripolah di luhur ngan ukur tiasa dianggo sareng kasalahan anu dialungkeun dina metode render (atanapi langkung dipikaresep dina salah sahiji metode siklus hirup). Contona, ngagunakeun wates kasalahan moal ngalakukeun nanaon alus kalawan tombol kami kasalahan; kasalahan ieu aya dina panangan klik.

Hayu urang nyieun conto kasalahan rendering lajeng nganggo bounds kasalahan pikeun nanganan kasalahan leuwih gracefully.

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

Pengamatan:

Nalika anjeun pencét tombol, mere tanggapan bakal dipintonkeun flag.busted.bogus, nu ngahasilkeun kasalahan
Tanpa wates kasalahan, sakabéh tangkal komponén bakal unmounted

Teras we nyerat kode wates kasalahan urang (ngagunakeun metode daur hirup anyar komponénDidCatch); Ieu dasarna mangrupikeun conto anu dipasihkeun dina tulisan Dan Abramov:

meta-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;
  }
}

Tungtungna kami nganggo komponén ieu:

react-app/src/App.js

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

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

Nanging, ngaklik tombol Render Error nampilkeun UI fallback sareng ngalaporkeun kasalahan ka Sentry.

parantosan

Kuring miharep anjeun kapanggih ieu mantuan.

PS Tumbu ka aslina

PS Telegram obrolan via Sentry https://t.me/sentry_ru

sumber: www.habr.com

Ngawaskeun jarak jauh kutu dina aplikasi React frontend

Tambahkeun komentar ngabolaykeun reply