Следење на грешки во апликацијата React со помош на Sentry

Денес ќе ви кажам за следење на грешки во реално време во апликацијата React. Апликацијата од предниот дел обично не се користи за следење на грешки. Некои компании често го одложуваат следењето на грешки, враќајќи се на него по документација, тестови итн. Меѓутоа, ако можете да го промените вашиот производ на подобро, тогаш само направете го тоа!

1. Зошто ви е потребен Sentry?

Претпоставувам дека сте заинтересирани да следите грешки за време на производството

Дали мислите дека ова не е доволно?

Добро, ајде да ги погледнеме деталите.

Главните причини за програмерите да користат Sentry:

• Ви овозможува да избегнете ризици при распоредување на код со грешки
• Помогнете QA со тестирање на кодот
• Добивајте брзи известувања за проблеми
• Способност за брзо коригирање на грешките
• Добивање пригоден приказ на грешки во административниот панел
• Сортирајте ги грешките по сегмент од корисник/прелистувач

Главните причини за извршен директор/Водечки проект

• Заштедете пари (Sentry може да се инсталира на вашите сервери)
• Добивање повратни информации од корисниците
• Разбирање што не е во ред со вашиот проект во реално време
• Разбирање на бројот на проблеми што луѓето ги имаат со вашата апликација
• Ви помогне да најдете места каде што вашите програмери направиле грешки

Мислам дека програмерите прво би биле заинтересирани за овој напис. Можете исто така да ја користите оваа листа на причини за да го убедите вашиот шеф да го интегрира Sentry.

Бидете внимателни со последната ставка од деловниот список.

Дали сте веќе заинтересирани?

Што е Сентри?

Sentry е апликација за следење грешки со отворен код која им помага на програмерите да ги следат и поправаат падовите во реално време. Не заборавајте дека апликацијата ви овозможува да ја зголемите ефикасноста и да го подобрите корисничкото искуство. Sentry поддржува JavaScript, Node, Python, PHP, Ruby, Java и други програмски јазици.

2. Најавете се и креирајте проект

• Отворете ја вашата сметка на Sentry. Можеби ќе треба да се најавите. (Ве молиме имајте предвид дека Sentry може да се инсталира на вашите сервери)
• Следниот чекор е да се создаде проект
• Изберете го вашиот јазик од списокот. (Ќе избереме React. Кликнете на „Креирај проект“)

Прилагодете ја вашата апликација. Основен пример за тоа како да се интегрира Sentry во контејнер може да се види подолу:

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

Сентри има корисен Волшебник кој ќе ви помогне да сфатите што треба да правите следно. Можете да ги следите овие чекори. Сакам да ви покажам како да го креирате вашиот прв управувач со грешки. Одлично, создадовме проект! Ајде да продолжиме на следниот чекор

3. Интеграција на React и Sentry

Мора да го инсталирате пакетот npm во вашиот проект.

npm i @sentry/browser

Иницијализирајте го Sentry во вашиот контејнер:

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

DSN се наоѓа во Проекти -> Поставки -> Клиентски клучеви. Можете да ги најдете клучевите на клиентот во лентата за пребарување.

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

4. Следење на првата грешка

На пример, користев едноставна музичка апликација со Deezer API. Можете да го видите тука. Треба да направиме грешка. Еден начин е да пристапите до имотот „недефиниран“.

Треба да создадеме копче што повикува конзола.лог с корисник.е-пошта. По оваа акција треба да добиеме порака за грешка: Нефатен тип Грешка (не може да чита својство од недефинирано email) поради недостасува кориснички објект. Можете исто така да користите Исклучок од Javascript.

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

Целиот контејнер изгледа вака:

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

Откако ќе го интегрирате ова копче, треба да го тестирате во прелистувачот.

Ја имаме првата грешка

Уу-ху!

Ако кликнете на грешката во заглавието, ќе видите трага на стек.

Пораките изгледаат лошо. Се разбира, видовме пораки за грешка без да разбереме каде е кодот. Стандардно зборуваме за мапата на изворот во ReactJS бидејќи тие не се конфигурирани.

Исто така, би сакал да дадам инструкции за поставување на изворната мапа, но тоа би ја направило оваа статија многу подолга отколку што имав намера.

Можете да ја проучувате оваа тема тука. Ако сте заинтересирани за овој напис, Дмитриј Ноженко ќе го објави вториот дел за интеграцијата на изворната мапа. Затоа, притиснете повеќе лајкови и претплатете се на Дмитриј Ноженкоза да не се пропушти вториот дел.

5. Употреба Sentry со крајна точка API

ДОБРО. Го опфативме javascript исклучокот во претходните параграфи. Сепак, што ќе правиме со XHR грешките?

Sentry исто така има прилагодено справување со грешки. Го користев за следење на API грешки.

Sentry.captureException(err)

Можете да го прилагодите името на грешката, нивото, да додавате податоци, единствени кориснички податоци користејќи ја вашата апликација, е-пошта итн.

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

Би сакал да користам генеричка функција за catch API.

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

Увезете ја оваа функција во вашиот api повик.

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

Ајде да ги провериме методите:

• setLevel ви овозможува да вметнете грешка во нивото во контролната табла на стражар. Има својства - „фатална“, „грешка“, „предупредување“, „лог“, „информации“, „дебагирање“, „критична“).
• setUser помага да се зачуваат какви било кориснички податоци (ид, адреса на е-пошта, план за плаќање итн.).
• setExtra ви овозможува да наведете какви било податоци што ви се потребни, на пример, складирање.

Ако сакате да добивате повратни информации од корисниците за грешка, треба да ја користите функцијата showReportDialog.

Sentry.showReportDialog();

Заклучок:

Денес опишавме еден начин за интегрирање на Sentry во апликацијата React.

→ Телеграмски разговор од Sentry

Извор: www.habr.com