🥇Ukuqapha okukude kweziphazamisi kuzinhlelo zokusebenza ze-React frontend

Sihlola sisebenzisa i-Sentry with React.

Lesi sihloko siyingxenye yochungechunge oluqala ngokubika amaphutha e-Sentry usebenzisa isibonelo: Ingxenye ye-1.

Ukuqaliswa kwe-React

Okokuqala sidinga ukungeza iphrojekthi entsha ye-Sentry yalolu hlelo lokusebenza; kusuka kuwebhusayithi ye-Sentry. Kulokhu sikhetha React.

Sizophinda sisebenzise izinkinobho zethu ezimbili, ethi Hello and Error, kuhlelo lokusebenza ne-React. Siqala ngokwakha uhlelo lwethu lokuqala:

npx create-react-app react-app

Bese singenisa iphakheji ye-Sentry:

yarn add @sentry/browser

futhi uyiqalise:

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

Okuphawuliwe:

Ngesikhathi sokuthuthukiswa, sinezinye izindlela zokuqapha izinkinga, njenge-console, ngakho-ke sinika amandla i-Sentry kuphela ekwakheni ukukhiqiza.

Okulandelayo sisebenzisa izinkinobho zethu ze-Hello ne-Error futhi sizifake kuhlelo lokusebenza:

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;

Inkinga (Amamephu Omthombo)

Singahlola i-Sentry ngesakhiwo sokukhiqiza ngokufaka:

yarn build

futhi kusuka kufolda yokwakha faka:

npx http-server -c-1

Inkinga esingena kuyo ngokushesha ukuthi amarekhodi amaphutha e-Sentry abhekisela kuzinombolo zomugqa ku-batch minified; alusizo kakhulu.

Isevisi ye-Sentry ichaza lokhu ngokudonsa amamephu omthombo wephakethe elincishisiwe ngemuva kokuthola iphutha. Kulokhu sisebenzisa i-localhost (ayifinyeleleki isevisi ye-Sentry).

Izixazululo (Amamephu Omthombo)

Isixazululo sale nkinga ukusebenzisa uhlelo kusuka kuseva yewebhu yomphakathi. Inkinobho eyodwa yokuphendula elula yokusebenzisa insiza ye-GitHub Pages (mahhala). Izinyathelo okufanele zisetshenziswe ngokuvamile zimi kanje:

Kopisha okuqukethwe kwefolda ukwakha kufolda amadokhumenti kumkhombandlela wempande wendawo yokugcina.
Vula Amakhasi we-GitHub endaweni yokugcina (kusuka ku-GitHub) ukuze usebenzise ifolda yamadokhumenti ku master amagatsha
Phusha izinguquko ku-GitHub

Ukubhala: ngemuva kokuthi ngithole ukuthi yini okufanele ngiyisebenzise dala-dala-uhlelo lokusebenza Umsebenzi wekhasi lasekhaya ukuze uqalise uhlelo lokusebenza. Yehle ukuze yengeze okulandelayo ku-package.json:

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

Inguqulo yokugcina yohlelo lokusebenza olusebenzayo iyatholakala kokuthi:

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

Umfanekiso Wezimbungulu Ezibanjwe

Asihambe ngokuchofoza inkinobho ethi Sawubona.

Ngephutha elivela kanje:

Okuphawuliwe:

Lo mbiko wesiphazamisi awukwazanga ukucaca kangcono, IBRAVO.

Umfanekiso Wamaphutha Angabonakali

Ngokufanayo, ake sidlule ngokuchofoza inkinobho Iphutha.

Ngephutha elivela kanje:

Ukuphathwa okungcono kwamaphutha angabonakali (ukunikeza)

Ukwethulwa Kwemikhawulo Yephutha

Iphutha le-JavaScript engxenyeni yokusetshenziswa kubonwa akumele liphule lonke uhlelo lokusebenza. Ukuxazulula le nkinga kubasebenzisi be-React, i-React 16 yethula umqondo omusha obizwa ngokuthi "imingcele yephutha".

Imingcele yephutha izingxenye ze-React ezibamba amaphutha e-JavaScript noma yikuphi esihlahleni sengxenye yengane yazo, faka lawo maphutha, futhi inikeze i-UI yokubuyela emuva esikhundleni sengxenye yesihlahla esiphahlazekile. Imingcele yamaphutha ibamba amaphutha ngesikhathi sokunikezela, ezindleleni zomjikelezo wokuphila, nakubakhi baso sonke isihlahla esingaphansi kwayo.

...

Ukuziphatha okusha kwamaphutha angabonwa

Lolu shintsho lubalulekile. Kusukela ku-React 16, amaphutha angazange abanjwe yinoma yimuphi umngcele wephutha azoholela ekususweni kwesihlahla sonke sengxenye ye-React.

- UDan Abramov - Ukuphatha Iphutha ku-React 16

Ukucaciswa okubalulekile okungithathe isikhathi ngaphambi kokuthi ngibone lokhu ukuthi ukuziphatha okungenhla kusebenza kuphela namaphutha aphonswe endleleni yokunikezela (noma cishe kunoma iyiphi yezindlela zomjikelezo wempilo). Isibonelo, ukusebenzisa imingcele yephutha ngeke kusize ngalutho ngenkinobho yethu Iphutha; leli phutha belikusibambi sokuchofoza.

Masidale isibonelo sephutha lokunikeza bese sisebenzise imingcele yamaphutha ukuze sisingathe iphutha ngomusa kakhudlwana.

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

Ukuqaphela:

Uma ucindezela inkinobho, Yenza izovezwa iflag.busted.mbumbulu, okudala iphutha
Ngaphandle komngcele wephutha, sonke isihlahla sengxenye sizokwehliswa

Bese sibhala ikhodi yethu yomngcele wephutha (isebenzisa indlela entsha yomjikelezo wempilo ingxenyeDidCatch); Lesi isibonelo esinikezwe esihlokweni sikaDan 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;
  }
}

Ekugcineni sisebenzisa le ngxenye:

react-app/src/App.js

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

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

Nokho, ukuchofoza inkinobho ye-Render Error kubonisa i-UI yokubuyela emuva futhi kubika iphutha ku-Sentry.

Ukuqedela

Ngethemba ukuthi uthole lokhu kuwusizo.

PS Xhuma kokwangempela

Ingxoxo ye-PS Telegraph nge-Sentry https://t.me/sentry_ru

Source: www.habr.com

Ukuqapha okukude kwabathumeli kweziphazamisi kuzinhlelo zokusebenza ze-React frontend

Engeza amazwana Отменить ответ