🥇Tuhia te aro turuki mamao o nga pepeha i roto i nga tono React frontend

Kei te tirotiro matou ma te whakamahi i te Sentry me te React.

Ko tenei tuhinga tetahi waahanga o te raupapa ka timata ma te tuku korero i nga hapa a Sentry ma te whakamahi i tetahi tauira: Wāhanga 1.

Te whakatinanatanga o React

Tuatahi me taapiri he kaupapa Sentry hou mo tenei tono; mai i te paetukutuku Sentry. I tenei keehi ka tohua e matou te React.

Ka whakatinana ano i a maatau patene e rua, Kia Ora me te Hapa, i roto i te tono me te React. Ka tiimata ma te hanga i ta maatau tono tiimata:

npx create-react-app react-app

Na ka kawemai i te kete Sentry:

yarn add @sentry/browser

ka arawhiti:

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

Mātakitanga:

I te wa o te whakawhanaketanga, kei a matou etahi atu tikanga mo te aro turuki i nga take, penei i te papatohu, na reira ka taea e matou te mahi a Sentry mo te hanga hangahanga.

I muri mai ka whakatinanahia e maatau nga paatene Hello me te Hapa ka taapiri atu ki te tono:

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;

Raruraru (Mahere Puna)

Ka taea e taatau te whakamatautau i a Sentry me te hanga hanga ma te whakauru:

yarn build

a mai i te kōpaki hanga tomo:

npx http-server -c-1

Ko te raru ka pa ki a matou ko nga rekoata hapa a Sentry e tohu ana ki nga nama raina i roto i te puranga iti; e kore e tino whai hua.

Ka whakamaramatia e te ratonga Sentry tenei ma te toia nga mapi puna mo te paatete kua iti ake i muri i te whiwhi hapa. I tenei keehi kei te rere matou mai i te localhost (kaore e uru ki te ratonga Sentry).

Rongoa (Mahere Puna)

Ko te otinga ki tenei raru ko te whakahaere i te tono mai i tetahi tuunga paetukutuku whanui. Kotahi te paatene whakautu ngawari hei whakamahi i te ratonga Whārangi GitHub (kore utu). Ko nga taahiraa hei whakamahi ko te tikanga e whai ake nei:

Tāruatia ngā ihirangi o te kōpaki hanga ki te kōpaki tuhinga i roto i te whaiaronga pakiaka o te putunga.
Tahuri Wharangi GitHub i roto i te putunga (mai i GitHub) hei whakamahi i te kōpaki tuhinga kei roto ariki manga
Pana huringa ki GitHub

parau: i muri i taku mohio he aha taku hei whakamahi hanga-hanga-taupānga mahi whārangi kāinga ki te whakarewa i te tono. I heke iho ki te taapiri i nga mea e whai ake nei ki te package.json:

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

Kei te waatea te putanga whakamutunga o te tono whakahaere i:

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

Whakaahua o nga Ngarara kua mau

Kia hikoi tatou ma te panui i te paatene Hello.

Me te hapa ka puta penei:

Mātakitanga:

Ko tenei purongo pepeha kaore i marama ake, Tuhinga o mua.

Whakaahua o Nga Hapa Kaore i Kaute

Waihoki, kia haere tatou i roto i te patene paatene hapa.

Me te hapa ka puta penei:

He pai ake te whakahaere i nga hapa kore kaute (whakaahua)

Te Whakataki i nga Tepe Hapa

Ko te hapa JavaScript i tetahi waahanga o te atanga kaiwhakamahi kaua e pakaru te tono katoa. Hei whakaoti i tenei raruraru mo nga kaiwhakamahi React, ka tukuna e React 16 tetahi ariā hou e kiia nei ko "nga rohe hapa".

Ko nga rohe hapa ko nga waahanga React e hopu ana i nga hapa JavaScript ki nga waahi katoa i roto i te rakau waahanga tamariki, tuhia aua hapa, ka whakaputa i te UI takahuri hei utu mo te rakau waahanga i pakaru. Ko nga rohe hapa ka mau i nga hapa i te wa e whakaputa ana, i nga tikanga huringa ora, me nga kaihanga o te rakau katoa kei raro iho.

...

Te whanonga hou mo nga hapa kaore i kitea

He mea nui tenei huringa. Mai i te React 16, ko nga hapa karekau i mau i tetahi rohe hapa ka kore e mau te katoa o te rakau waahanga React.

- Dan Abramov - Hapa te whakahaere i te React 16

He whakamarama nui i roa i mua i taku mohio ko tenei Ko te whanonga i runga ake nei ka mahi noa me nga hapa ka maka ki te tikanga tuku (he nui ake ranei i roto i tetahi o nga tikanga huringa ora). Hei tauira, ko te whakamahi i nga rohe hapa kaore e pai ki a maatau paatene hapa; ko tenei hapa i roto i te kaihautu paato.

Me hanga he tauira tahuahua hapa katahi ka whakamahi i nga rohe hapa kia pai ake te whakahaere i te hapa.

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

Tirohanga:

Ka pehi koe i te paatene, tauhohe ka whakaatuhia flag.busted.bogus, ka puta he hapa
Ki te kore he rohenga hapa, ka wetekina te rakau katoa

Na ka tuhia e matou ta matou waehere rohe hapa (ka whakamahi i te tikanga huringa ora hou componentDidCatch); Koinei te tauira i homai i roto i te tuhinga 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;
  }
}

Ka mutu ka whakamahia e matou tenei waahanga:

react-app/src/App.js

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

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

Heoi, ma te panui i te paatene Render Error e whakaatu ana i te UI takahuri me te ripoata he hapa ki a Sentry.

Whakaoti

Ko taku tumanako i kitea e koe he awhina tenei.

PS Hononga ki te taketake

Ko te korero a PS Telegram ma te Sentry https://t.me/sentry_ru

Source: will.com

Te aro turuki mamao o nga pepeke i roto i nga tono React frontend

Tāpiri i te kōrero whakakore whakautu