შეცდომებზე თვალყურის დევნება 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://[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-ით. თქვენ შეგიძლიათ ნახოთ ეს აქ. ჩვენ უნდა შევქმნათ შეცდომა. ერთ-ერთი გზაა „განუსაზღვრელ“ თვისებაზე წვდომა

ჩვენ უნდა შევქმნათ ღილაკი, რომელიც რეკავს კონსოლი.ლოგი с user.email. ამ მოქმედების შემდეგ ჩვენ უნდა მივიღოთ შეცდომის შეტყობინება: Uncapped 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. გამოიყენეთ Sentry ბოლო წერტილით API

ᲙᲐᲠᲒᲘ. ჯავასკრიპტის გამონაკლისი განვიხილეთ წინა აბზაცებში. თუმცა, რას ვიზამთ 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 საშუალებას გაძლევთ ჩასვათ დონის შეცდომა სადარაჯო დაფაში. მას აქვს თვისებები - 'fatal', 'error', 'გაფრთხილება', 'log', 'info, 'debug', 'კრიტიკული').
• setUser ეხმარება შეინახოს ნებისმიერი მომხმარებლის მონაცემები (იდენტიფიკატორი, ელექტრონული ფოსტის მისამართი, გადახდის გეგმა და ა.შ.).
• setExtra საშუალებას გაძლევთ მიუთითოთ თქვენთვის საჭირო ნებისმიერი მონაცემი, მაგალითად, შენახვა.

თუ გსურთ მიიღოთ მომხმარებლის გამოხმაურება შეცდომის შესახებ, უნდა გამოიყენოთ showReportDialog ფუნქცია.

Sentry.showReportDialog();

დასკვნა:

დღეს ჩვენ აღვწერეთ Sentry-ის React აპლიკაციაში ინტეგრირების ერთი გზა.

→ Telegram ჩატი მიერ Sentry

წყარო: www.habr.com