ProHoster > Blog > İdarə > React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

React ilə Sentry istifadəsini araşdırırıq.

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

Bu məqalə bir nümunədən istifadə edərək Sentry səhvlərini bildirməklə başlayan seriyanın bir hissəsidir: Часть 1.

Reaksiyanın həyata keçirilməsi

Əvvəlcə bu proqram üçün yeni Sentry layihəsi əlavə etməliyik; Sentry saytından. Bu halda biz React seçirik.

Biz iki düyməmizi, Hello və Error-u React ilə tətbiqetmədə yenidən tətbiq edəcəyik. Başlanğıc tətbiqimizi yaratmaqla başlayırıq:

npx create-react-app react-app

Sonra Sentry paketini idxal edirik:

yarn add @sentry/browser

və onu işə salın:

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

Müşahidələr:

  • İnkişaf zamanı bizim konsol kimi problemlərin monitorinqi üçün başqa mexanizmlərimiz var, ona görə də biz yalnız istehsal qurmaları üçün Sentry-i işə salırıq.

Sonra "Salam" və "Xəta" düymələrimizi tətbiq edirik və onları tətbiqə əlavə edirik:

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

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

Problem (Mənbə Xəritələri)

Biz Sentry-i istehsal quruluşu ilə sınaya bilərik:

yarn build

və build qovluğundan daxil edin:

npx http-server -c-1

Dərhal qarşılaşdığımız problem, Sentry-nin səhv qeydlərinin kiçildilmiş dəstədəki sətir nömrələrinə istinad etməsidir; çox faydalı deyil.

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

Sentry xidməti bunu səhv aldıqdan sonra azaldılmış paket üçün mənbə xəritələrini çəkməklə izah edir. Bu halda biz localhost-dan işləyirik (Sentry xidməti tərəfindən əlçatan deyil).

Həllər (Mənbə Xəritələri)

Bu problemin həlli proqramı ictimai veb serverdən işə salmaqdır. GitHub Səhifələr xidmətindən istifadə etmək üçün bir sadə cavab düyməsi (pulsuz). İstifadə üçün addımlar adətən aşağıdakılardır:

  1. Qovluğun məzmununu kopyalayın qurmaq qovluğa docs deponun kök kataloqunda.

  2. Yandırın GitHub Səhifələri sənədlər qovluğundan istifadə etmək üçün depoda (GitHub-dan). ustad filiallar

  3. Dəyişiklikləri GitHub-a köçürün

Qeyd: nə istifadə etməli olduğumu anladıqdan sonra proqram yaratmaq-yaratmaq tətbiqi işə salmaq üçün ana səhifə funksiyası. Package.json-a aşağıdakıları əlavə etməyə gəldim:

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

Çalışan tətbiqin son versiyası aşağıdakı ünvanda mövcuddur:

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

Tutulmuş Bugs İllüstrasiya

Salam düyməsini klikləməklə keçək.

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

Bu kimi görünən bir xəta ilə:

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

Müşahidələr:

  • Bu baq hesabatı daha aydın ola bilməz, BRAVO.

Hesaba alınmamış səhvlərin təsviri

Eynilə, düyməni basmaqla keçək səhv.

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

Bu kimi görünən bir xəta ilə:

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

Hesablanmamış səhvlərin daha yaxşı idarə edilməsi (göstərmə)

Səhv limitlərinin tətbiqi

İstifadəçi interfeysinin bir hissəsində JavaScript xətası bütün tətbiqi pozmamalıdır. React istifadəçiləri üçün bu problemi həll etmək üçün React 16 “səhv sərhədləri” adlı yeni konsepsiya təqdim edir.

Səhv sərhədləri JavaScript xətalarını uşaq komponent ağacının istənilən yerində tutan, həmin xətaları qeyd edən və qəzaya uğramış komponent ağacının yerinə ehtiyat UI təqdim edən Reaksiya komponentləridir. Səhv sərhədləri göstərmə zamanı, həyat dövrü metodlarında və onların altındakı bütün ağacın konstruktorlarında səhvləri tutur.

...

Aşkar edilməmiş səhvlər üçün yeni davranış

Bu dəyişiklik əhəmiyyətlidir. React 16-dan etibarən heç bir səhv sərhədi ilə tutulmayan xətalar bütün React komponent ağacının ayrılması ilə nəticələnəcək.

- Dan Abramov - Reaksiya 16-da səhvlərin idarə edilməsi

Bunu başa düşməzdən əvvəl mənə bir az vaxt aparan vacib bir aydınlıq budur yuxarıdakı davranış yalnız render metodunda atılan səhvlərlə işləyir (yaxud daha çox ehtimal ki, həyat dövrü metodlarından hər hansı birində). Məsələn, səhv sərhədlərindən istifadə bizim düyməmizlə heç bir yaxşı nəticə verməyəcək səhv; bu xəta klik işləyicisində idi.

Gəlin xətanın göstərilməsi nümunəsi yaradaq və sonra xətanı daha zərif şəkildə idarə etmək üçün xəta sərhədlərindən istifadə edək.

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

Müşahidə:

  • Düyməni basdığınız zaman, Reaksiya nümayiş olunacaq bayraq.qırılmış.saxta, xəta yaradır

  • Səhv sərhədi olmadan bütün komponent ağacı söküləcək

Sonra səhv sərhəd kodumuzu yazırıq (yeni həyat dövrü metodundan istifadə edir komponentDidCatch); Dan Abramovun məqaləsində verilən misal əslində budur:

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

Nəhayət, bu komponentdən istifadə edirik:

reaksiya-app/src/App.js

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

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

Bununla belə, “Render Error” düyməsinə klikləməklə ehtiyat istifadəçi interfeysi göstərilir və Sentry-ə xəta haqqında məlumat verilir.

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

React front-end proqramlarında Sentry uzaqdan səhv monitorinqi

Tamamlama

Ümid edirəm ki, bunu faydalı tapdınız.

PS Orijinala keçid

Sentry vasitəsilə PS Telegram söhbəti https://t.me/sentry_ru

Mənbə: www.habr.com

Добавить комментарий