🥇 Sentry remote nlekota nke chinchi na React frontend ngwa

Anyị na-eme nchọpụta site na iji Sentry with React.

Edemede a bụ akụkụ nke usoro na-amalite site na mkpesa njehie Sentry site na iji ọmụmaatụ: Part 1.

Mmejuputa mmeghachi omume

Mbụ anyị kwesịrị ịgbakwunye ọrụ Sentry ọhụrụ maka ngwa a; sitere na webụsaịtị Sentry. N'okwu a, anyị na-ahọrọ React.

Anyị ga-emegharị bọtịnụ anyị abụọ, Ndewo na Error, na ngwa nwere React. Anyị na-amalite site na ịmepụta ngwa mmalite anyị:

npx create-react-app react-app

Mgbe ahụ anyị na-ebubata ngwungwu Sentry:

yarn add @sentry/browser

ma bido ya:

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

Nlebanya:

N'oge mmepe, anyị nwere usoro ndị ọzọ maka nlekota okwu, dị ka console, yabụ naanị anyị na-enyere Sentry aka maka nrụpụta

Ọzọ anyị mejuputa bọtịnụ ndewo na njehie wee tinye ha na ngwa:

react-app/src/Ndewo.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;

Nsogbu (Map isi mmalite)

Anyị nwere ike nwalee Sentry site na iji nrụpụta mmepụta site na ịbanye:

yarn build

na site na wuo nchekwa tinye:

npx http-server -c-1

Nsogbu anyị na-abanye ozugbo bụ na ndekọ njehie Sentry na-ezo aka na ọnụọgụ ahịrị na obere obere; abaghị uru.

Ọrụ Sentry na-akọwa nke a site na ịdọrọ maapụ isi mmalite maka ngwungwu mbelata ka ọ nwetasịrị mperi. N'okwu a, anyị na-agba ọsọ site na localhost (ọrụ Sentry anaghị enweta ya).

Ngwọta (Map isi mmalite)

Ngwọta maka nsogbu a bụ iji mee ngwa ahụ site na sava weebụ ọha. Otu bọtịnụ nzaghachi dị mfe iji ọrụ GitHub Pages (n'efu). Usoro ị ga-eji na-abụkarị ndị a:

Detuo ọdịnaya nke folda ahụ -ewu na folda Docs na mgbọrọgwụ ndekọ nke ebe nchekwa.
Gbanwuo Peeji GitHub na ebe nchekwa (site na GitHub) iji jiri nchekwa docs na nwe- alaka
Pịa mgbanwe na GitHub

Примечание: mgbe m chọpụtara ihe m kwesịrị iji mepụta-mepụta-ngwa ọrụ ibe ụlọ iji malite ngwa ahụ. gbadatara ịgbakwunye ihe ndị a na pack.json:

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

Ụdị ikpeazụ nke ngwa na-agba ọsọ dị na:

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

Ihe atụ nke ahụhụ ejidere

Ka anyị gagharịa site na ịpị bọtịnụ Ndewo.

Na njehie na-apụta dị ka nke a:

Nlebanya:

Akụkọ ahụhụ a enweghị ike ịpụta nke ọma, Ị MERE NKE ỌMA.

Ihe atụ nke mperi na-enweghị aha

N'otu aka ahụ, ka anyị gafere site na ịpị bọtịnụ Error.

Na njehie na-apụta dị ka nke a:

Ijikwa njehie ndị a na-enwetaghị (nsụgharị) ka mma

Mmalite oke mperi

Njehie Javascript dị n'akụkụ ihe nrụnye onye ọrụ ekwesịghị imebi ngwa ahụ dum. Iji dozie nsogbu a maka ndị ọrụ React, React 16 na-ewebata echiche ọhụrụ akpọrọ "njehie bounds".

Oke mperi bụ ngwa mmeghachi omume na-ejide njehie Javascript n'ebe ọ bụla n'ime osisi akụrụngwa nwa ha, denye mperi ndị ahụ, ma mee UI ọdịda kama ịbụ osisi akụrụngwa dara. Oke njehie na-ejide mperi n'oge a na-enye ya, na usoro ndụ ndụ, yana na ndị na-arụ osisi niile dị n'okpuru ha.

...

Omume ọhụrụ maka mperi ndị achọpụtaghị

Mgbanwe a dị ịrịba ama. Dị ka nke React 16, mperi na-ejideghị site na oke njehie ọ bụla ga-eme ka ebupụ osisi akụrụngwa React niile.

- Dan Abramov - Ijikwa njehie na mmeghachi omume 16

Otu nkọwa dị mkpa nke were m obere oge tupu m aghọta nke a bụ nke ahụ Omume a dị n'elu na-arụ ọrụ naanị na njehie tụbara n'ime usoro ntụgharị (ma ọ bụ karịa na nke ọ bụla n'ime usoro ndụ ndụ). Dịka ọmụmaatụ, iji ókèala njehie agaghị eme nke ọma na bọtịnụ anyị Error; njehie a dị na onye njikwa pịa.

Ka anyị mepụta ihe atụ mere njehie wee jiri oke njehie jikwaa njehie ahụ nke ọma.

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

Kwuru:

Mgbe ịpị bọtịnụ, Emeghachi ga-egosipụta ọkọlọtọ.busted.uru, nke na-ebute njehie
Na-enweghị oke njehie, a ga-ebupụ osisi akụrụngwa niile

Mgbe ahụ, anyị na-ede koodu ókèala njehie anyị (na-eji usoro ndụ ndụ ọhụrụ akụrụngwaDidCatch); Nke a bụ n'ezie ihe atụ e nyere n'akwụkwọ 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;
  }
}

N'ikpeazụ, anyị na-eji akụrụngwa a:

react-app/src/App.js

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

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

Agbanyeghị, ịpị bọtịnụ njehie Render na-egosiputa UI ndaghachi azụ wee kọọ njehie na Sentry.

Mmecha

Enwere m olileanya na ị hụrụ nke a aka.

PS Njikọ na nke mbụ

PS Telegram kparịta ụka site na Sentry https://t.me/sentry_ru

isi: www.habr.com

Sentry nleba anya nke nchinchi na ngwa React frontend

Tinye a comment Отменить ответ