🥇 Kormeerka fog ee Sentry ee kutaannada ee codsiyada hore ee React

Waxaan sahaminaynaa adeegsiga Sentry with React.

Maqaalkani waa qayb ka mid ah taxane ka bilaabmaya ka warbixinta khaladaadka Sentry iyadoo la adeegsanayo tusaale: Qayb ka mid ah 1.

Hirgelinta Falcelinta

Marka hore waxaan u baahanahay inaan ku darno mashruuc cusub oo Sentry ah codsigan; Laga soo bilaabo degelka Sentry. Xaaladdan oo kale waxaan dooranay React.

Waxaan dib u hirgelin doonaa labadayada badhamada, Hello iyo Error, codsi leh React. Waxaan ku bilaabaynaa abuurista codsigayaga bilowga:

npx create-react-app react-app

Ka dib waxaan soo dejineynaa xirmada Sentry:

yarn add @sentry/browser

oo bilow:

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

U fiirsasho:

Inta lagu jiro horumarinta, waxaan haynaa habab kale oo lagula socdo arrimaha, sida console-ka, marka waxaan awood u siineynaa oo kaliya Sentry inay dhisto wax soo saar

Marka xigta waxaan hirgelineynaa badhamadayada Hello iyo Error oo ku darnaa codsiga:

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;

Dhib (Khariidadaha Isha)

Waxaan ku tijaabin karnaa Sentry dhisme wax soo saar annagoo gelaya:

yarn build

oo ka soo gal galka dhismaha:

npx http-server -c-1

Dhibaatada aan isla markiiba galnay ayaa ah in diiwaannada qaladka Sentry ay tixraacaan lambarrada laynka ee dufcada la yareeyay; aan faa'iido badan lahayn.

Adeegga Sentry ayaa tan ku sharaxaya isagoo u jiidaya khariidadaha isha ee xirmada la dhimay ka dib markii la helo qalad. Xaaladdan oo kale waxaan ka soconaa localhost (ma heli karo adeegga Sentry).

Xalka (Khariidadaha Isha)

Xalka dhibaatadan waa in laga maamulo arjiga laga bilaabo server-ka shabakada dadweynaha. Hal badhan oo jawaab fudud si aad u isticmaasho adeega GitHub Pages (bilaash). Talaabooyinka la adeegsanaayo badanaa waa sida soo socota:

Koobi waxa ku jira galka dhiso gal DoCS ee tusaha xididka ee kaydka.
Daaci Bogagga GitHub gudaha bakhaarka (laga bilaabo GitHub) si aad u isticmaasho gal docs-ka Master laamo
Ku riix isbedelada GitHub

tacliiq: ka dib markii aan ogaaday waxa aan u baahanahay inaan isticmaalo samee-abuur-app shaqada bogga guriga si loo bilaabo codsiga. U soo degey inuu ku daro kuwa soo socda pack.json:

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

Nooca ugu dambeeya ee arjiga socda ayaa laga heli karaa:

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

Sawirka Kutaannada La Qabtay

Aynu dhex marno adigoo gujinaya badhanka Hello.

Iyadoo uu khalad u muuqdo sidan:

U fiirsasho:

Warbixintan cayayaanka ayaa noqon kari weyday mid sii cad, BRAVO.

Sawirka Khaladaadka Aan La Ogayn

Sidoo kale, aynu dhex marno badhanka gujinaya Error.

Iyadoo uu khalad u muuqdo sidan:

Maareynta ka wanaagsan ee khaladaadka aan la xisaabin (samaynta)

Hordhaca Xadka Khaladka

Khaladka JavaScript ee qayb ka mid ah is-dhex galka isticmaaluhu waa inaanu jabin codsiga oo dhan. Si loo xalliyo dhibaatadan isticmaalayaasha React, React 16 waxa ay soo bandhigaysaa fikrad cusub oo loo yaqaan "xadadka qaladka".

Xuduudaha khaladku waa qaybaha falcelinta ee qabta khaladaadka JavaScript meel kasta oo ka mid ah geedka ka kooban ilmahooda, gal khaladaadkaas, oo sameeya dib-u-dhac UI halkii ay ka ahaan lahaayeen geedkii shil galay. Xuduudaha khaladku waxay qabtaan khaladaadka marka la bixinayo, hababka meertada nolosha, iyo kuwa wax dhisaya dhammaan geedka ka hooseeya iyaga.

...

Dhaqanka cusub ee khaladaadka aan la ogaan

Isbeddelkan waa mid muhiim ah. Laga bilaabo React 16, khaladaadka aan lagu qaban xuduud kasta oo khalad ah waxay keeni doontaa in dhammaan geedka ka kooban falcelinta la furo.

- Dan Abramov - Wax ka qabashada qaladka falcelinta 16

Caddeyn muhiim ah oo igu qaadatay in muddo ah ka hor intaanan ogaan tan ayaa ah taas Dhaqanka kore wuxuu kaliya ku shaqeeyaa khaladaadka lagu tuuray habka wax-soo-saarka (ama waxay u badan tahay mid ka mid ah hababka meertada nolosha). Tusaale ahaan, isticmaalka xuduudaha khaladku waxba kama tari doono badhankayaga Error; Ciladani waxa ay ku dhex jirtay dhagaha.

Aan abuurno tusaale khalad samaynta ka dibna aan isticmaalno xudduudaha khaladka si aan u xalinno khaladka si qurux badan.

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

U fiirsasho:

Markaad riixdo badhanka, Diido la soo bandhigi doono calan.buray.fog, taasoo dhalisa qalad
Xudduudda khaladka la'aanteed, dhammaan geedka ka kooban waa la dajin doonaa

Kadibna waxaynu qoraynaa koodka xuduudka khaladka ah (waxa aanu isticmaalnaa habka nololeed ee cusub qaybDidCatch; Tani asal ahaan waa tusaalaha lagu bixiyay maqaalka Dan Abramov:

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

Ugu dambeyntii waxaan isticmaalnaa qaybtan:

react-app/src/App.js

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

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

Si kastaba ha ahaatee, gujinta badhanka qaladka samaynta waxay soo bandhigaysaa dib u dhaca UI waxayna u sheegaysaa khalad Sentry.

Buuxi

Waxaan rajeynayaa inaad tan ka heshay waxtar.

PS Ku xidhka asalka

PS Telegram ku wada sheekaysta Sentry https://t.me/sentry_ru

Source: www.habr.com

La socodka fog ee Sentry ee kutaannada ee codsiyada hore ee React

Add a comment cancel reply