🥇Zdalny monitoring błędów Sentry w aplikacjach frontendowych React

Badamy użycie Sentry z React.

Ten artykuł jest częścią serii rozpoczynającej się od zgłaszania błędów Sentry na przykładzie: Часть 1.

Implementacja Reacta

Najpierw musimy dodać nowy projekt Sentry dla tej aplikacji; ze strony internetowej Sentry. W tym przypadku wybieramy Reaguj.

Ponownie zaimplementujemy nasze dwa przyciski, Hello i Error, w aplikacji z React. Zaczynamy od stworzenia naszej aplikacji startowej:

npx create-react-app react-app

Następnie importujemy pakiet Sentry:

yarn add @sentry/browser

i zainicjuj go:

reagują-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://303c04eac89844b5bfc908ceffc6757c@sentry.io/1289887',
    release: RELEASE,
  });
}
...

Obserwacje:

Podczas programowania mamy inne mechanizmy monitorowania problemów, takie jak konsola, dlatego włączamy Sentry tylko dla wersji produkcyjnych

Następnie implementujemy nasze przyciski Hello i Error i dodajemy je do aplikacji:

reagują-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);
    }
  }
}

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

reakcja-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 (mapy źródłowe)

Możemy przetestować Sentry na wersji produkcyjnej, wpisując:

yarn build

i z folderu kompilacji wpisz:

npx http-server -c-1

Problem, na który od razu natrafiamy, polega na tym, że rekordy błędów Sentry odnoszą się do numerów linii w zminimalizowanej partii; niezbyt przydatne.

Usługa Sentry wyjaśnia to, pobierając mapy źródłowe dla zredukowanego pakietu po otrzymaniu błędu. W tym przypadku uruchamiamy z localhost (niedostępnego dla usługi Sentry).

Rozwiązania (mapy źródłowe)

Rozwiązaniem tego problemu jest uruchomienie aplikacji z publicznego serwera WWW. Jeden prosty przycisk odpowiedzi, aby skorzystać z usługi GitHub Pages (bezpłatnie). Kroki, które należy wykonać, są zazwyczaj następujące:

Skopiuj zawartość folderu budować do folderu docs w katalogu głównym repozytorium.
Włączyć Strony GitHub w repozytorium (z GitHub), w którym chcesz używać folderu docs mistrz oddziały
Wypchnij zmiany do GitHuba

Operacja: po tym, jak zorientowałem się, czego muszę użyć utwórz-utwórz-aplikację funkcja strony głównej, aby uruchomić aplikację. Skończyło się na dodaniu następujących elementów do package.json:

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

Ostateczna wersja działającej aplikacji dostępna jest pod adresem:

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

Ilustracja złapanych błędów

Przejdźmy przez kliknięcie przycisku Witam.

Z błędem pojawiającym się w ten sposób:

Obserwacje:

Ten raport o błędzie nie może być jaśniejszy, BRAVO.

Ilustracja przedstawiająca nieuwzględnione błędy

Podobnie, przejdźmy do kliknięcia przycisku Błąd.

Z błędem pojawiającym się w ten sposób:

Lepsza obsługa nieuwzględnionych błędów (renderowanie)

Wprowadzenie granic błędów

Błąd JavaScript w części interfejsu użytkownika nie powinien psuć całej aplikacji. Aby rozwiązać ten problem dla użytkowników React, React 16 wprowadza nową koncepcję zwaną „ograniczeniami błędów”.

Granice błędów to komponenty React, które wychwytują błędy JavaScript w dowolnym miejscu drzewa komponentów podrzędnych, rejestrują te błędy i renderują zastępczy interfejs użytkownika zamiast drzewa komponentów, które uległo awarii. Granice błędów wychwytują błędy podczas renderowania, w metodach cyklu życia i w konstruktorach całego drzewa poniżej.

...

Nowe zachowanie w przypadku niewykrytych błędów

Ta zmiana jest znacząca. Począwszy od React 16, błędy, które nie zostały przechwycone przez żadną granicę błędu, spowodują odmontowanie całego drzewa komponentów React.

Do Dan Abramow – Obsługa błędów w React 16

Ważne wyjaśnienie, które zajęło mi trochę czasu, zanim zdałem sobie sprawę, że to jest to powyższe zachowanie działa tylko z błędami zgłoszonymi w metodzie renderowania (lub, co bardziej prawdopodobne, w dowolnej metodzie cyklu życia). Na przykład użycie granic błędu nie przyniosłoby żadnego pożytku w przypadku naszego przycisku Błąd; ten błąd występował w programie obsługi kliknięć.

Utwórzmy przykładowy błąd renderowania, a następnie użyjmy granic błędów, aby obsłużyć błąd w bardziej elegancki sposób.

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

Obserwacja:

Po naciśnięciu przycisku React zostanie wyświetlone flaga.przyłapana.fałszywa, co generuje błąd
Bez granicy błędu całe drzewo komponentów zostanie odmontowane

Następnie piszemy nasz kod granicy błędu (wykorzystuje nową metodę cyklu życia komponentDidCatch); jest to zasadniczo przykład podany w artykule Dana Abramova:

reagują-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;
  }
}

Na koniec używamy tego komponentu:

reakcja-app/src/App.js

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

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

Jednak kliknięcie przycisku Błąd renderowania wyświetla zastępczy interfejs użytkownika i zgłasza błąd Sentry.