🥇Monitorizarea de la distanță Sentry a erorilor în aplicațiile React frontend

Explorăm folosind Sentry cu React.

Acest articol face parte dintr-o serie care începe cu raportarea erorilor Sentry folosind un exemplu: Часть 1.

Implementarea React

Mai întâi trebuie să adăugăm un nou proiect Sentry pentru această aplicație; de pe site-ul Sentry. În acest caz alegem React.

Vom reimplementa cele două butoane ale noastre, Hello și Error, într-o aplicație cu React. Începem prin a crea aplicația noastră de pornire:

npx create-react-app react-app

Apoi importăm pachetul Sentry:

yarn add @sentry/browser

și inițializați-l:

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

Observații:

În timpul dezvoltării, avem alte mecanisme pentru monitorizarea problemelor, cum ar fi consola, așa că activăm Sentry doar pentru versiunile de producție

Apoi implementăm butoanele noastre Salutare și Eroare și le adăugăm în aplicație:

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;

Problemă (Hărți sursă)

Putem testa Sentry cu o versiune de producție introducând:

yarn build

iar din folderul de compilare introduceți:

npx http-server -c-1

Problema cu care ne confruntăm imediat este că înregistrările de eroare ale lui Sentry se referă la numerele de rând din lotul minimizat; nu foarte util.

Serviciul Sentry explică acest lucru prin extragerea hărților sursă pentru pachetul redus după ce a primit o eroare. În acest caz, rulăm de la localhost (nu este accesibil de către serviciul Sentry).

Soluții (Hărți sursă)

Soluția la această problemă este să rulați aplicația de pe un server web public. Un singur buton de răspuns pentru a utiliza serviciul GitHub Pages (gratuit). Pașii de utilizat sunt de obicei următorii:

Copiați conținutul folderului construi în dosar docs în directorul rădăcină al depozitului.
Aprinde Pagini GitHub în depozit (din GitHub) pentru a utiliza folderul documente în maestru ramuri
Împingeți modificările în GitHub

Nota: după ce mi-am dat seama ce trebuie să folosesc create-create-app funcția de pagină de pornire pentru a lansa aplicația. S-a rezumat la adăugarea următoarelor elemente la package.json:

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

Versiunea finală a aplicației care rulează este disponibilă la:

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

Ilustrație cu Caught Bugs

Să parcurgem făcând clic pe butonul Bună ziua.

Cu o eroare care apare astfel:

Observații:

Acest raport de eroare nu poate fi mai clar, BRAVO.

Ilustrație a erorilor nesocotite

La fel, să trecem prin clic pe butonul Eroare.

Cu o eroare care apare astfel:

Gestionarea mai bună a erorilor nesocotite (redare)

Introducerea limitelor de eroare

O eroare JavaScript în parte a interfeței cu utilizatorul nu ar trebui să distrugă întreaga aplicație. Pentru a rezolva această problemă pentru utilizatorii React, React 16 introduce un nou concept numit „limite de eroare”.

Limitele de eroare sunt componente React care captează erori JavaScript oriunde în arborele lor de componente secundare, înregistrează acele erori și redă o interfață de utilizare alternativă în loc de arborele de componente care s-a blocat. Limitele de eroare captează erori în timpul redării, în metodele ciclului de viață și în constructorii întregului arbore de sub ele.

...

Comportament nou pentru erori nedetectate

Această schimbare este semnificativă. Începând cu React 16, erorile care nu au fost surprinse de nicio limită de eroare vor duce la demontarea întregului arbore de componente React.

- Dan Abramov - Gestionarea erorilor în React 16

O clarificare importantă care mi-a luat ceva timp până să-mi dau seama de asta este aceea comportamentul de mai sus funcționează numai cu erori aruncate în metoda de randare (sau mai probabil în oricare dintre metodele ciclului de viață). De exemplu, folosirea limitelor de eroare nu ar fi de folos cu butonul nostru Eroare; această eroare a fost în gestionarea clicurilor.

Să creăm un exemplu de eroare de redare și apoi să folosim limite de eroare pentru a gestiona eroarea mai grațios.

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

Observare:

Când apăsați butonul, Reacţiona va fi afișat steagul.folosit.fals, care generează o eroare
Fără o limită de eroare, întregul arbore de componente va fi demontat

Apoi scriem codul de limită de eroare (folosește noua metodă ciclului de viață componentDidCatch); acesta este în esență exemplul dat în articolul lui 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;
  }
}

În cele din urmă folosim această componentă:

react-app/src/App.js

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

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

Cu toate acestea, făcând clic pe butonul Eroare de redare afișează interfața de utilizare alternativă și raportează o eroare către Sentry.

Completare

Sper că ați găsit acest lucru de ajutor.

PS Link către original

Chat PS Telegram prin Sentry https://t.me/sentry_ru

Sursa: www.habr.com

Monitorizarea de la distanță Sentry a erorilor în aplicațiile frontend React

Adauga un comentariu Anula răspuns