🥇Sentry ngawasi remot bug ing aplikasi frontend React

Kita lagi njelajah nggunakake Sentry karo React.

Artikel iki minangka bagéan saka seri sing diwiwiti kanthi nglaporake kesalahan Sentry nggunakake conto: Bagéan saka 1.

Implementasi React

Pisanan kita kudu nambah proyek Sentry anyar kanggo aplikasi iki; saka situs web Sentry. Ing kasus iki kita milih React.

Kita bakal ngetrapake maneh rong tombol, Hello lan Error, ing aplikasi karo React. Kita miwiti kanthi nggawe aplikasi wiwitan:

npx create-react-app react-app

Banjur kita ngimpor paket Sentry:

yarn add @sentry/browser

lan miwiti:

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

Observasi:

Sajrone pangembangan, kita duwe mekanisme liyane kanggo ngawasi masalah, kayata konsol, mula mung ngaktifake Sentry kanggo produksi produksi.

Sabanjure, kita ngetrapake tombol Hello lan Error lan ditambahake menyang aplikasi kasebut:

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;

Masalah (Sumber Peta)

Kita bisa nguji Sentry kanthi mbangun produksi kanthi ngetik:

yarn build

lan saka folder mbangun ketik:

npx http-server -c-1

Masalah sing langsung kita lakoni yaiku cathetan kesalahan Sentry nuduhake nomer baris ing batch minified; ora banget migunani.

Layanan Sentry nerangake iki kanthi narik peta sumber kanggo paket sing dikurangi sawise nampa kesalahan. Ing kasus iki, kita mlaku saka localhost (ora bisa diakses dening layanan Sentry).

Solusi (Peta Sumber)

Solusi kanggo masalah iki yaiku mbukak aplikasi saka server web umum. Siji tombol balesan sing gampang kanggo nggunakake layanan GitHub Pages (gratis). Langkah-langkah sing digunakake biasane kaya ing ngisor iki:

Salin isi folder kasebut mbangun menyang folder docs ing direktori root saka repositori.
Nguripake Kaca GitHub ing repositori (saka GitHub) kanggo nggunakake folder docs ing Master cabang
Tekan owah-owahan menyang GitHub

komentar: sawise aku ngerti apa sing kudu digunakake nggawe-nggawe-app fungsi kaca ngarep kanggo mbukak aplikasi. Teka mudhun kanggo nambah ing ngisor iki kanggo package.json:

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

Versi pungkasan saka aplikasi sing mlaku kasedhiya ing:

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

Ilustrasi Caught Bugs

Ayo mlaku liwat ngeklik tombol Hello.

Kanthi kesalahan katon kaya iki:

Observasi:

Laporan bug iki ora bisa luwih jelas, BRAVO.

Ilustrasi Ora Ana Kesalahan

Semono uga, ayo liwat klik tombol Kesalahan.

Kanthi kesalahan katon kaya iki:

Penanganan sing luwih apik kanggo kesalahan sing ora dikira (rendering)

Pambuka Watesan kesalahan

Kesalahan JavaScript ing bagean antarmuka panganggo ngirim ora ngrusak kabeh aplikasi. Kanggo ngatasi masalah iki kanggo pangguna React, React 16 ngenalake konsep anyar sing diarani "wates kesalahan".

Watesan kesalahan yaiku komponen React sing nyekel kesalahan JavaScript ing endi wae ing wit komponen anak, nyathet kesalahan kasebut, lan nggawe UI mundur tinimbang wit komponen sing nabrak. Watesan kesalahan nyekel kesalahan sajrone rendering, ing cara siklus urip, lan ing konstruktor kabeh wit ing ngisor iki.

...

Prilaku anyar kanggo kesalahan sing ora dideteksi

Owah-owahan iki penting. Ing React 16, kesalahan sing ora kejiret dening wates kesalahan bakal nyebabake kabeh wit komponen React ora dipasang.

- Dan Abramov - Penanganan Kesalahan ing React 16

Klarifikasi penting sing njupuk sawetara wektu sadurunge aku ngerti iki prilaku ing ndhuwur mung bisa digunakake karo kesalahan sing dibuwang ing metode render (utawa luwih akeh ing salah sawijining metode siklus urip). Contone, nggunakake wates kesalahan ora bakal migunani kanggo tombol kita Kesalahan; kesalahan iki ana ing handler klik.

Ayo nggawe kesalahan rendering conto banjur gunakake wates kesalahan kanggo nangani kesalahan kanthi luwih apik.

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

Pengamatan:

Nalika sampeyan mencet tombol, nanggepi bakal ditampilake flag.busted.bogus, sing nggawe kesalahan
Tanpa wates kesalahan, kabeh wit komponen bakal dicopot

Banjur kita nulis kode wates kesalahan (nggunakake metode siklus urip anyar componentDidCatch); Iki minangka conto sing diwenehake ing artikel 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;
  }
}

Pungkasan, kita nggunakake komponen iki:

react-app/src/App.js

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

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

Nanging, ngeklik tombol Render Error nampilake UI fallback lan nglaporake kesalahan menyang Sentry.

Rampung

Mugi sampeyan nemokake iki migunani.

PS Link menyang asli

PS Telegram chatting liwat Sentry https://t.me/sentry_ru

Source: www.habr.com

Ngawasi remot kontrol bug ing aplikasi frontend React

Add a comment Отменить ответ