🥇React қолданбасындағы қателерді Sentry көмегімен бақылау

Бүгін мен сізге React қолданбасында нақты уақыттағы қателерді бақылау туралы айтып беремін. Функционалды қолданба әдетте қателерді бақылау үшін пайдаланылмайды. Кейбір компаниялар қателерді бақылауды кейінге қалдырады, құжаттамадан, сынақтардан және т.б. кейін оған оралады. Дегенмен, егер сіз өнімді жақсы жаққа өзгерте алсаңыз, оны жасаңыз!

1. Сентри не үшін қажет?

Өндіріс кезінде қателерді қадағалау сізді қызықтырады деп ойлаймын

Бұл жеткіліксіз деп ойлайсыз ба?

Жарайды, егжей-тегжейлі қарастырайық.

Әзірлеушілердің Sentry пайдалануының негізгі себептері:

Қателері бар кодты қолдану кезінде тәуекелдерді болдырмауға мүмкіндік береді
Кодты тексеру арқылы QA-ға көмектесіңіз
Мәселелер туралы жылдам хабарландырулар алыңыз
Қателерді тез түзету мүмкіндігі
Әкімші панелінде қателердің ыңғайлы дисплейін алу
Қателерді пайдаланушы/браузер сегменті бойынша сұрыптаңыз

CEO/Lead жобасының негізгі себептері

Ақшаны үнемдеңіз (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;
        }
    }
}

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 көмегімен қарапайым музыкалық қолданбаны қолдандым. Сіз оны көре аласыз осында. Бізге қате жасау керек. Бір жолы «анықталмаған» сипатқа қол жеткізу

Бізге қоңырау шалатын түймені жасау керек console.log с user.email. Бұл әрекеттен кейін біз қате туралы хабарды алуымыз керек: Ұсталмаған TypeError (анықталмаған сипатты оқу мүмкін емес 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. Пайдалану Күзетші соңғы нүктесімен 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 қолданбасына біріктірудің бір әдісін сипаттадық.

→ Telegram чаты арқылы Күзетші

Ақпарат көзі: www.habr.com

Sentry көмегімен React қолданбасындағы қателерді қадағалау

1. Сентри не үшін қажет?

Сентри дегеніміз не?

2. Жүйеге кіріп, жоба жасаңыз

3. React және Sentry интеграциясы

4. Бірінші қатені қадағалау

пікір қалдыру Жауапты болдырмау