🥇Menjaga pemantauan jarak jauh terhadap bug di aplikasi React frontend

Kami sedang menjajaki penggunaan Sentry dengan React.

Artikel ini adalah bagian dari seri yang dimulai dengan melaporkan kesalahan Sentry menggunakan contoh: Часть 1.

Implementasi Bereaksi

Pertama kita perlu menambahkan proyek Sentry baru untuk aplikasi ini; dari situs web Penjaga. Dalam hal ini kita memilih React.

Kami akan mengimplementasikan kembali dua tombol kami, Hello dan Error, dalam aplikasi dengan React. Kami mulai dengan membuat aplikasi starter kami:

npx create-react-app react-app

Kemudian kita import paket Sentry:

yarn add @sentry/browser

dan inisialisasi:

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

Pengamatan:

Selama pengembangan, kami memiliki mekanisme lain untuk memantau masalah, seperti konsol, jadi kami hanya mengaktifkan Sentry untuk build produksi

Selanjutnya kita mengimplementasikan tombol Hello dan Error dan menambahkannya ke aplikasi:

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

reaksi-aplikasi/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');
  }
}

reaksi-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 dapat menguji Sentry dengan build produksi dengan memasukkan:

yarn build

dan dari folder build masukkan:

npx http-server -c-1

Masalah yang segera kami hadapi adalah catatan kesalahan Sentry mengacu pada nomor baris dalam kumpulan yang diperkecil; tidak terlalu berguna.

Layanan Sentry menjelaskan hal ini dengan menarik peta sumber untuk paket yang dikurangi setelah menerima kesalahan. Dalam hal ini kami menjalankan dari localhost (tidak dapat diakses oleh layanan Sentry).

Solusi (Sumber Peta)

Solusi untuk masalah ini adalah dengan menjalankan aplikasi dari server web publik. Satu tombol balasan sederhana untuk menggunakan layanan GitHub Pages (gratis). Langkah-langkah penggunaannya biasanya sebagai berikut:

Salin isi folder tersebut membangun ke folder docs di direktori root repositori.
Nyalakan Halaman GitHub di repositori (dari GitHub) untuk menggunakan folder docs di menguasai cabang
Dorong perubahan ke GitHub

Catatan: setelah saya menemukan apa yang perlu saya gunakan buat-buat-aplikasi halaman beranda berfungsi untuk meluncurkan aplikasi. Saya mulai menambahkan yang berikut ini ke package.json:

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

Versi final dari aplikasi yang sedang berjalan tersedia di:

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

Ilustrasi Serangga yang Tertangkap

Mari kita berjalan dengan mengklik tombol Halo.

Dengan error yang muncul seperti ini:

Pengamatan:

Laporan bug ini sangat jelas, BRAVO.

Ilustrasi Kesalahan yang Belum Diperhitungkan

Demikian pula, mari kita melalui klik tombol error.

Dengan error yang muncul seperti ini:

Penanganan kesalahan yang belum terhitung (rendering) dengan lebih baik

Pengenalan Batas Kesalahan

Kesalahan JavaScript di bagian antarmuka pengguna tidak akan merusak keseluruhan aplikasi. Untuk mengatasi masalah ini bagi pengguna React, React 16 memperkenalkan konsep baru yang disebut "batas kesalahan".

Batasan kesalahan adalah komponen React yang menangkap kesalahan JavaScript di mana pun dalam pohon komponen turunannya, mencatat kesalahan tersebut, dan merender UI fallback alih-alih pohon komponen yang mogok. Batas kesalahan menangkap kesalahan selama rendering, dalam metode siklus hidup, dan di konstruktor seluruh pohon di bawahnya.

...

Perilaku baru untuk kesalahan yang tidak terdeteksi

Perubahan ini penting. Pada React 16, kesalahan yang tidak tertangkap oleh batasan kesalahan apa pun akan mengakibatkan seluruh pohon komponen React dilepas.

- Dan Abramov- Penanganan Kesalahan di React 16

Klarifikasi penting yang memerlukan waktu beberapa saat sebelum saya menyadari hal ini adalah itu perilaku di atas hanya berfungsi dengan kesalahan yang terjadi dalam metode render (atau lebih mungkin terjadi pada metode siklus hidup mana pun). Misalnya, menggunakan batasan kesalahan tidak akan ada gunanya dengan tombol kita error; kesalahan ini ada di penangan klik.

Mari kita buat contoh kesalahan rendering dan kemudian gunakan batas kesalahan untuk menangani kesalahan dengan lebih baik.

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

Saat Anda menekan tombol, Bereaksi akan ditampilkan bendera.rusak.bogus, yang menghasilkan kesalahan
Tanpa batas kesalahan, seluruh pohon komponen akan dilepas

Kemudian kami menulis kode batas kesalahan kami (menggunakan metode siklus hidup baru komponenDidCatch); ini pada dasarnya adalah contoh yang diberikan dalam artikel Dan Abramov:

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

Akhirnya kami menggunakan komponen ini:

reaksi-app/src/App.js

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

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

Namun, mengklik tombol Render Error akan menampilkan UI fallback dan melaporkan kesalahan ke Sentry.

Penyelesaian

Saya harap ini bermanfaat bagi Anda.

PS Tautan ke aslinya

Obrolan PS Telegram melalui Sentry https://t.me/sentry_ru

Sumber: www.habr.com

Penjaga memantau bug dari jarak jauh di aplikasi frontend React

Tambah komentar Membatalkan balasan