🥇Excubiae remota vigilantia bugs in React frontend applications

Vigiliae exploramus utendo cum React.

Hic articulus est pars seriei incipientis cum renuntiatione custodiae errorum utendo exemplo: Part 1.

Exsequendam React

Primum opus est novum projectorium vigilialem ad hanc applicationem addere; e loco excubiarum. In hoc casu eligimus React.

Duas bullas, Salve et Error, in applicatione cum React, restituemus. Incipimus per nostram applicationem starter creando:

npx create-react-app react-app

Deinde importat sarcina vigilem:

yarn add @sentry/browser

et initialize eam

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

Observationes:

In evolutione aliae machinae ad quaestiones vigilantiae, sicut ad solatium, habemus, ita solum vigilem ad productionem aedificandam dabimus.

Deinde ad effectum deducendi bullarum nostrorum Salve et Errorum eas applicando addimus:

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

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

Quaestio (Source Maps)

Temptare possumus uigilias cum productione aedificare intrando:

yarn build

et ex constructum folder intrant;

npx http-server -c-1

Problema quod statim incurrimus est errorum custodiae monumentorum ad lineam numeros in batch minificato referendam; non multum utile.

Officium Vigiliae hoc explicat trahendo tabulas fontis ad fasciculum reductum post errorem acceptum. In hoc casu currimus ab locali hospite (non adeunda per ministerium custodiae).

Solutiones (Source Maps)

Solutio huius problematis est applicationem e instrumento publici instrumenti interretiarii currere. Unum bullam responsionis simplicis ad usum Paginae GitHub (gratis). Gradus uti solent hoc modo;

Effingo contenta folder ædificem ut folder Docs in directorio radicis repositorii.
Illuminationes Paginae GitHub in eclesiae reposito (a GitHub) ut folder in soUicitudo dominus rami
Dis GitHub mutat est

illud: Post figuratum quid opus est uti creare-creare-app * munus paginam paginam applicationis ad launch. Descendit ad sarcina.json addendo sequentia:

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

Ultima versio currentis applicationis praesto est ad:

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

Illustration of Capti Bugs

Ambulamus per clicking Salve deprimendo.

Cum errore sic:

Observationes:

Haec fama cimex clarius esse non potuit; EU.

Illustration of Unaccounted Error

Item, eamus per globum strepita Error.

Cum errore sic:

Melior tractatio errorum unaccounted (reddendo)

Introductio Error limitum

A JavaScript error in parte interfaciei utentis totam applicationem frangere non debet. Ad hanc quaestionem solvendam pro usoribus React, React 16 novam notionem inducit quae "erroris terminis" dicitur.

Error terminationes sunt React components, qui JavaScript errores capiunt usquam in arbore sua componentia, illos errores logant, et fallback UI reddunt loco componentis arborem ingruentem. Errores limites capiunt errores in reddendo, in methodis vivendi, et in fabricatoribus totius arboris infra eos.

...

Novos mores ad latent errores

Haec mutatio significans. As of React 16, Errores qui ab aliquo errore non capiuntur limite provenient in tota arbore React componentes transcendentes.

- Dan Abramov - Error Tractantem in React XVI "

Magni momenti declaratio quae me paulo ante intellexi haec est qui mores praedictos nonnisi cum erroribus obiectos in modum reddunt (vel potius in quavis methodi vivendi ratione) operatur.. Exempli causa, errorum circumscriptiones utens, cum nostris bullis nihil boni facere noluerunt Error; hic error erat in tracto click.

Errorem reddens exemplum faciamus et erroris terminis utamur, ut errori venustius tractemus.

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

observatio:

Cum premere puga pugnat et proponendum flag.busted.bogusquae errorem generat
Sine termino errato, tota arbor componentis erit incendi

Deinde scribemus in nostro codice errorum terminus (nova methodus lifecycle utitur componentDidCatch); hoc est essentialiter exemplum in 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;
  }
}

Tandem hac componente utimur:

agere-app/src/App.js

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

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

Sed strepitando Redde Error button ostentat fallback UI et errorem ad Sentry refert.

completionem

Spero te hoc utile condere.

PS Link to original

PS Curabitur Telegram per custodiam https://t.me/sentry_ru

Source: www.habr.com

Vigiliarum remota magna cimices in React frontend applications

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