🥇 Sgrùdadh iomallach air biastagan ann an tagraidhean aghaidh React

Tha sinn a’ rannsachadh a bhith a’ cleachdadh Sentry le React.

Tha an artaigil seo mar phàirt de shreath a’ tòiseachadh le bhith ag aithris air mearachdan Sentry a’ cleachdadh eisimpleir: Pàirt de 1.

Cur an gnìomh React

An toiseach feumaidh sinn pròiseact Sentry ùr a chuir ris airson an tagraidh seo; bho làrach-lìn Sentry. Anns a 'chùis seo tha sinn a' taghadh React.

Cuiridh sinn an dà phutan againn an gnìomh a-rithist, Hello agus Error, ann an tagradh le React. Bidh sinn a’ tòiseachadh le bhith a’ cruthachadh an tagradh tòiseachaidh againn:

npx create-react-app react-app

An uairsin bidh sinn a’ toirt a-steach am pasgan Sentry:

yarn add @sentry/browser

agus cuir air tùs e :

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

Amharcan:

Rè leasachadh, tha dòighean eile againn airson sùil a chumail air cùisean, leithid an consol, agus mar sin cha leig sinn le Sentry ach airson togail cinneasachaidh

An uairsin cuiridh sinn na putanan Hello and Error an gnìomh agus cuiridh sinn iad ris an tagradh:

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;

Duilgheadas (Mapa Stòr)

Faodaidh sinn deuchainn a dhèanamh air Sentry le togail cinneasachaidh le bhith a’ dol a-steach:

yarn build

agus bhon phasgan togail cuir a-steach:

npx http-server -c-1

Is e an duilgheadas anns a bheil sinn a’ ruith sa bhad gu bheil clàran mearachd Sentry a’ toirt iomradh air àireamhan loidhne anns a’ bhaidse bheag; nach eil glè fheumail.

Bidh an t-seirbheis Sentry a’ mìneachadh seo le bhith a’ tarraing na mapaichean stòr airson a’ phacaid lùghdaichte às deidh dhaibh mearachd fhaighinn. Anns a 'chùis seo tha sinn a' ruith bho localhost (nach eil ruigsinneach leis an t-seirbheis Sentry).

Fuasglaidhean (Mapa Stòr)

Is e am fuasgladh don duilgheadas seo an tagradh a ruith bho fhrithealaiche lìn poblach. Aon phutan freagairt sìmplidh gus seirbheis GitHub Pages a chleachdadh (an-asgaidh). Mar as trice tha na ceumannan airson a chleachdadh mar a leanas:

Dèan lethbhreac de shusbaint a’ phasgan togail gu pasgan docs ann an eòlaire freumh an stòrais.
Tionndaidh air Duilleagan GitHub anns an stòr (bho GitHub) gus am pasgan docs a chleachdadh a-steach mhaighstir geugan
Brùth atharrachaidhean gu GitHub

thuirt: an dèidh dhomh obrachadh a-mach dè a dh'fheumas mi a chleachdadh cruthaich-cruthaich-app gnìomh duilleag dachaigh gus an tagradh a chuir air bhog. Thàinig mi sìos gu bhith a’ cur na leanas ri package.json:

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

Tha an dreach mu dheireadh den tagradh ruith ri fhaighinn aig:

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

Dealbh de bhiteagan air an glacadh

Coisich sinn tro bhith a’ briogadh air a’ phutan Hello.

Le mearachd a’ nochdadh mar seo:

Amharcan:

Cha b’ urrainn don aithisg buga seo a bhith nas soilleire, BRAVO.

Dealbh de mhearachdan gun chunntas

Mar an ceudna, rachamaid tron phutan cliog mearachd.

Le mearachd a’ nochdadh mar seo:

Làimhseachadh nas fheàrr air mearachdan gun chunntas (toirt seachad)

Ro-ràdh Crìochan Mearachd

Cha bu chòir mearachd JavaScript ann am pàirt den eadar-aghaidh cleachdaiche an tagradh gu lèir a bhriseadh. Gus an duilgheadas seo fhuasgladh do luchd-cleachdaidh React, tha React 16 a’ toirt a-steach bun-bheachd ùr ris an canar “crìochan mearachd”.

Tha crìochan mearachd nan co-phàirtean React a ghlacas mearachdan JavaScript an àite sam bith sa chraobh co-phàirteach chloinne aca, a’ clàradh na mearachdan sin, agus a’ toirt seachad UI cùl-taic an àite a’ chraobh cho-phàirteach a thuit. Bidh crìochan mearachd a 'glacadh mhearachdan rè render, ann an dòighean cuairt-beatha, agus ann an luchd-togail na craoibhe gu lèir fodha.

...

Giùlan ùr airson mearachdan nach deach aithneachadh

Tha an t-atharrachadh seo cudromach. Mar a tha ann an React 16, bidh mearachdan nach deach an glacadh le crìoch mearachd sam bith a’ ciallachadh gun tèid craobh na co-phàirt React gu lèir a dhì-mhunntachadh.

- Dan Abramov - Làimhseachadh mhearachdan ann an React 16

Soillearachadh cudromach a thug greis dhomh mus do thuig mi gur e seo chan obraich an giùlan gu h-àrd ach le mearachdan a chaidh a thilgeil anns an dòigh tairgse (no nas coltaiche ann an gin de na dòighean cuairt-beatha). Mar eisimpleir, cha dèanadh cleachdadh crìochan mearachd math sam bith leis a’ phutan againn mearachd; bha a' mhearachd seo anns an inneal-cliogaidh.

Cruthaichidh sinn eisimpleir de mhearachd tairgse agus an uairsin cleachdaidh sinn crìochan mearachd gus a’ mhearachd a làimhseachadh nas gràsmhoire.

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

Amharc:

Nuair a bhrùthas tu am putan, React thèid a thaisbeanadh bratach.bratach.bogus, a chruthaicheas mearachd
Às aonais crìoch mearachd, cha tèid craobh a’ cho-phàirt gu lèir a chuir sìos

An uairsin bidh sinn a 'sgrìobhadh ar còd crìochan mearachd (a' cleachdadh an dòigh cuairt-beatha ùr co-phàirtDidCatch); is e seo gu bunaiteach an eisimpleir a chaidh a thoirt seachad ann an artaigil 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;
  }
}

Mu dheireadh bidh sinn a 'cleachdadh a' cho-phàirt seo:

react-app/src/App.js

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

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

Ach, le bhith a’ cliogadh air a’ phutan Mearachd Render seallaidh an UI cùl-fhiosrachaidh agus ag aithris mearachd gu Sentry.

Crìochnachadh

Tha mi an dòchas gun d'fhuair thu feum air an duilleag seo.

PS Ceangal gu tùsail

cabadaich PS Telegram tro Sentry https://t.me/sentry_ru

Source: www.habr.com

Sgrùdadh air astar Sentry air biastagan ann an tagraidhean aghaidh React

Cuir beachd ann freagairt a chur dheth