Sentry დისტანციური მონიტორინგი შეცდომების React frontend აპლიკაციებში

ჩვენ ვიკვლევთ Sentry-ს გამოყენებას React-თან ერთად.

ეს სტატია არის სერიის ნაწილი, რომელიც იწყება Sentry შეცდომების მოხსენებით მაგალითის გამოყენებით: Часть 1.

React-ის იმპლემენტაცია

ჯერ უნდა დავამატოთ ახალი Sentry პროექტი ამ აპლიკაციისთვის; Sentry ვებსაიტიდან. ამ შემთხვევაში ვირჩევთ React.

ჩვენ ხელახლა განვახორციელებთ ჩვენს ორ ღილაკს, Hello და Error, React-ის აპლიკაციაში. ჩვენ ვიწყებთ ჩვენი დამწყები აპლიკაციის შექმნით:

npx create-react-app react-app

შემდეგ ჩვენ შემოვიტანეთ Sentry პაკეტი:

yarn add @sentry/browser

და ინიციალიზაცია:

react-app/src/index.js

...
import * as Sentry from '@sentry/browser';

const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
  Sentry.init({
    dsn: 'https://[email protected]/1289887',
    release: RELEASE,
  });
}
...

დაკვირვება:

• განვითარების დროს, ჩვენ გვაქვს სხვა მექანიზმები მონიტორინგის საკითხებისთვის, როგორიცაა კონსოლი, ამიტომ ჩვენ ვუშვებთ მხოლოდ Sentry-ს საწარმოო კონსტრუქციებისთვის

შემდეგ ჩვენ ვახორციელებთ Hello და Error ღილაკებს და ვამატებთ მათ აპლიკაციაში:

react-app/src/Hello.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class Hello extends Component {
  state = {
    text: '',
  };
  render() {
    const { text } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Hello
        </button>
        <div>{text}</div>
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      text: 'Hello World',
    });
    try {
      throw new Error('Caught');
    } catch (err) {
      if (process.env.NODE_ENV !== 'production') {
        return;
      }
      Sentry.captureException(err);
    }
  }
}

react-app/src/MyError.js

import React, { Component } from 'react';

export default class MyError extends Component {
  render() {
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Error
        </button>
      </div>
    )
  }

  handleClick = () => {
    throw new Error('Uncaught');
  }
}

react-app/src/App.js

...
import Hello from './Hello';
import MyError from './MyError';

class App extends Component {
  render() {
    return (
      <div className="App">
        ...
        <Hello />
        <MyError />
      </div>
    );
  }
}

export default App;

პრობლემა (Source Maps)

ჩვენ შეგვიძლია შევამოწმოთ Sentry საწარმოო კონსტრუქციით შეყვანით:

yarn build

და build საქაღალდიდან შეიყვანეთ:

npx http-server -c-1

პრობლემა, რომელსაც მაშინვე წავაწყდით, არის ის, რომ Sentry-ის შეცდომის ჩანაწერები ეხება ხაზების ნომრებს მინიფიცირებული პარტიაში; არ არის ძალიან სასარგებლო.

Sentry სერვისი ამას განმარტავს შეცდომის მიღების შემდეგ წყაროს რუკების ამოღებით შემცირებული პაკეტისთვის. ამ შემთხვევაში ჩვენ ვმუშაობთ ლოკალჰოსტიდან (არ არის ხელმისაწვდომი Sentry სერვისისთვის).

გადაწყვეტილებები (წყაროს რუკები)

ამ პრობლემის გადაწყვეტა არის აპლიკაციის გაშვება საჯარო ვებ სერვერიდან. ერთი მარტივი პასუხის ღილაკი GitHub Pages სერვისის გამოსაყენებლად (უფასო). გამოყენების ნაბიჯები, როგორც წესი, შემდეგია:

1. დააკოპირეთ საქაღალდის შინაარსი ავაშენოთ საქაღალდეში Docs საცავის ძირეულ დირექტორიაში.

2. ჩართეთ GitHub გვერდები საცავში (GitHub-დან), რათა გამოიყენოთ docs საქაღალდე სამაგისტრო ფილიალები

3. დააყენეთ ცვლილებები GitHub-ში

შენიშვნა: მას შემდეგ რაც გავარკვიე, რისი გამოყენება მჭირდება შექმნა-შექმნა-აპი საწყისი გვერდის ფუნქცია აპლიკაციის გასაშვებად. მივიდა პაკეტი.json-ში შემდეგის დამატებამდე:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

გაშვებული აპლიკაციის საბოლოო ვერსია ხელმისაწვდომია:

