🥇Hantar pemantauan jauh pepijat dalam aplikasi bahagian hadapan React

Kami sedang meneroka menggunakan Sentry dengan React.

Artikel ini adalah sebahagian daripada siri yang bermula dengan melaporkan ralat Sentry menggunakan contoh: Часть 1.

Pelaksanaan React

Mula-mula kita perlu menambah projek Sentry baharu untuk aplikasi ini; daripada laman web Sentry. Dalam kes ini kita memilih React.

Kami akan melaksanakan semula dua butang kami, Hello dan Ralat, dalam aplikasi dengan React. Kami mulakan dengan mencipta aplikasi pemula kami:

npx create-react-app react-app

Kemudian kami mengimport pakej Sentry:

yarn add @sentry/browser

dan mulakannya:

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

Pemerhatian:

Semasa pembangunan, kami mempunyai mekanisme lain untuk memantau isu, seperti konsol, jadi kami hanya mendayakan Sentry untuk binaan pengeluaran

Seterusnya kami melaksanakan butang Hello dan Ralat kami dan menambahkannya pada 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);
    }
  }
}

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 (Peta Sumber)

Kami boleh menguji Sentry dengan binaan pengeluaran dengan memasukkan:

yarn build

dan dari folder binaan masukkan:

npx http-server -c-1

Masalah yang kami hadapi dengan segera ialah rekod ralat Sentry merujuk kepada nombor baris dalam kelompok kecil; tidak berguna sangat.

Perkhidmatan Sentry menerangkan perkara ini dengan menarik peta sumber untuk paket yang dikurangkan selepas menerima ralat. Dalam kes ini, kami menjalankan dari localhost (tidak boleh diakses oleh perkhidmatan Sentry).

Penyelesaian (Peta Sumber)

Penyelesaian kepada masalah ini adalah dengan menjalankan aplikasi dari pelayan web awam. Satu butang balas ringkas untuk menggunakan perkhidmatan GitHub Pages (percuma). Langkah-langkah untuk digunakan biasanya seperti berikut:

Salin kandungan folder membina ke folder docs dalam direktori akar repositori.
Hidupkan Halaman GitHub dalam repositori (dari GitHub) untuk menggunakan folder dokumen masuk master cawangan
Tolak perubahan ke GitHub

Nota: selepas saya tahu apa yang perlu saya gunakan buat-buat-apl fungsi halaman utama untuk melancarkan aplikasi. Turun untuk menambah yang berikut pada package.json:

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

Versi akhir aplikasi yang sedang berjalan boleh didapati di:

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

Ilustrasi Pepijat Terperangkap

Mari berjalan melalui mengklik butang Hello.

Dengan ralat muncul seperti ini:

Pemerhatian:

Laporan pepijat ini tidak boleh menjadi lebih jelas, BRAVO.

Ilustrasi Ralat Tidak Dikira

Begitu juga, mari kita pergi melalui klik butang ralat.

Dengan ralat muncul seperti ini:

Pengendalian ralat tidak terkira yang lebih baik (rendering)

Pengenalan Had Ralat

Ralat JavaScript pada sebahagian daripada antara muka pengguna tidak seharusnya memecahkan keseluruhan aplikasi. Untuk menyelesaikan masalah ini bagi pengguna React, React 16 memperkenalkan konsep baharu yang dipanggil "batas ralat".

Sempadan ralat ialah komponen React yang menangkap ralat JavaScript di mana-mana dalam pepohon komponen anak mereka, log ralat tersebut dan menyebabkan UI sandaran dan bukannya pepohon komponen yang ranap. Sempadan ralat menangkap ralat semasa pemaparan, dalam kaedah kitaran hayat dan dalam pembina keseluruhan pokok di bawahnya.

...

Tingkah laku baharu untuk ralat yang tidak dapat dikesan

Perubahan ini amat ketara. Mulai React 16, ralat yang tidak ditangkap oleh sebarang sempadan ralat akan menyebabkan keseluruhan pepohon komponen React dinyahlekap.

- Dan Abramov - Pengendalian Ralat dalam React 16

Penjelasan penting yang mengambil sedikit masa sebelum saya menyedari ini ialah itu tingkah laku di atas hanya berfungsi dengan ralat yang dilemparkan dalam kaedah pemaparan (atau lebih berkemungkinan dalam mana-mana kaedah kitaran hayat). Sebagai contoh, menggunakan sempadan ralat tidak akan mendatangkan faedah dengan butang kami ralat; ralat ini terdapat dalam pengendali klik.

Mari buat contoh ralat pemaparan dan kemudian gunakan sempadan ralat untuk mengendalikan ralat dengan lebih anggun.

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

Pemerhatian:

Apabila anda menekan butang, Bertindak akan dipaparkan bendera.dipatahkan.palsu, yang menghasilkan ralat
Tanpa sempadan ralat, keseluruhan pokok komponen akan dinyahlekapkan

Kemudian kami menulis kod sempadan ralat kami (menggunakan kaedah kitaran hayat baharu componentDidCatch); ini pada dasarnya adalah contoh yang diberikan dalam 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;
  }
}

Akhirnya kami menggunakan komponen ini:

react-app/src/App.js

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

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

Walau bagaimanapun, mengklik butang Ralat Render memaparkan UI sandaran dan melaporkan ralat kepada Sentry.

Siap

Saya harap anda mendapati ini membantu.

PS Pautan ke asal

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

Sumber: www.habr.com

Sentry pemantauan pepijat jauh dalam aplikasi frontend React

Tambah komen Batal reply