🥇Απομακρυσμένη παρακολούθηση σφαλμάτων σε εφαρμογές React frontend

Εξερευνούμε χρησιμοποιώντας το Sentry με το React.

Αυτό το άρθρο είναι μέρος μιας σειράς που ξεκινά με την αναφορά σφαλμάτων Sentry χρησιμοποιώντας ένα παράδειγμα: Часть 1.

Εφαρμογή του React

Πρώτα πρέπει να προσθέσουμε ένα νέο έργο Sentry για αυτήν την εφαρμογή. από τον ιστότοπο Sentry. Σε αυτή την περίπτωση επιλέγουμε React.

Θα εφαρμόσουμε ξανά τα δύο κουμπιά μας, Hello και Error, σε μια εφαρμογή με το React. Ξεκινάμε δημιουργώντας την εφαρμογή εκκίνησης:

npx create-react-app react-app

Στη συνέχεια εισάγουμε το πακέτο Sentry:

yarn add @sentry/browser

και αρχικοποιήστε το:

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

Παρατηρήσεις:

Κατά τη διάρκεια της ανάπτυξης, έχουμε άλλους μηχανισμούς για την παρακολούθηση ζητημάτων, όπως η κονσόλα, επομένως ενεργοποιούμε μόνο το Sentry για εκδόσεις παραγωγής

Στη συνέχεια εφαρμόζουμε τα κουμπιά Hello και Error και τα προσθέτουμε στην εφαρμογή:

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;

Πρόβλημα (Χάρτες πηγής)

Μπορούμε να δοκιμάσουμε το Sentry με μια έκδοση παραγωγής εισάγοντας:

yarn build

και από το φάκελο build εισάγετε:

npx http-server -c-1

Το πρόβλημα που αντιμετωπίζουμε αμέσως είναι ότι οι εγγραφές σφαλμάτων του Sentry αναφέρονται σε αριθμούς γραμμών στην ελαχιστοποιημένη παρτίδα. όχι πολύ χρήσιμο.

Η υπηρεσία Sentry το εξηγεί αυτό τραβώντας τους χάρτες προέλευσης για το μειωμένο πακέτο μετά τη λήψη ενός σφάλματος. Σε αυτήν την περίπτωση τρέχουμε από localhost (δεν είναι προσβάσιμο από την υπηρεσία Sentry).

Λύσεις (Χάρτες Πηγών)

Η λύση σε αυτό το πρόβλημα είναι η εκτέλεση της εφαρμογής από έναν δημόσιο διακομιστή web. Ένα απλό κουμπί απάντησης για να χρησιμοποιήσετε την υπηρεσία GitHub Pages (δωρεάν). Τα βήματα που πρέπει να χρησιμοποιήσετε είναι συνήθως τα εξής:

Αντιγράψτε τα περιεχόμενα του φακέλου χτίζω σε ένα φάκελο docs στον ριζικό κατάλογο του αποθετηρίου.
Ανάβω Σελίδες GitHub στο αποθετήριο (από το GitHub) για να χρησιμοποιήσετε το φάκελο docs κύριος κλαδια δεντρου
Ωθήστε τις αλλαγές στο GitHub

Σημείωση: αφού κατάλαβα τι πρέπει να χρησιμοποιήσω δημιουργία-δημιουργία-εφαρμογή λειτουργία αρχικής σελίδας για την εκκίνηση της εφαρμογής. Κατέληξε στην προσθήκη των ακόλουθων στο package.json:

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

Η τελική έκδοση της εφαρμογής που εκτελείται είναι διαθέσιμη στη διεύθυνση:

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

Εικονογράφηση Πιασμένα σφάλματα

Ας προχωρήσουμε κάνοντας κλικ στο κουμπί Γεια.

Με ένα σφάλμα που εμφανίζεται ως εξής:

Παρατηρήσεις:

Αυτή η αναφορά σφάλματος δεν θα μπορούσε να είναι πιο ξεκάθαρη, BRAVO.