https://larkintuckerllc.github.io/hello-sentry/

დაჭერილი ბაგების ილუსტრაცია

მოდით გავიაროთ Hello ღილაკზე დაწკაპუნებით.

შეცდომით, რომელიც ასე გამოიყურება:

დაკვირვება:

• ეს ხარვეზის ანგარიში არ შეიძლება იყოს უფრო მკაფიო, BRAVO.

გაუთვალისწინებელი შეცდომების ილუსტრაცია

ანალოგიურად, მოდით გავიაროთ ღილაკის დაჭერით შეცდომა.

შეცდომით, რომელიც ასე გამოიყურება:

გაუთვალისწინებელი შეცდომების უკეთ დამუშავება (გადაცემა)

შეცდომების ლიმიტების დანერგვა

JavaScript-ის შეცდომა მომხმარებლის ინტერფეისის ნაწილში არ უნდა დაარღვიოს მთელი აპლიკაცია. React-ის მომხმარებლებისთვის ამ პრობლემის გადასაჭრელად, React 16 წარმოგიდგენთ ახალ კონცეფციას სახელწოდებით "შეცდომის საზღვრები".

შეცდომის საზღვრები არის React კომპონენტები, რომლებიც იჭერენ JavaScript-ის შეცდომებს სადმე მათი შვილობილი კომპონენტის ხეში, აღრიცხავენ ამ შეცდომებს და აძლევენ სარეზერვო ინტერფეისს იმ კომპონენტის ხის ნაცვლად, რომელიც ჩამოვარდა. შეცდომის საზღვრები იჭერს შეცდომებს რენდერის დროს, სასიცოცხლო ციკლის მეთოდებში და მათ ქვემოთ მთელი ხის კონსტრუქტორებში.

...

ახალი ქცევა გამოუცნობი შეცდომებისთვის

ეს ცვლილება მნიშვნელოვანია. React 16-ის მდგომარეობით, შეცდომები, რომლებიც არ იქნა დაფიქსირებული რაიმე შეცდომის საზღვრებით, გამოიწვევს მთელი React კომპონენტის ხის დემონტაჟს.

- დენ აბრამოვი - შეცდომის დამუშავება React 16-ში

მნიშვნელოვანი განმარტება, რომელიც ცოტა ხანი დამჭირდა, სანამ ამას მივხვდებოდი, არის ის вышеупомянутое поведение работает только с ошибками, генерируемыми в методе рендеринга (или, что более вероятно, в любом из методов жизненного цикла). მაგალითად, შეცდომის საზღვრების გამოყენება არანაირ კარგს არ მოიტანს ჩვენს ღილაკზე შეცდომა; ეს შეცდომა იყო დაწკაპუნების დამმუშავებელში.

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

react-app/src/MyRenderError

import React, { Component } from 'react';

export default class MyRenderError extends Component {
  state = {
    flag: false,
  };
  render() {
    const { flag } = this.state;
    return (
      <div>
        <button
          onClick={this.handleClick}
        >
          Render Error
        </button>
        { flag && <div>{flag.busted.bogus}</div> }
      </div>
    )
  }

  handleClick = () => {
    this.setState({
      flag: true,
    });
  }
}

დაკვირვება:

• როდესაც დააჭირეთ ღილაკს, რეაგირებას ნაჩვენები იქნება დროშა.გატეხილი.ყალბი, რომელიც წარმოქმნის შეცდომას

• შეცდომის საზღვრის გარეშე, მთელი კომპონენტის ხე დამონტაჟდება

შემდეგ ჩვენ ვწერთ შეცდომის საზღვრის კოდს (იყენებს სიცოცხლის ციკლის ახალ მეთოდს კომპონენტიDidCatch); ეს არსებითად არის მაგალითი, რომელიც მოცემულია დენ აბრამოვის სტატიაში:

react-app/src/ErrorBoundary.js

import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';

export default class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(err, info) {
    this.setState({ hasError: true });
    Sentry.captureException(err);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }
    return this.props.children;
  }
}

საბოლოოდ ვიყენებთ ამ კომპონენტს:

react-app/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

თუმცა, Render Error ღილაკზე დაწკაპუნებით გამოჩნდება სარეზერვო ინტერფეისი და აცნობებს შეცდომის შესახებ Sentry-ს.

დასრულება

იმედი მაქვს, რომ ეს თქვენთვის სასარგებლო აღმოჩნდა.

PS ბმული ორიგინალთან

PS Telegram ჩატი Sentry-ის საშუალებით https://t.me/sentry_ru

წყარო: www.habr.com