🥇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-ին միայն արտադրական կառուցումների համար

Այնուհետև մենք իրականացնում ենք մեր «Բարև» և «Սխալ» կոճակները և դրանք ավելացնում ենք հավելվածին.

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

և build թղթապանակից մուտքագրեք.

npx http-server -c-1

Խնդիրը, որին մենք անմիջապես հանդիպեցինք, այն է, որ Sentry-ի սխալի գրառումները վերաբերում են փոքրացված խմբաքանակի տողերի համարներին. ոչ շատ օգտակար:

Sentry ծառայությունը բացատրում է դա՝ սխալ ստանալուց հետո կրճատված փաթեթի աղբյուրի քարտեզները քաշելով: Այս դեպքում մենք աշխատում ենք localhost-ից (հասանելի չէ Sentry ծառայության կողմից):

Լուծումներ (Աղբյուր քարտեզներ)

Այս խնդրի լուծումը հավելվածը հանրային վեբ սերվերից գործարկելն է: Մեկ պարզ պատասխան կոճակ՝ GitHub Pages ծառայությունից օգտվելու համար (անվճար): Օգտագործման քայլերը սովորաբար հետևյալն են.

Պատճենեք թղթապանակի բովանդակությունը կառուցել դեպի թղթապանակ Docs պահոցի արմատային գրացուցակում:
Միացնել GitHub Էջեր պահոցում (GitHub-ից)՝ փաստաթղթերի թղթապանակն օգտագործելու համար վարպետ մասնաճյուղերը
Փոփոխությունները մղեք GitHub-ին

Նշում: այն բանից հետո, երբ ես հասկացա, թե ինչ պետք է օգտագործեմ ստեղծել-ստեղծել-հավելված Գլխավոր էջի գործառույթը հավելվածը գործարկելու համար: Եկավ հետևյալն ավելացնելով package.json-ին.

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

Գործող հավելվածի վերջնական տարբերակը հասանելի է հետևյալ հասցեով՝

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

Բռնված սխալների նկարազարդում

Եկեք անցնենք, սեղմելով Բարև կոճակը:

Սխալով, որը հայտնվում է այսպես.

Դիտարկումներ:

Այս վրիպակի զեկույցը չէր կարող ավելի պարզ լինել, ԲՐԱՎՈ.

Չհաշվառված սխալների նկարազարդում

Նմանապես, եկեք անցնենք կոճակի սեղմման միջոցով սխալ.

Սխալով, որը հայտնվում է այսպես.

Չհաշվառված սխալների ավելի լավ կառավարում (արտադրում)

Սխալների սահմանաչափերի ներդրում

Օգտագործողի միջերեսի մի մասում 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

Source: www.habr.com

Sentry-ի հեռավոր մոնիտորինգ React frontend հավելվածներում վրիպակների

Добавить комментарий Չեղարկել պատասխանել