🥇E hoʻouna i ka nānā mamao ʻana i nā pōpoki i nā noi mua React

Ke ʻimi nei mākou i ka hoʻohana ʻana iā Sentry me React.

He ʻāpana kēia ʻatikala o kahi moʻo e hoʻomaka me ka hōʻike ʻana i nā hewa Sentry me ka hoʻohana ʻana i kahi laʻana: ʻĀpana 1.

Hoʻokō i ka React

Pono mākou e hoʻohui i kahi papahana Sentry hou no kēia noi; mai ka pūnaewele Sentry. I kēia hihia, koho mākou i React.

E hoʻokō hou mākou i kā mākou mau pihi ʻelua, Hello and Error, i kahi noi me React. Hoʻomaka mākou ma ka hana ʻana i kā mākou polokalamu hoʻomaka:

npx create-react-app react-app

A laila lawe mākou i ka pūʻolo Sentry:

yarn add @sentry/browser

a hoʻomaka ia:

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

Nānā:

I ka wā o ka hoʻomohala ʻana, loaʻa iā mākou nā ʻano hana ʻē aʻe no ka nānā ʻana i nā pilikia, e like me ka console, no laila hiki iā mākou ke ʻae iā Sentry no ka kūkulu ʻana.

A laila hoʻokō mākou i kā mākou Hello and Error pihi a hoʻohui iā lākou i ka noi:

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;

Pilikia (Nā palapala ʻāina)

Hiki iā mākou ke hoʻāʻo iā Sentry me kahi kūkulu hana ma ke komo ʻana:

yarn build

a mai ka waihona kūkulu e komo:

npx http-server -c-1

ʻO ka pilikia a mākou e holo koke ai, ʻo nā moʻolelo kuhi hewa o Sentry e pili ana i nā helu laina i loko o ka pahu minified; ʻaʻole pono loa.

Hōʻike ka lawelawe Sentry i kēia ma ka huki ʻana i nā palapala kumu no ka ʻeke hōʻemi ma hope o ka loaʻa ʻana o kahi hewa. I kēia hihia ke holo nei mākou mai localhost (ʻaʻole hiki ke ʻike ʻia e ka lawelawe Sentry).

Nā Hoʻonā (Nā Palapala ʻāina)

ʻO ka hoʻonā i kēia pilikia ʻo ka holo ʻana i ka noi mai kahi kikowaena pūnaewele lehulehu. Hoʻokahi pihi pane maʻalahi e hoʻohana i ka lawelawe ʻo GitHub Pages (noa). ʻO nā ʻanuʻu e hoʻohana maʻamau penei:

E kope i nā mea o ka waihona hana i ka waihona Palapala ma ka papa kuhikuhi kumu o ka waihona.
Hoʻomaka ʻAoʻao GitHub i loko o ka waihona (mai GitHub) e hoʻohana i ka waihona docs i haku nā lālā
Hoʻololi i nā hoʻololi iā GitHub

i hoʻopuka: Ma hope o koʻu ʻike ʻana i kaʻu mea e pono ai e hoʻohana hana-hana-app hana ʻaoʻao home e hoʻomaka i ka noi. Ua iho mai e hoʻohui i kēia mau mea i package.json:

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

Loaʻa ka mana hope o ka noi holo ʻana ma:

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

Kiʻi no ka hopu ʻia

E hele kāua ma ke kaomi ʻana i ke pihi Hello.

Me ka hewa e puka mai ana penei:

Nānā:

ʻAʻole hiki ke maʻalahi kēia hōʻike bug, ʻO BRAVO.

Hoʻohālikelike o ka ʻike ʻole ʻia no nā hewa

Pēlā nō, e hele kākou ma ke kaomi pihi kikowaena.

Me ka hewa e puka mai ana penei:

ʻOi aku ka maikaʻi o ka mālama ʻana i nā hewa i helu ʻole ʻia (ka hoʻolilo ʻana)

Hoʻokomo i nā palena hewa

ʻAʻole pono ka hewa JavaScript ma kahi ʻāpana o ka mea hoʻohana e haki i ka noi holoʻokoʻa. No ka hoʻoponopono ʻana i kēia pilikia no nā mea hoʻohana React, hoʻolauna ʻo React 16 i kahi manaʻo hou i kapa ʻia "nā palena hewa".

ʻO nā palena hewa he mau ʻāpana React e hopu i nā hewa JavaScript ma nā wahi āpau o kā lākou kumu lāʻau keiki, e hoʻopaʻa i kēlā mau hewa, a hāʻawi i kahi fallback UI ma kahi o ka lāʻau ʻāpana i hāʻule. Loaʻa nā palena hewa i nā hewa i ka wā o ka hāʻawi ʻana, i nā ʻano hana ola, a me nā mea hana o ka lāʻau holoʻokoʻa ma lalo o lākou.

...

Hana hou no nā hewa i ʻike ʻole ʻia

He mea nui kēia hoʻololi. E like me React 16, nā hewa i loaʻa ʻole e kekahi palena hewa e hopena i ka pau ʻana o ka lāʻau ʻāpana React.

- Dan Abramov - Hana hewa i ka React 16

ʻO kahi wehewehe nui i lawe iaʻu i kekahi manawa ma mua o koʻu ʻike ʻana ʻo ia kēlā Ke hana wale nei ka hana i luna me nā hewa i hoʻolei ʻia i ke ʻano hana (a i ʻole ma kekahi o nā ʻano hana ola). No ka laʻana, ʻaʻole maikaʻi ka hoʻohana ʻana i nā palena hewa me kā mākou pihi kikowaena; aia kēia hewa i ka mea kaomi.

E hana mākou i kahi laʻana e hoʻolilo i ka hewa a laila e hoʻohana i nā palena hewa e hoʻoponopono maikaʻi i ka hewa.

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

Nānā:

Ke paʻi ʻoe i ke pihi, pane koke e hōʻike ʻia flag.busted.bogus, e hoʻopuka ana i kahi hewa
Me ka ʻole o ka palena kuhi hewa, e wehe ʻia ka lāʻau ʻāpana holoʻokoʻa

A laila kākau mākou i kā mākou helu palena hewa (hoʻohana i ke ʻano hana ola hou componentDidCatch); ʻO kēia ka laʻana i hāʻawi ʻia ma ka ʻatikala a 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;
  }
}

ʻO ka hope, hoʻohana mākou i kēia ʻāpana:

react-app/src/App.js

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

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

Eia naʻe, ke kaomi ʻana i ka pihi Render Error e hōʻike i ka fallback UI a hōʻike i kahi hewa iā Sentry.

Ka pauʻana

Manaʻo wau ua kōkua ʻoe i kēia.

PS loulou i ke kumu

Kūkākūkā ʻo PS Telegram ma o Sentry https://t.me/sentry_ru

Source: www.habr.com

Ke kiaʻi mamao ʻia ka nānā ʻana i nā pōpoki ma React frontend applications

Pākuʻi i ka manaʻo hoʻopuka ana pane