🥇React frontend програмууд дахь алдааг алсын зайнаас хянах ProHoster

Бид Sentry-г React-тай хамт ашиглах талаар судалж байна.

Энэ нийтлэл нь жишээ ашиглан Sentry алдааг мэдээлэх цувралын нэг хэсэг юм: 1-ийн хэсэг.

React-ийн хэрэгжилт

Эхлээд бид энэ програмд зориулж шинэ Sentry төслийг нэмэх хэрэгтэй; Sentry вэбсайтаас. Энэ тохиолдолд бид React-ийг сонгоно.

Бид "Сайн уу" болон "Алдаа" гэсэн хоёр товчлуураа 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-г идэвхжүүлдэг.

Дараа нь бид "Сайн байна уу" болон "Алдаа" товчлууруудыг ажиллуулж, тэдгээрийг програмд нэмнэ:

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;

Асуудал (Эх газрын зураг)

Бид Sentry-ийг үйлдвэрлэлийн бүтэцтэй туршиж үзэх боломжтой:

yarn build

болон бүтээх хавтсаас дараахыг оруулна уу:

npx http-server -c-1

Бидний нэн даруй тулгардаг асуудал бол Sentry-ийн алдааны бүртгэл нь жижиглэсэн багц дахь мөрийн дугаартай холбоотой байдаг; тийм ч ашигтай биш.

Sentry үйлчилгээ үүнийг алдаа хүлээн авсны дараа багасгасан багцын эх газрын зургийг татах замаар тайлбарладаг. Энэ тохиолдолд бид localhost-оос ажиллаж байна (Sentry үйлчилгээнд хандах боломжгүй).

Шийдэл (Эх сурвалж газрын зураг)

Энэ асуудлыг шийдэх арга бол програмыг нийтийн вэб серверээс ажиллуулах явдал юм. GitHub Pages үйлчилгээг (үнэгүй) ашиглах нэг энгийн хариу товч. Ашиглах алхамууд нь ихэвчлэн дараах байдалтай байна.

Фолдерын агуулгыг хуулах барих хавтас руу Docs репозиторын үндсэн директорт.
Асаах GitHub хуудсууд репозитор (GitHub-аас) дотор байгаа docs хавтасыг ашиглах мастер мөчир
GitHub руу өөрчлөлт оруулах

тайлбар: Би юу ашиглах ёстойгоо ойлгосны дараа програм үүсгэх-үүсгэх програмыг эхлүүлэх үндсэн хуудасны функц. package.json-д дараах зүйлийг нэмж оруулахаар ирлээ.

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

Ажиллаж байгаа програмын эцсийн хувилбарыг дараах хаягаар авах боломжтой.

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

Баригдсан алдаануудын зураг

Сайн байна уу товчийг дарж алхцгаая.

Ийм алдаа гарч ирвэл:

Ажиглалт:

Энэ алдааны тайланг илүү тодорхой болгож чадсангүй. БРАВО.

Тооцоогүй алдаануудын дүрслэл

Үүний нэгэн адил товчлуур дээр дарж үзье Алдаа.

Ийм алдаа гарч ирвэл:

Тооцоогүй алдааг илүү сайн зохицуулах (рендер)

Алдааны хязгаарын танилцуулга

Хэрэглэгчийн интерфейсийн хэсэг дэх JavaScript алдаа нь програмыг бүхэлд нь эвдэж болохгүй. React хэрэглэгчдэд энэ асуудлыг шийдэхийн тулд React 16 нь "алдааны хязгаар" хэмээх шинэ ойлголтыг нэвтрүүлсэн.

Алдааны хил хязгаар нь өөрийн хүүхдийн бүрэлдэхүүн хэсгийн модны хаана ч байсан JavaScript алдааг барьж, тэдгээр алдааг бүртгэж, эвдэрсэн бүрэлдэхүүн хэсгийн модны оронд нөөц UI үүсгэдэг React бүрэлдэхүүн хэсгүүд юм. Алдааны хил хязгаар нь дүрслэх явцад, амьдралын мөчлөгийн аргууд болон тэдгээрийн доор байрлах бүхэл бүтэн модыг бүтээгчид алдаа гаргадаг.

...

Илрүүлээгүй алдааны шинэ үйлдэл

Энэ өөрчлөлт нь ач холбогдолтой юм. 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,
    });
  }
}

Ажиглалт:

Та товчлуурыг дарахад, урвалд харуулах болно туг.барагдсан.хуурамч, энэ нь алдаа үүсгэдэг
Алдааны хил хязгааргүй бол бүрэлдэхүүний модыг бүхэлд нь салгах болно

Дараа нь бид алдааны хилийн кодыг бичнэ (шинэ амьдралын мөчлөгийн аргыг ашигладаг componentDidCatch); Энэ бол Дан Абрамовын нийтлэлд өгсөн жишээ юм.

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 товчийг дарснаар нөөц UI гарч ирэх бөгөөд алдааг Sentry-д мэдээлнэ.

Дуусгавар болгох

Энэ нь танд хэрэг болсон гэж найдаж байна.

PS Жинхэнэ холбоос

Sentry-ээр дамжуулан PS Telegram чат https://t.me/sentry_ru

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

React frontend програмууд дахь алдаануудыг алсын зайнаас хянах

сэтгэгдэл нэмэх хариу цуцлах