🥇 Sentry cianfhaireachán ar fhabhtanna in fheidhmchláir aghaidheanna React

Táimid ag fiosrú ag baint úsáide as Sentry le React.

Tá an t-alt seo mar chuid de shraith a thosaíonn le tuairisciú earráidí Sentry ag baint úsáide as sampla: Часть 1.

Feidhmiú React

Ar dtús caithfimid tionscadal Sentry nua a chur leis an iarratas seo; ó láithreán gréasáin Sentry. Sa chás seo roghnaíonn muid React.

Déanfaimid ár dhá chnaipe, Dia duit agus Earráid, a chur i bhfeidhm arís in iarratas le React. Déanaimid ár n-iarratas tosaithe a chruthú:

npx create-react-app react-app

Ansin déanaimid an pacáiste Sentry a allmhairiú:

yarn add @sentry/browser

agus cuir tús leis:

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

Tuairimí:

Le linn na forbartha, tá meicníochtaí eile againn chun monatóireacht a dhéanamh ar shaincheisteanna, mar shampla an consól, mar sin ní chuirimid ar chumas Sentry ach amháin le haghaidh tógála táirgeachta

Ansin cuirimid ár cnaipí Dia duit agus Earráid i bhfeidhm agus cuirimid leis an bhfeidhmchlár iad:

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;

Fadhb (Léarscáileanna Foinse)

Is féidir linn Sentry a thástáil le tógáil táirgeachta trí iontráil a dhéanamh:

yarn build

agus ón bhfillteán tógála cuir isteach:

npx http-server -c-1

Is í an fhadhb atá againn láithreach ná go dtagraíonn taifid earráide Sentry d'uimhreacha línte sa bhaisc mhionsonraithe; nach bhfuil an-úsáideach.

Míníonn an tseirbhís Sentry é seo trí na léarscáileanna foinse a tharraingt don phaicéad laghdaithe tar éis earráid a fháil. Sa chás seo táimid ag rith ó localhost (nach bhfuil rochtain ag an tseirbhís Sentry).

Réitigh (Léarscáileanna Foinse)

Is é réiteach na faidhbe seo ná an feidhmchlár a rith ó fhreastalaí gréasáin poiblí. Cnaipe freagra simplí amháin chun an tseirbhís GitHub Pages a úsáid (saor in aisce). Is iad seo a leanas na céimeanna le húsáid de ghnáth:

Cóipeáil ábhar an fhillteáin a thógáil chuig fillteán docs i bhfréamheolaire an taisclann.
Cas ar Leathanaigh GitHub sa stór (ó GitHub) chun an fillteán docs a úsáid i máistir craobhacha
Brúigh athruithe chuig GitHub

Tabhair faoi deara: tar éis figured mé amach cad is gá dom a úsáid cruthaigh-chruthaigh-app feidhm leathanach baile chun an feidhmchlár a sheoladh. Tháinig sé síos ar an méid seo a leanas a chur le package.json:

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

Tá an leagan deiridh den fheidhmchlár reatha ar fáil ag:

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

Léiriú ar Fhabhtanna Gafa

Siúlfaimid trí chliceáil ar an gcnaipe Dia duit.

Le earráid le feiceáil mar seo:

Tuairimí:

Níorbh fhéidir an tuairisc fabht seo a bheith níos soiléire, BRAVO.

Léiriú ar Earráidí Gan Cuntas

Mar an gcéanna, a ligean ar dul tríd an cliceáil cnaipe earráid.

Le earráid le feiceáil mar seo:

Láimhseáil níos fearr ar earráidí gan tuairisc (rindreáil)

Teorainneacha Earráidí a thabhairt isteach

Níor cheart go ndéanfadh earráid JavaScript i gcuid den chomhéadan úsáideora an feidhmchlár iomlán a bhriseadh. Chun an fhadhb seo a réiteach d'úsáideoirí React, tugann React 16 coincheap nua isteach ar a dtugtar "teorainneacha earráide".

Is éard atá i dteorainneacha earráide ná comhpháirteanna React a ghlacann earráidí JavaScript áit ar bith ina gcrann comhpháirte linbh, a logáil na hearráidí sin, agus a dhéanann Chomhéadain Cúltaca in ionad an chrainn chomhpháirt a thuairteáil. Gabhann teorainneacha earráide earráidí le linn rindreála, i modhanna saolré, agus i dtógálaithe an chrainn ar fad thíos fúthu.

...

Iompar nua le haghaidh earráidí neamhbhraite

Tá an t-athrú seo suntasach. Ó thaobh Imoibriú 16, déanfar an crann comhpháirte React ar fad a dhíshuiteáil de bharr earráidí nár ghlac aon teorainn earráide leo.

- Dan Abramov - Earráid a Láimhseáil san Fhrithghníomh 16

Soiléiriú tábhachtach a thóg tamall orm sular thuig mé é seo ní oibríonn an t-iompar thuas ach amháin le hearráidí a chaitear sa mhodh rindreála (nó is dóichí in aon cheann de na modhanna saolré). Mar shampla, ní dhéanfadh úsáid teorainneacha earráide aon mhaith lenár gcnaipe earráid; bhí an earráid seo sa láimhseálaí cliceáil.

Cruthaímid earráid rindreála samplach agus ansin úsáidimid teorainneacha earráide chun an earráid a láimhseáil ar bhealach níos galánta.

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

Breathnóireacht:

Nuair a bhrúnn tú an cnaipe, Freagairt a thaispeánfar bratach.bhréagach, rud a ghineann earráid
Gan teorainn earráide, déanfar an crann comhpháirte iomlán a dhíshuiteáil

Ansin scríobhaimid ár gcód teorann earráide (úsáideann sé an modh saolré nua comhpháirtDidCatch); is é seo go bunúsach an sampla a thugtar in alt 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;
  }
}

Ar deireadh úsáidimid an chomhpháirt seo:

react-app/src/App.js

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

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

Mar sin féin, nuair a chliceáiltear ar an gcnaipe Earráid Rindreála taispeántar an Chomhéadain Cúltaca agus tuairiscítear earráid do Sentry.

Críochnú

Tá súil agam gur chabhraigh sé seo leat.

PS Nasc leis an mbunleagan

PS Telegram comhrá trí Sentry https://t.me/sentry_ru

Foinse: will.com

Cianmhonatóireacht Sentry ar fhabhtanna in feidhmchláir aghaidh React

Add a comment Cealaigh freagra