🥇 Проследяване на грешки в React приложение с помощта на Sentry

Днес ще ви разкажа за проследяване на грешки в реално време в React приложение. Приложението за потребителски интерфейс обикновено не се използва за проследяване на грешки. Някои компании често отлагат проследяването на грешки, връщайки се към него след документация, тестове и други. Въпреки това, ако можете да подобрите продукта си, просто го направете!

1. Защо ви е нужен Sentry?

Предполагам, че се интересувате от проследяване на грешки в производствения процес.

Мислите ли, че това е недостатъчно?

Добре, нека да разгледаме детайлите.

Основни причини да използвате Sentry за разработчиците:

Позволява да се освободите от рисковете при разполагане на код с грешки.
Помощ на QA в тестването на кода.
Получаване на бързи уведомления за проблеми.
Възможност за бързо отстраняване на грешки.
Получаване на удобен преглед на грешките в администраторския панел.
Сортиране на грешките по сегменти на потребители / браузъри.

Основни причини за CEO / водещ на проекта.

Спестяване на средства (Sentry може да бъде инсталиран на вашите сървъри).
Получаване на отзиви от потребители.
Разбиране на това, което не е наред с проекта ви в реално време.
Разбиране на колко проблема имат хората с вашето приложение.
Помощ в намирането на места, където вашите разработчици са допуснали грешки.

Мисля, че разработчиците биха се заинтересували от тази статия на първо място. Можете също да използвате този списък с причини, за да убедите ръководството да интегрира 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:>"
// });
// трябваше да бъде извикан преди да се използва тук
// идеално преди дори да рендерирате приложението си react 

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

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

    render() {
        if (this.state.error) {
            // рендерирайте резервен UI
            return (
              <a onclick="{()" > Sentry.showReportDialog()}&gt;Докладвайте обратна връзка</a>
            );
        } else {
            // когато няма грешка, рендерирайте децата непокътнати
            return this.props.children;
        }
    }
}

В Sentry има полезен Асистент, който ще ви помогне да разберете какво да правите нататък. Можете да изпълните следните стъпки. Искам да ви покажа как да създадете вашия първи обработчик за грешки. Отлично, ние създадохме проект! Да преминем към следващата стъпка.

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

Трябва да инсталирате npm пакета в проекта си.

npm i @sentry/browser

Инициализирайте Sentry в контейнера си:

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

DSN се намира в Projects -> Settings -> Client Keys. Можете да намерите клиентските ключове в полето за търсене.

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

4. Проследяване на първата грешка

Например, аз използвах просто музикално приложение с API Deezer. Можете да видите това. тук.. Трябва да създадем грешка. Един от начините е да се опитате да получите свойство "undefined".

Трябва да създадем бутон, който да извиква console.log с user.email. След това действие трябва да получим съобщение за грешка: Uncaught TypeError (не може да бъде прочетено свойството от неопределено email) поради липсата на обект потребител. Можете също така да използвате изключение Javascript.

Целият контейнер изглежда така:

вносете React, { Component } от "react";
вносете { connect } от "react-redux";
вносете { Input, List, Skeleton, Avatar } от "antd";
вносете * Sentry от "@sentry/browser";
вносете getList от "..\/store\/actions\/getList";

Константа Search = Input.Search;

Константа mapState = state =&gt; ({
  списък: state.root.list,
  зареждане: state.root.loading
});

Константа mapDispatch = {
  getList
};

Клас Container разширява Component {
  конструктор(пропс) {
    super(пропс);

    Sentry.init({
      dsn: "https:\/\/fc0edcf6927a4397855797a033f04085@sentry.io\/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope =&gt; {
      Object.keys(errorInfo).forEach(key =&gt; {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    константи { списък, зареждане, getList } = this.props;
    константа user = undefined;
    return (
      <div classname="App">
        <button
          type="button"
          onclick="{()" > console.log(user.email)}
        &gt;
          тест грешка1
        </button>
        <div onclick="{()" > Sentry.showReportDialog()}&gt;Доклад за обратна връзка1</div>
        <h1>Инструмент за музика</h1>
        <br />
        <search onsearch="{value" > getList(value)} enterButton \/&gt;
        {зареждане &amp;&amp; <skeleton avatar title="{false}" loading="{true}" active />}
        {!зареждане &amp;&amp; (
          <list
            itemlayout="horizontal"
            datasource="{list}"
            locale="{{" emptytext: <div /> }}
            renderItem={item =&gt; (
              <List.Item>
                &lt;List.Item.Meta
                  avatar={<avatar src="{item.artist.picture}" />}
                  title={item.title}
                  description={item.artist.name}
                \/&gt;
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

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

След интегрирането на този бутон трябва да го тествате в браузъра.

Имаме първата грешка.

Ура!

Ако кликнете върху заглавието на грешката, ще видите трасировката на стека.

Съобщенията изглеждат зле. Разбира се, видяхме съобщения за грешки, без да разбираме, къде е този код. По подразбиране става въпрос за изходната карта в ReactJS, тъй като те не са конфигурирани.

Искам също да предоставя инструкции за настройка на изходната карта, но това би направило статията ми много по-дълга, отколкото планирах.

Можете да проучите тази тема тук.. Ако сте заинтересовани в тази статия, Дмитрий Ноженко ще публикува втора част относно интеграцията на source map. Така че натискайте повече лайкове и се абонирайте за Дмитрий Ноженко, за да не пропуснете втората част.

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": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

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

Бих искал да използвам обща функция за улов на 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(); - ако искате да получите обратна връзка от потребителите при грешка
  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 позволява да се добави грешка от ниво в контролния панел на Sentry. Има свойства – ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info’, ‘debug’, ‘critical’).
setUser помага да се запазят всякакви потребителски данни (id, имейл адрес, план за плащане и т.н.).
setExtra позволява да зададете всякакви данни, от които имате нужда, например, магазин.

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