ProHoster > Blog > İdarə > Sentry ilə React proqramında səhvlərin izlənməsi

Sentry ilə React proqramında səhvlərin izlənməsi

Sentry ilə React proqramında səhvlərin izlənməsi

Bu gün sizə React proqramında real vaxt xətalarının izlənməsi haqqında məlumat verəcəyəm. Səhvlərin izlənilməsi üçün qabaqcıl proqram adətən istifadə edilmir. Bəzi şirkətlər tez-tez səhvlərin izlənməsini təxirə salırlar, sənədlərdən, testlərdən və s. sonra ona qayıdırlar. Bununla belə, məhsulunuzu yaxşılığa doğru dəyişə bilirsinizsə, o zaman bunu edin!

1. Sentry nə üçün lazımdır?

Güman edirəm ki, istehsal zamanı səhvləri izləməkdə maraqlısınız

Sizcə bu kifayət deyil?

Yaxşı, təfərrüatlara baxaq.

Tərtibatçıların Sentry-dən istifadə etməsinin əsas səbəbləri:

  • Səhvlərlə kodu yerləşdirərkən risklərdən qaçmağa imkan verir
  • Kod testi ilə QA-ya kömək edin
  • Problemlər haqqında sürətli bildirişlər alın
  • Səhvləri tez düzəltmək bacarığı
  • İdarəetmə panelində səhvlərin rahat ekranını əldə etmək
  • Səhvləri istifadəçi/brauzer seqmentinə görə sıralayın

CEO/Lead layihəsinin əsas səbəbləri

  • Pula qənaət edin (Sentry serverlərinizdə quraşdırıla bilər)
  • İstifadəçi rəyinin alınması
  • Real vaxtda layihənizdə nəyin səhv olduğunu başa düşmək
  • İnsanların tətbiqinizlə bağlı problemlərinin sayını başa düşmək
  • Tərtibatçılarınızın səhv etdiyi yerləri tapmağa kömək edin

Düşünürəm ki, tərtibatçılar əvvəlcə bu məqalə ilə maraqlanacaqlar. Müdirlərinizi Sentry-i inteqrasiya etməyə inandırmaq üçün bu səbəblər siyahısından da istifadə edə bilərsiniz.

Biznes siyahısındakı sonuncu maddə ilə diqqətli olun.

Artıq maraqlanırsınız?

Sentry ilə React proqramında səhvlərin izlənməsi

Sentry nədir?

Sentry, tərtibatçılara real vaxt rejimində qəzaları izləməyə və düzəltməyə kömək edən açıq mənbəli səhv izləmə proqramıdır. Unutmayın ki, proqram səmərəliliyi artırmağa və istifadəçi təcrübəsini yaxşılaşdırmağa imkan verir. Sentry JavaScript, Node, Python, PHP, Ruby, Java və digər proqramlaşdırma dillərini dəstəkləyir.

Sentry ilə React proqramında səhvlərin izlənməsi

2. Daxil olun və layihə yaradın

  • Sentry hesabınızı açın. Siz daxil olmalısınız. (Nəzərə alın ki, Sentry serverlərinizdə quraşdırıla bilər)
  • Növbəti addım layihə yaratmaqdır
  • Siyahıdan dilinizi seçin. (Reaksiya seçəcəyik. "Layihə yarat" üzərinə klikləyin)

Sentry ilə React proqramında səhvlərin izlənməsi

Tətbiqinizi fərdiləşdirin. Aşağıda Sentry-ni konteynerə necə inteqrasiya etməyin əsas nümunəsini görə bilərsiniz:

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-də bundan sonra nə etməli olduğunuzu anlamağa kömək etmək üçün köməkçi Sehrbaz var. Bu addımları izləyə bilərsiniz. Mən sizə ilk səhv işləyicinizi necə yaratacağınızı göstərmək istəyirəm. Əla, bir layihə yaratdıq! Gəlin növbəti mərhələyə keçək

3. React və Sentry inteqrasiyası

Layihənizdə npm paketini quraşdırmalısınız.

npm i @sentry/browser

