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

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

1. Защо имате нужда от Sentry?

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

Смятате ли, че това не е достатъчно?

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

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

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

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

Спестете пари (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://63bbb258ca4346139ee533576e17ac46@sentry.io/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 разполага с полезен съветник, който да ви помогне да разберете какво трябва да направите след това. Можете да следвате стъпките по-долу. Искам да ви покажа как да създадете своя първи манипулатор на грешки. Страхотно, създадохме проект! Да преминем към следващата стъпка

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. Можете да го видите тук. Трябва да създадем грешка. Един от начините е достъп до свойството "undefined".

Трябва да създадем бутон, който да извиква конзолен дневник с user.email. След това действие трябва да получим съобщение за грешка: Uncaught TypeError (не може да прочете свойството от undefined 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://fc0edcf6927a4397855797a033f04085@sentry.io/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. Употреба Караул с крайна точка 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));
    }
  });

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

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