🥇React frontend ilovalaridagi xatolarni masofadan nazorat qilish ProHoster

Biz Sentry-dan React bilan foydalanishni o'rganmoqdamiz.

Ushbu maqola misol yordamida Sentry xatolari haqida xabar berish bilan boshlangan seriyaning bir qismidir: 1 qismi.

Reactni amalga oshirish

Avval ushbu dastur uchun yangi Sentry loyihasini qo'shishimiz kerak; Sentry veb-saytidan. Bunday holda biz React-ni tanlaymiz.

Biz ikkita tugmachani, Salom va Xatoni React bilan ilovada qayta ishga tushiramiz. Biz boshlang'ich dasturimizni yaratishdan boshlaymiz:

npx create-react-app react-app

Keyin biz Sentry paketini import qilamiz:

yarn add @sentry/browser

va uni ishga tushiring:

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,
  });
}
...

Kuzatishlar:

Rivojlanish jarayonida bizda konsol kabi muammolarni nazorat qilish uchun boshqa mexanizmlar mavjud, shuning uchun biz faqat ishlab chiqarish uchun Sentry-ni yoqamiz.

Keyin biz "Salom" va "Xato" tugmachalarini qo'llaymiz va ularni ilovaga qo'shamiz:

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;

Muammo (manba xaritalari)

Biz Sentryni ishlab chiqarish qurilishi bilan sinab ko'rishimiz mumkin:

yarn build

va qurilish papkasidan quyidagilarni kiriting:

npx http-server -c-1

Biz darhol duch keladigan muammo shundaki, Sentryning xato yozuvlari kichiklashtirilgan partiyadagi qator raqamlariga ishora qiladi; unchalik foydali emas.

Sentry xizmati buni xato qabul qilingandan keyin qisqartirilgan paket uchun manba xaritalarini tortib olish orqali tushuntiradi. Bunday holda biz localhost-dan ishlayapmiz (Sentry xizmatidan foydalana olmaydi).

Yechimlar (manba xaritalari)

Ushbu muammoni hal qilish dasturni umumiy veb-serverdan ishga tushirishdir. GitHub Pages xizmatidan foydalanish uchun bitta oddiy javob tugmasi (bepul). Foydalanish bosqichlari odatda quyidagicha:

Jildning mazmunidan nusxa oling qurish jildga docs omborning asosiy katalogida.
Yoqing GitHub sahifalari docs jildidan foydalanish uchun omborda (GitHub'dan). usta filiallari
O'zgarishlarni GitHub-ga suring

nota: nimadan foydalanishim kerakligini tushunganimdan keyin ilova yaratish-yaratish ilovani ishga tushirish uchun bosh sahifa funksiyasi. Quyidagilarni package.json ga qo'shish uchun keldim:

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

Ishlayotgan ilovaning yakuniy versiyasi quyidagi manzilda mavjud:

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

Tutilgan xatolar tasviri

Keling, Salom tugmasini bosish orqali o'taylik.

Quyidagi kabi xato paydo bo'lishi bilan:

Kuzatishlar:

Bu xatolik hisoboti aniqroq bo‘lmadi, BARAKALLA.

Hisobga olinmagan xatolar tasviri

Xuddi shunday, keling, tugmani bosish orqali o'tamiz xato.

Quyidagi kabi xato paydo bo'lishi bilan:

Hisobga olinmagan xatolarni yaxshiroq boshqarish (renderlash)

Xato chegaralarini joriy etish

Foydalanuvchi interfeysining bir qismidagi JavaScript xatosi butun dasturni buzmasligi kerak. React foydalanuvchilari uchun ushbu muammoni hal qilish uchun React 16 "xato chegaralari" deb nomlangan yangi tushunchani taqdim etadi.

Xato chegaralari - bu React komponentlari boʻlib, ular oʻzlarining kichik komponentlar daraxtining istalgan joyida JavaScript xatolarini ushlaydi, bu xatolarni qayd qiladi va buzilgan komponentlar daraxti oʻrniga zaxira foydalanuvchi interfeysini yaratadi. Xato chegaralari renderlash jarayonida, hayot aylanish usullarida va ularning ostidagi butun daraxt konstruktorlarida xatolarni aniqlaydi.

...

Aniqlanmagan xatolar uchun yangi xatti-harakatlar

Bu o'zgarish muhim ahamiyatga ega. React 16 dan boshlab, hech qanday xato chegarasi bilan ushlanmagan xatolar butun React komponentlar daraxtining uzilishiga olib keladi.

- Dan Abramov - React 16 da xato bilan ishlash

Buni tushunishimdan oldin menga bir muncha vaqt kerak bo'lgan muhim tushuntirish - bu yuqoridagi xatti-harakatlar faqat render usulida (yoki hayot aylanish usullaridan birida ko'proq) qilingan xatolar bilan ishlaydi.. Misol uchun, xato chegaralaridan foydalanish bizning tugma bilan hech qanday foyda keltirmaydi xato; bu xato bosish ishlov beruvchisida edi.

Keling, xatoni ko'rsatish misolini yaratamiz va keyin xatoni yanada oqilona hal qilish uchun xato chegaralaridan foydalanamiz.

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

Kuzatuv:

Tugmani bosganingizda, munosabat ko‘rsatiladi bayroq.busted.bogus, bu xatolikni keltirib chiqaradi
Xato chegarasi bo'lmasa, butun komponent daraxti o'chiriladi

Keyin biz xato chegara kodini yozamiz (yangi hayot aylanish usulidan foydalanadi komponentDidCatch); Bu asosan Dan Abramovning maqolasida keltirilgan misol:

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

Nihoyat, biz ushbu komponentdan foydalanamiz:

react-app/src/App.js

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

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

Biroq, "Render Error" tugmasini bosish zaxira foydalanuvchi interfeysini ko'rsatadi va Sentryga xato haqida xabar beradi.

Tugatish

Umid qilamanki, siz buni foydali deb topdingiz.

PS Asl nusxaga havola

Sentry orqali PS Telegram suhbati https://t.me/sentry_ru

Manba: www.habr.com

Sentry React frontend ilovalaridagi xatolarni masofadan nazorat qilish

a Izoh qo'shish Bu savolga javob bekor