Απεικόνιση μη καταγεγραμμένων σφαλμάτων

Ομοίως, ας περάσουμε από το κλικ στο κουμπί Λάθος.

Με ένα σφάλμα που εμφανίζεται ως εξής:

Καλύτερος χειρισμός μη καταγεγραμμένων σφαλμάτων (απόδοση)

Εισαγωγή ορίων σφαλμάτων

Ένα σφάλμα JavaScript σε μέρος της διεπαφής χρήστη δεν πρέπει να σπάσει ολόκληρη την εφαρμογή. Για να λύσει αυτό το πρόβλημα για τους χρήστες του React, το React 16 εισάγει μια νέα έννοια που ονομάζεται "όρια σφάλματος".

Τα όρια σφαλμάτων είναι στοιχεία React που εντοπίζουν σφάλματα JavaScript οπουδήποτε στο θυγατρικό δέντρο συστατικών τους, καταγράφουν αυτά τα σφάλματα και αποδίδουν μια εναλλακτική διεπαφή χρήστη αντί για το δέντρο συστατικού στοιχείου που διακόπηκε. Τα όρια σφαλμάτων εντοπίζουν σφάλματα κατά την απόδοση, στις μεθόδους κύκλου ζωής και στους κατασκευαστές ολόκληρου του δέντρου κάτω από αυτά.

...

Νέα συμπεριφορά για μη εντοπισμένα σφάλματα

Αυτή η αλλαγή είναι σημαντική. Από το React 16, τα σφάλματα που δεν εντοπίστηκαν από κανένα όριο σφάλματος θα έχουν ως αποτέλεσμα την αποπροσάρτηση ολόκληρου του δέντρου στοιχείου React.

- Νταν Αμπράμοφ - Διαχείριση σφαλμάτων στο React 16

Μια σημαντική διευκρίνιση που μου πήρε λίγο πριν το καταλάβω είναι αυτή η παραπάνω συμπεριφορά λειτουργεί μόνο με σφάλματα που παρουσιάζονται στη μέθοδο απόδοσης (ή πιο πιθανό σε οποιαδήποτε από τις μεθόδους κύκλου ζωής). Για παράδειγμα, η χρήση ορίων σφάλματος δεν θα έκανε καλό με το κουμπί μας Λάθος; эта ошибка была в обработчике щелчка.

Ας δημιουργήσουμε ένα παράδειγμα σφάλματος απόδοσης και, στη συνέχεια, χρησιμοποιούμε όρια σφάλματος για να χειριστούμε το σφάλμα πιο χαριτωμένα.

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

Παρατήρηση:

Όταν πατάτε το κουμπί, Αντίδραση θα εμφανιστεί σημαία.σπασμένη.ψευδής, το οποίο δημιουργεί ένα σφάλμα
Χωρίς όριο σφάλματος, ολόκληρο το δέντρο του στοιχείου θα αποπροσαρτηθεί

Στη συνέχεια γράφουμε τον κωδικό ορίου σφάλματος (χρησιμοποιεί τη νέα μέθοδο κύκλου ζωής componentDidCatch) αυτό είναι ουσιαστικά το παράδειγμα που δίνεται στο άρθρο του 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;
  }
}

Τέλος χρησιμοποιούμε αυτό το στοιχείο:

react-app/src/App.js

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

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

Ωστόσο, κάνοντας κλικ στο κουμπί Σφάλμα απόδοσης εμφανίζεται η εναλλακτική διεπαφή χρήστη και αναφέρει ένα σφάλμα στο Sentry.

Ολοκλήρωση

Ελπίζω να το βρήκατε χρήσιμο.

PS Σύνδεσμος στο πρωτότυπο

PS Συνομιλία Telegram μέσω Sentry https://t.me/sentry_ru

Πηγή: www.habr.com

Απομακρυσμένη παρακολούθηση σφαλμάτων σε εφαρμογές React frontend

Προσθέστε ένα σχόλιο Ακύρωση απάντησης