Beim Erstellen von Anwendungen sind Fehler unvermeidlich. Sie können von APIs, der Benutzeroberfläche oder von mehreren anderen Orten stammen.
Es ist sehr wichtig, mit diesen Fehlern ordnungsgemäß umzugehen und trotz dieser Fehler eine gute UX aufrechtzuerhalten.
Error Boundary ist eine solche Möglichkeit der Fehlerbehandlung in React.
Um dies zu verstehen, wollen wir die Situation vor der Einführung der Fehlergrenze verstehen.
Vor Error Boundaries haben sich die in Komponenten auftretenden Fehler schließlich ausgebreitet und die Benutzeroberfläche beschädigt oder den weißen Bildschirm gerendert.
Dies hat zu einer wirklich schlechten UX geführt.
Error Boundary hilft uns, mit solchen Fehlern umzugehen und eine Fallback-Benutzeroberfläche anzuzeigen, anstatt die Benutzeroberfläche zu beschädigen oder einen weißen Bildschirm anzuzeigen.
React v16 hat die Fehlergrenze offiziell eingeführt.
Es handelt sich um eine klassenbasierte Komponente, die zum Verpacken Ihrer Anwendung verwendet werden kann.
Es akzeptiert die Anzeige einer Fallback-Benutzeroberfläche für den Fall, dass Ihre Anwendung Fehler aufweist oder aus anderen Gründen. Es rendert einfach die untergeordnete Komponente, um den normalen Ablauf Ihrer Anwendung fortzusetzen.
So empfiehlt die React-Dokumentation die Verwendung,
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // Update state so the next render will show the fallback UI. return { hasError: true }; } componentDidCatch(error, info) { // Example "componentStack": // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logErrorToMyService(error, info.componentStack); } render() { if (this.state.hasError) { // You can render any custom fallback UI return this.props.fallback; } return this.props.children; } }
Fehler, die in auftreten, können nicht erkannt werden,
Es gibt ein npm-Paket namens „react-error-boundary“, das ein Wrapper über der traditionellen Error Boundary-Komponente ist.
Mit diesem Paket sind wir in der Lage, alle Probleme zu überwinden, mit denen die traditionelle Fehlergrenzenkomponente konfrontiert ist.
Sie können Ihre gesamte Anwendung mit umschließen oder einzelne Komponenten mit .
umschließenDie Granularität der Umsetzung liegt bei Ihnen.
Lassen Sie uns verstehen, wie man es verwendet.
import React from 'react'; import { ErrorBoundary } from "react-error-boundary"; const App = () => { return Something went wrong Dies ist das einfachste Beispiel für die Verwendung von ErrorBoundary. Es gibt noch mehr in dieser Bibliothek.
Versuchen wir, die API in verschiedenen Szenarien zu verstehen.
1. Ich möchte eine generische Fallback-Benutzeroberfläche für Fehler in der Anwendung anzeigen
import React from 'react'; import { ErrorBoundary } from "react-error-boundary"; const App = () => { return Something went wrong 2. Ich möchte spezifische Fehlerdetails in meiner Fallback-Komponente anzeigen
import React from 'react'; import { ErrorBoundary } from "react-error-boundary"; function fallbackRender({ error, resetErrorBoundary }) { // Call resetErrorBoundary() to reset the error boundary and retry the render. return ( Something went wrong:
{error.message}
); } const App = () => { return
{ // Reset the state of your app so the error doesn't happen again }} > /* rest of your component */
}
Nach dem Login kopieren
Anstelle von Fallback oder FallbackRender können Sie auch eine React-Komponente verwenden.
import React from 'react'; import { ErrorBoundary } from "react-error-boundary"; const Fallback = ({ error, resetErrorBoundary }) => { // Call resetErrorBoundary() to reset the error boundary and retry the render. return ( Something went wrong:
{error.message}
); } const App = () => { return
{ // Reset the state of your app so the error doesn't happen again }} > /* rest of your component */
}
Nach dem Login kopieren
3. Ich möchte meine Fehler protokollieren
import React from 'react'; import { ErrorBoundary } from "react-error-boundary"; const logError = (error: Error, info: { componentStack: string }) => { // Do something with the error, e.g. log to an external API }; const Fallback = ({ error, resetErrorBoundary }) => { // Call resetErrorBoundary() to reset the error boundary and retry the render. return ( Something went wrong:
{error.message}
); } // You can use fallback / fallbackRender / FallbackComponent anything const App = () => { return
{ // Reset the state of your app so the error doesn't happen again }} > /* rest of your component */
}
Nach dem Login kopieren
4. Ich möchte Fehler in Event-Handlern und asynchronem Code abfangen
import { useErrorBoundary } from "react-error-boundary"; function Example() { const { showBoundary } = useErrorBoundary(); const getGreeting = async(name) => { try { const response = await fetchGreeting(name); // rest of your code } catch(error){ // Show error boundary showBoundary(error); } } useEffect(() => { getGreeting() }); return
ErrorBoundary ist eine Client-Komponente. Sie können ihm nur Requisiten übergeben, die serialisierbar sind, oder es in Dateien verwenden, die über einen „Use-Client“ verfügen. Richtlinie.
1. Was ist eine serialisierbare Requisite?
Serilzierbare Requisite bedeutet, dass sie so in einen Byte-Stream konvertiert werden kann, dass der Byte-Stream wieder in die ursprüngliche Requisite konvertiert werden kann.
Eine gängige Möglichkeit, dies in Javascript zu tun, ist JSON.stringify() und JSON.parse().
2. So verwenden Sie „Client verwenden“; Richtlinie?
Erwähnen Sie es einfach oben in der Datei
"use client";
Es gibt noch ein paar weitere Variationen, die Sie verwenden können. Aber dieser Artikel ist gut genug, um Ihnen den Einstieg zu erleichtern.
Sehen Sie sich hier die vollständige Dokumentation an.
Bitte lassen Sie mich in den Kommentaren wissen, ob Sie es hilfreich fanden.
Viel Spaß beim Codieren!
Das obige ist der detaillierte Inhalt vonFehlergrenzen in React beherrschen: Ein Leitfaden zur effektiven Fehlerbehandlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Was bedeutet Apache?
Verwendung anhängen
Ist Yiouoky eine legale Software?
So verwenden Sie die Konvertierungsfunktion „Konvertieren'.
Der Unterschied zwischen Arbeitsmappe und Arbeitsblatt
Was sind private Clouds?
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
Einführung in die Arten von Schweißmethoden
