🥇Sabis na nesa na kwari a cikin aikace-aikacen React frontend

Muna bincike ta amfani da Sentry tare da React.

Wannan labarin wani yanki ne na jerin da ke farawa tare da ba da rahoton kurakuran Sentry ta amfani da misali: Sashe na 1.

Aiwatar da React

Da farko muna buƙatar ƙara sabon aikin Sentry don wannan aikace-aikacen; daga gidan yanar gizon Sentry. A wannan yanayin mun zaɓi React.

Za mu sake aiwatar da maɓallan mu guda biyu, Hello da Kuskure, a cikin aikace-aikacen da React. Za mu fara da ƙirƙirar aikace-aikacen farawa:

npx create-react-app react-app

Sannan muna shigo da kunshin Sentry:

yarn add @sentry/browser

kuma fara shi:

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

Dubawa:

Yayin haɓakawa, muna da wasu hanyoyin don sa ido kan lamuran, kamar na'urar wasan bidiyo, don haka muna ba da damar Sentry kawai don haɓaka samarwa

Bayan haka muna aiwatar da maɓallanmu na Hello and Error kuma mu ƙara su cikin aikace-aikacen:

amsa-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');
  }
}

amsa-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;

Matsala (Taswirorin Tushen)

Za mu iya gwada Sentry tare da ginin samarwa ta shiga:

yarn build

kuma daga babban fayil ɗin ginawa shigar:

npx http-server -c-1

Matsalar da muka shiga nan da nan ita ce bayanan kuskuren Sentry suna nufin lambobin layi a cikin ƙaramin tsari; ba da amfani sosai.

Sabis na Sentry yana bayanin hakan ta hanyar jawo taswirorin tushe don fakitin da aka rage bayan samun kuskure. A wannan yanayin muna gudana daga localhost (sabis na Sentry ba zai iya isa ba).

Magani (Taswirorin Tushen)

Maganin wannan matsala shine gudanar da aikace-aikacen daga sabar gidan yanar gizon jama'a. Maɓallin amsawa ɗaya mai sauƙi don amfani da sabis ɗin Shafukan GitHub (kyauta). Matakan da ake amfani da su yawanci kamar haka ne:

Kwafi abin da ke cikin babban fayil ɗin gina zuwa babban fayil Docs a cikin tushen directory na ma'ajiyar.
Kunna Shafukan GitHub a cikin wurin ajiya (daga GitHub) don amfani da babban fayil ɗin docs a ciki master rassan
Tura canje-canje zuwa GitHub

Примечание: bayan na gano abin da nake bukata don amfani ƙirƙira-ƙirƙira-app aikin shafin gida don ƙaddamar da aikace-aikacen. Ya sauko don ƙara abubuwan zuwa package.json:

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

Ana samun sigar ƙarshe ta aikace-aikacen da ke gudana a:

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

Misalin Kwayoyin Da Aka Kama

Mu shiga ta danna maballin Sannu.

Tare da kuskuren bayyana kamar haka:

Dubawa:

Wannan rahoton kwaro ba zai iya fitowa fili ba, SANNU DA AIKATAWA.

Misalin Kurakurai da Ba a Gano Ba

Hakanan, bari mu shiga ta hanyar danna maballin Kuskuren.

Tare da kuskuren bayyana kamar haka:

Ingantacciyar kulawa da kurakurai da ba a lissafa ba (masu fassara)

Gabatarwar Iyakokin Kuskure

Kuskuren JavaScript a cikin ɓangaren mai amfani bai kamata ya karya dukkan aikace-aikacen ba. Don magance wannan matsala ga masu amfani da React, React 16 ya gabatar da sabon ra'ayi mai suna "manyan kuskure".

Iyakokin Kuskure sune abubuwan da ke kama kurakuran JavaScript a ko'ina cikin bishiyar ɓangaren yaran su, shigar da waɗannan kurakuran, sannan su mayar da UI mai faɗuwa maimakon bishiyar da ta faɗo. Iyakokin kurakurai suna kama kurakurai yayin aiwatarwa, a cikin hanyoyin rayuwa, da kuma masu ginin bishiyar da ke ƙarƙashinsu.

...

Sabbin halaye don kurakurai da ba a gano su ba

Wannan canji yana da mahimmanci. Tun daga React 16, kurakuran da ba a kama su ta kowace iyakokin kuskure ba za su haifar da cire duk bishiyar React ɗin gaba ɗaya.

- Dan Abramov - Kuskuren Gudanarwa a React 16

Wani muhimmin bayani da ya ɗauki ni ɗan lokaci kafin in gane wannan shi ne Halin da ke sama yana aiki ne kawai tare da kurakurai da aka jefa a cikin hanyar samarwa (ko mafi kusantar a cikin kowane hanyoyin rayuwa). Misali, yin amfani da iyakoki na kuskure ba zai yi kyau ba tare da maɓallin mu Kuskuren; wannan kuskuren ya kasance a cikin mai kula da dannawa.

Bari mu ƙirƙiri kuskuren yin misali sannan mu yi amfani da iyakoki na kuskure don ɗaukar kuskuren da kyau.

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

Lura:

Idan ka danna maballin, Sake amsa za a nuna tuta.busted.bogu, wanda ke haifar da kuskure
Ba tare da iyakar kuskure ba, za a cire dukkan bishiyar kayan aikin

Sannan mu rubuta lambar iyakar kuskurenmu (yana amfani da sabuwar hanyar hawan rayuwa bangarenDidCatch); Wannan shi ne ainihin misalin da aka bayar a labarin 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;
  }
}

Daga karshe muna amfani da wannan bangaren:

amsa-app/src/App.js

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

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

Koyaya, danna maɓallin Sake Kuskuren yana nuna UI na baya kuma yana ba da rahoton kuskure ga Sentry.

Ƙarshe

Ina fatan kun sami wannan taimako.

PS Hanyar haɗi zuwa asali

PS Telegram hira ta hanyar Sentry https://t.me/sentry_ru

source: www.habr.com

Sentry m saka idanu na kwari a cikin React frontend aikace-aikace

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