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:
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.
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.
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;
}
}