Konteynerinizdə Sentry'i işə salın:

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

DSN Layihələr -> Parametrlər -> Müştəri Açarlarında yerləşir. Axtarış çubuğunda müştəri açarlarını tapa bilərsiniz.

Sentry ilə React proqramında səhvlərin izlənməsi

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

4. İlk səhvin izlənməsi

Məsələn, mən Deezer API ilə sadə musiqi proqramından istifadə etdim. Siz bunu görə bilərsiniz burada. Səhv yaratmalıyıq. Bir yol "müəyyən edilməmiş" xüsusiyyətə daxil olmaqdır

Zəng edən bir düymə yaratmalıyıq konsol jurnalı с user.email. Bu hərəkətdən sonra səhv mesajı almalıyıq: Tutulmamış TypeError (müəyyən edilməmişdən xüsusiyyəti oxumaq mümkün deyil email) itkin istifadəçi obyektinə görə. Siz də istifadə edə bilərsiniz Javascript istisnası.

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

Bütün konteyner belə görünür:

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

Bu düyməni birləşdirdikdən sonra onu brauzerdə sınamalısınız.

Sentry ilə React proqramında səhvlərin izlənməsi

İlk səhvimiz var

Sentry ilə React proqramında səhvlərin izlənməsi

vay!

Sentry ilə React proqramında səhvlərin izlənməsi

Başlıq xətasına klikləsəniz, yığın izini görəcəksiniz.

Sentry ilə React proqramında səhvlərin izlənməsi

Mesajlar pis görünür. Əlbəttə ki, kodun harada olduğunu anlamadan səhv mesajları gördük. Varsayılan olaraq biz ReactJS-də mənbə xəritəsi haqqında danışırıq, çünki onlar konfiqurasiya olunmayıb.

Mən həmçinin mənbə xəritəsini qurmaq üçün təlimatlar təqdim etmək istərdim, lakin bu, bu məqaləni nəzərdə tutduğumdan daha uzun edəcək.

Bu mövzunu öyrənə bilərsiniz burada. Bu məqalə ilə maraqlanırsınızsa, Dmitri Nozhenko mənbə xəritəsi inteqrasiyası haqqında ikinci hissəni dərc edəcək. Beləliklə, daha çox bəyənin və abunə olun Dmitri Nozhenkoikinci hissəni qaçırmamaq üçün.

5. İstifadə edin Sentry son nöqtəsi ilə API

TAMAM. Biz əvvəlki paraqraflarda javascript istisnasını əhatə etdik. Bununla belə, XHR səhvləri ilə bağlı nə edəcəyik?

Sentry də fərdi səhvlərin idarə edilməsinə malikdir. Api səhvlərini izləmək üçün istifadə etdim.

Sentry.captureException(err)

Siz tətbiqinizdən, e-poçtunuzdan və s. istifadə edərək xətanın adını, səviyyəsini fərdiləşdirə, məlumat əlavə edə, unikal istifadəçi məlumatlarını əlavə edə bilərsiniz.

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

Mən catch API üçün ümumi funksiyadan istifadə etmək istərdim.

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

Bu funksiyanı api zənginizə idxal edin.

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

Metodları yoxlayaq:

  • setLevel gözətçi tablosuna səviyyə xətası daxil etməyə imkan verir. Onun xassələri var - 'ölümcül', 'səhv', 'xəbərdarlıq', 'log', 'info, 'debug', 'critical').
  • setUser istənilən istifadəçi məlumatını (id, e-poçt ünvanı, ödəniş planı və s.) saxlamağa kömək edir.
  • setExtra sizə lazım olan hər hansı məlumatı, məsələn, saxlamağa imkan verir.

Əgər səhv haqqında istifadəçi rəyini almaq istəyirsinizsə, showReportDialog funksiyasından istifadə etməlisiniz.

Sentry.showReportDialog();

Nəticə:

Bu gün biz Sentry-ni React tətbiqinə inteqrasiya etməyin bir yolunu təsvir etdik.

→ Telegram çatı Sentry

Mənbə: www.habr.com

Добавить комментарий