ProHoster > Блог > Захиргаа > Sentry ашиглан React програмын алдааг хянах

Sentry ашиглан React програмын алдааг хянах

Sentry ашиглан React програмын алдааг хянах

Өнөөдөр би танд React програмын алдааг хянах бодит цагийн талаар ярих болно. Урд талын програмыг ихэвчлэн алдаа хянахад ашигладаггүй. Зарим компаниуд алдааны хяналтыг хойшлуулж, баримт бичиг, туршилт гэх мэтчилэн дараа нь буцаадаг. Гэсэн хэдий ч, хэрэв та бүтээгдэхүүнээ илүү сайн болгох боломжтой бол үүнийг хий!

1. Та яагаад Сентри хэрэгтэй байна вэ?

Та үйлдвэрлэлийн явцад гарсан алдааг хянах сонирхолтой байгаа гэж би бодож байна

Энэ хангалттай биш гэж та бодож байна уу?

За, нарийвчилсан мэдээллийг харцгаая.

Хөгжүүлэгчид Sentry-г ашиглах гол шалтгаанууд:

  • Алдаатай кодыг ашиглах үед эрсдэлээс зайлсхийх боломжийг танд олгоно
  • Кодын тест хийхэд QA-д тусална уу
  • Асуудлын талаар шуурхай мэдэгдэл хүлээн авах
  • Алдааг хурдан засах чадвар
  • Админ самбар дээрх алдааны тохиромжтой дэлгэцийг авах
  • Алдааг хэрэглэгч/хөтчийн сегментээр эрэмбэлэх

CEO/Lead төслийн гол шалтгаанууд

  • Мөнгө хэмнээрэй (Sentry-г сервер дээрээ суулгаж болно)
  • Хэрэглэгчийн санал хүсэлтийг авч байна
  • Бодит цаг хугацаанд таны төсөлд юу буруу байгааг ойлгох
  • Хүмүүс таны апп-д тулгардаг асуудлын тоог ойлгох
  • Таны хөгжүүлэгчид алдаа гаргасан газруудыг олоход тусална уу

Хөгжүүлэгчид энэ нийтлэлийг эхлээд сонирхож байх болно гэж би бодож байна. Та бас дарга нартаа Сентриг нэгтгэхийг итгүүлэхийн тулд эдгээр шалтгаануудын жагсаалтыг ашиглаж болно.

Бизнесийн жагсаалтын сүүлчийн зүйлд болгоомжтой байгаарай.

Та аль хэдийн сонирхож байна уу?

Sentry ашиглан React програмын алдааг хянах

Сентри гэж юу вэ?

Sentry нь алдааг хянах нээлттэй эхийн програм бөгөөд хөгжүүлэгчдэд бодит цаг хугацаанд нь алдааг хянах, засахад тусалдаг. Аппликешн нь үр ашгийг нэмэгдүүлэх, хэрэглэгчийн туршлагыг сайжруулах боломжийг олгодог гэдгийг бүү мартаарай. Sentry нь JavaScript, Node, Python, PHP, Ruby, Java болон бусад програмчлалын хэлийг дэмждэг.

Sentry ашиглан React програмын алдааг хянах

2. Нэвтэрч, төсөл үүсгэнэ үү

  • Sentry дансаа нээнэ үү. Та нэвтрэх шаардлагатай байж магадгүй. (Таны серверүүд дээр Sentry суулгаж болно гэдгийг анхаарна уу)
  • Дараагийн алхам бол төсөл үүсгэх явдал юм
  • Жагсаалтаас хэлээ сонгоно уу. (Бид React-ийг сонгох болно. "Төсөл үүсгэх" дээр дарна уу)

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 нь Projects -> Settings -> Client Keys хэсэгт байрладаг. Та хайлтын талбараас үйлчлүүлэгчийн түлхүүрүүдийг олох боломжтой.

Sentry ашиглан React програмын алдааг хянах

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

Энэ товчлуурыг нэгтгэсний дараа та үүнийг хөтөч дээр туршиж үзэх хэрэгтэй.

Sentry ашиглан React програмын алдааг хянах

Бидэнд анхны алдаа байна

Sentry ашиглан React програмын алдааг хянах

Хөөх!

Sentry ашиглан React програмын алдааг хянах

Хэрэв та толгойн алдаа дээр дарвал стекийн мөрийг харах болно.

Sentry ашиглан React програмын алдааг хянах

Зурвасууд муу харагдаж байна. Мэдээжийн хэрэг, бид код хаана байгааг ойлгохгүйгээр алдааны мэдэгдлийг харсан. Анхдагч байдлаар бид 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));
      }
    });
};

Дараах аргуудыг шалгацгаая.

  • тогтоосон түвшин харуулын самбарт түвшний алдаа оруулах боломжийг танд олгоно. Энэ нь шинж чанаруудтай - 'үхлийн', 'алдаа', 'ануулга', 'лог', 'мэдээлэл, 'дибаг', 'чухал').
  • setUser хэрэглэгчийн мэдээллийг (id, имэйл хаяг, төлбөрийн төлөвлөгөө гэх мэт) хадгалахад тусалдаг.
  • setExtra танд хэрэгтэй ямар ч өгөгдлийг зааж өгөх боломжийг олгодог, жишээ нь, хадгалах.

Хэрэв та алдааны талаар хэрэглэгчийн санал хүсэлтийг авахыг хүсвэл showReportDialog функцийг ашиглах хэрэгтэй.

Sentry.showReportDialog();

Дүгнэлт:

Өнөөдөр бид Sentry-г React программд нэгтгэх нэг аргыг тайлбарласан.

→ Telegram чат Sentry

Эх сурвалж: www.habr.com

сэтгэгдэл нэмэх