🥇Lacak Kesalahan ing Aplikasi React karo Sentry

Dina iki aku bakal ngandhani babagan pelacakan kesalahan wektu nyata ing aplikasi React. Aplikasi ngarep-mburi biasane ora digunakake kanggo nelusuri kesalahan. Sawetara perusahaan asring ngilangi pelacakan bug, bali menyang sawise dokumentasi, tes, lsp. Nanging, yen sampeyan bisa ngganti produk dadi luwih apik, banjur lakoni!

1. Kenapa sampeyan kudu Sentry?

Aku nganggep sampeyan kasengsem ing nelusuri kewan omo sajrone produksi

Apa sampeyan mikir iki ora cukup?

Oke, ayo ndeleng rincian.

Alasan utama pangembang nggunakake Sentry:

Ngidini sampeyan ngindhari risiko nalika masang kode kanthi kesalahan
Bantuan QA karo testing kode
Nampa kabar cepet babagan masalah
Kemampuan kanggo mbenerake kesalahan kanthi cepet
Entuk tampilan kesalahan sing trep ing panel admin
Urut kesalahan miturut segmen pangguna / browser

Alasan utama kanggo proyek CEO / Lead

Ngirit dhuwit (Sentry bisa diinstal ing server sampeyan)
Njupuk umpan balik pangguna
Ngerteni apa sing salah karo proyek sampeyan ing wektu nyata
Ngerteni jumlah masalah sing dialami wong karo app sampeyan
Mbantu sampeyan nemokake panggonan sing gawe kesalahane pangembang

Aku mikir para pangembang bakal kasengsem ing artikel iki dhisik. Sampeyan uga bisa nggunakake dhaptar alasan iki kanggo ngyakinake bos sampeyan supaya nggabungake Sentry.

Ati-ati karo item pungkasan ing dhaptar bisnis.

Apa sampeyan wis kasengsem?

Apa Sentry?

Sentry minangka aplikasi pelacak bug sumber terbuka sing mbantu pangembang nglacak lan ndandani kacilakan kanthi nyata. Aja lali manawa aplikasi kasebut ngidini sampeyan nambah efisiensi lan nambah pengalaman pangguna. Sentry ndhukung JavaScript, Node, Python, PHP, Ruby, Java lan basa pamrograman liyane.

2. Mlebet lan nggawe proyek

Bukak akun Sentry sampeyan. Sampeyan bisa uga kudu mlebu. (Elinga yen Sentry bisa diinstal ing server sampeyan)
Langkah sabanjure yaiku nggawe proyek
Pilih basa sampeyan saka dhaptar. (Kita bakal milih React. Klik "Gawe Proyek")

Ngatur aplikasi sampeyan. Conto dhasar babagan cara nggabungake Sentry menyang wadhah bisa dideleng ing ngisor iki:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

Sentry duwe Wisaya sing migunani kanggo mbantu sampeyan ngerteni apa sing kudu ditindakake sabanjure. Sampeyan bisa tindakake langkah iki. Aku pengin nuduhake sampeyan carane nggawe handler kesalahan pisanan. Apik, kita wis nggawe proyek! Ayo pindhah menyang langkah sabanjure

3. Integrasi React lan Sentry

Sampeyan kudu nginstal paket npm ing proyek sampeyan.

npm i @sentry/browser

Initialize Sentry ing wadhah sampeyan:

Sentry.init({
 // dsn: #dsnUrl,
});

DSN dumunung ing Proyek -> Setelan -> Tombol Klien. Sampeyan bisa nemokake kunci klien ing garis telusuran.

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. Nelusuri kesalahan pisanan

Contone, aku nggunakake aplikasi musik prasaja karo Deezer API. Sampeyan bisa ndeleng kene. Kita kudu nggawe kesalahan. Salah sawijining cara yaiku ngakses properti "ora ditetepake".

Kita kudu nggawe tombol sing nelpon console.log с panganggo.email. Sawise tumindak iki, kita kudu nampa pesen kesalahan: Uncaught TypeError (ora bisa maca properti saka undefined email) amarga obyek pangguna ilang. Sampeyan uga bisa nggunakake Pangecualian Javascript.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

Wadah kabeh katon kaya iki:

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";

const Search = Input.Search;

const mapState = state => ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https://[email protected]/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div className="App">
        <button
          type="button"
          onClick={() => console.log(user.email)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

Sawise nggabungake tombol iki, sampeyan kudu nyoba ing browser.

Kita duwe kesalahan pisanan

Hoo-hoo!

Yen sampeyan ngeklik kesalahan header, sampeyan bakal weruh jejak tumpukan.

Pesen katon ala. Mesthi wae kita wis ndeleng pesen kesalahan tanpa ngerti kode kasebut. Kanthi gawan, kita ngomong babagan peta sumber ing ReactJS amarga ora dikonfigurasi.

Aku uga pengin menehi instruksi kanggo nyetel peta sumber, nanging sing bakal nggawe artikel iki luwih suwe tinimbang sing dakkarepake.

Sampeyan bisa sinau topik iki kene. Yen sampeyan kasengsem ing artikel iki, Dmitry Nozhenko bakal nerbitake bagean kapindho babagan integrasi peta sumber. Dadi, tekan luwih seneng lan langganan Dmitry Nozhenkosupaya ora kantun perangan kapindho.

5. Panggunaan Sentry kanthi titik pungkasan API

OK. Kita wis nutupi pengecualian javascript ing paragraf sadurunge. Nanging, apa sing bakal ditindakake babagan kesalahan XHR?

Sentry uga duwe penanganan kesalahan khusus. Aku digunakake kanggo trek kesalahan api.

Sentry.captureException(err)

Sampeyan bisa ngatur jeneng kesalahan, level, nambah data, data pangguna unik nggunakake aplikasi, email, lsp.

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "[email protected]"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Aku kaya kanggo nggunakake fungsi umum kanggo API nyekel.

import * as Sentry from "@sentry/browser";

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

Impor fungsi iki ing telpon api sampeyan.

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

Ayo mriksa cara:

setLevel ngidini sampeyan nglebokake kesalahan tingkat menyang dashboard penjaga. Nduwe sifat - 'fatal', 'error', 'warning', 'log', 'info, 'debug', 'kritis').
setUser mbantu nyimpen data pangguna (id, alamat email, rencana pembayaran, lsp).
setExtra ngijini sampeyan kanggo nemtokake data sing perlu, contone, nyimpen.

Yen sampeyan pengin njaluk umpan balik pangguna babagan bug, sampeyan kudu nggunakake fungsi showReportDialog.

Sentry.showReportDialog();

Kesimpulan:

Dina iki kita nerangake salah sawijining cara kanggo nggabungake Sentry menyang aplikasi React.

→ Telegram chatting dening Sentry

Source: www.habr.com

Nelusuri kesalahan ing aplikasi React nggunakake Sentry

1. Kenapa sampeyan kudu Sentry?

Apa Sentry?

2. Mlebet lan nggawe proyek

3. Integrasi React lan Sentry

4. Nelusuri kesalahan pisanan

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