M

MLOG

Svenska

Bemästra React Felgränser för att bygga motståndskraftiga och användarvänliga applikationer. Lär dig bästa praxis, implementeringstekniker och avancerade strategier för felhantering.

React Felgränser: Metoder för elegant felhantering för robusta applikationer

I den dynamiska världen av webbutveckling är det av största vikt att skapa robusta och användarvänliga applikationer. React, ett populärt JavaScript-bibliotek för att bygga användargränssnitt, tillhandahåller en kraftfull mekanism för att hantera fel på ett elegant sätt: Felgränser. Den här omfattande guiden fördjupar sig i konceptet Felgränser och utforskar deras syfte, implementering och bästa praxis för att bygga motståndskraftiga React-applikationer.

Förstå behovet av felgränser

React-komponenter, liksom all kod, är mottagliga för fel. Dessa fel kan härröra från olika källor, inklusive:

Utan korrekt felhantering kan ett fel i en React-komponent krascha hela applikationen, vilket resulterar i en dålig användarupplevelse. Felgränser ger ett sätt att fånga dessa fel och förhindra att de sprids uppåt i komponentträdet, vilket säkerställer att applikationen förblir funktionell även när enskilda komponenter misslyckas.

Vad är React Felgränser?

Felgränser är React-komponenter som fångar JavaScript-fel var som helst i deras underordnade komponentträd, loggar dessa fel och visar ett reserv-UI istället för det komponentträd som kraschade. De fungerar som ett säkerhetsnät och förhindrar att fel kraschar hela applikationen.

Viktiga egenskaper för felgränser:

Implementera felgränser

Låt oss gå igenom processen att skapa en grundläggande felgränskomponent:

1. Skapa felgränskomponenten

Skapa först en ny klasskomponent, till exempel med namnet ErrorBoundary:


import React from 'react';

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, errorInfo) {
    // You can also log the error to an error reporting service
    console.error("Caught error: ", error, errorInfo);
    // Example: logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div>
          <h2>Something went wrong.</h2>
          <details style={{ whiteSpace: 'pre-wrap' }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </div>
      );
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Förklaring:

2. Använda felgränsen

För att använda felgränsen, linda helt enkelt in vilken komponent som helst som kan kasta ett fel med ErrorBoundary-komponenten:


import ErrorBoundary from './ErrorBoundary';

function MyComponent() {
  // This component might throw an error
  return (
    <ErrorBoundary>
      <PotentiallyBreakingComponent />
    </ErrorBoundary>
  );
}

export default MyComponent;

Om PotentiallyBreakingComponent kastar ett fel, kommer ErrorBoundary att fånga det, logga felet och återge reserv-UI:t.

3. Illustrativa exempel med global kontext

Tänk dig en e-handelsapplikation som visar produktinformation som hämtats från en fjärrserver. En komponent, ProductDisplay, ansvarar för att återge produktinformation. Servern kan dock ibland returnera oväntade data, vilket leder till renderingsfel.


// ProductDisplay.js
import React from 'react';

function ProductDisplay({ product }) {
  // Simulate a potential error if product.price is not a number
  if (typeof product.price !== 'number') {
    throw new Error('Invalid product price');
  }

  return (
    <div>
      <h2>{product.name}</h2>
      <p>Price: {product.price}</p>
      <img src={product.imageUrl} alt={product.name} />
    </div>
  );
}

export default ProductDisplay;

För att skydda mot sådana fel, linda in ProductDisplay-komponenten med en ErrorBoundary:


// App.js
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import ProductDisplay from './ProductDisplay';

function App() {
  const product = {
    name: 'Example Product',
    price: 'Not a Number', // Intentionally incorrect data
    imageUrl: 'https://example.com/image.jpg'
  };

  return (
    <div>
      <ErrorBoundary>
        <ProductDisplay product={product} />
      </ErrorBoundary>
    </div>
  );
}

export default App;

I det här scenariot, eftersom product.price avsiktligt är inställt på en sträng istället för ett nummer, kommer ProductDisplay-komponenten att kasta ett fel. ErrorBoundary kommer att fånga detta fel, vilket förhindrar att hela applikationen kraschar, och visa reserv-UI:t istället för den trasiga ProductDisplay-komponenten.

4. Felgränser i internationaliserade applikationer

När du bygger applikationer för en global publik bör felmeddelanden lokaliseras för att ge en bättre användarupplevelse. Felgränser kan användas tillsammans med internationaliseringsbibliotek (i18n) för att visa översatta felmeddelanden.


// ErrorBoundary.js (with i18n support)
import React from 'react';
import { useTranslation } from 'react-i18next'; // Assuming you're using react-i18next

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
      error: error,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
    this.setState({errorInfo: errorInfo});
  }

  render() {
    if (this.state.hasError) {
      return (
        <FallbackUI error={this.state.error} errorInfo={this.state.errorInfo}/>
      );
    }

    return this.props.children;
  }
}

const FallbackUI = ({error, errorInfo}) => {
  const { t } = useTranslation();

  return (
    <div>
      <h2>{t('error.title')}</h2>
      <p>{t('error.message')}</p>
      <details style={{ whiteSpace: 'pre-wrap' }}>
        {error && error.toString()}<br />
        {errorInfo?.componentStack}
      </details>
    </div>
  );
}


export default ErrorBoundary;

I det här exemplet använder vi react-i18next för att översätta feltiteln och meddelandet i reserv-UI:t. Funktionerna t('error.title') och t('error.message') hämtar lämpliga översättningar baserat på användarens valda språk.

5. Överväganden för Serverside Rendering (SSR)

När du använder felgränser i serverside-renderade applikationer är det avgörande att hantera fel på lämpligt sätt för att förhindra att servern kraschar. Reacts dokumentation rekommenderar att du undviker att använda felgränser för att återhämta dig från renderingsfel på servern. Hantera istället fel innan du återger komponenten eller återger en statisk felsida på servern.

Bästa praxis för att använda felgränser

Avancerade strategier för felhantering

1. Försöksmekanismer

I vissa fall kan det vara möjligt att återhämta sig från ett fel genom att försöka igen med den operation som orsakade det. Om till exempel en nätverksförfrågan misslyckas kan du försöka igen efter en kort fördröjning. Felgränser kan kombineras med försöksmekanismer för att ge en mer motståndskraftig användarupplevelse.


// ErrorBoundaryWithRetry.js
import React from 'react';

class ErrorBoundaryWithRetry extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false,
      retryCount: 0,
    };
  }

  static getDerivedStateFromError(error) {
    return {
      hasError: true,
    };
  }

  componentDidCatch(error, errorInfo) {
    console.error("Caught error: ", error, errorInfo);
  }

  handleRetry = () => {
    this.setState(prevState => ({
      hasError: false,
      retryCount: prevState.retryCount + 1,
    }), () => {
      // This forces the component to re-render.  Consider better patterns with controlled props.
      this.forceUpdate(); // WARNING: Use with caution
      if (this.props.onRetry) {
          this.props.onRetry();
      }
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h2>Something went wrong.</h2>
          <button onClick={this.handleRetry}>Retry</button>
        </div>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundaryWithRetry;

Komponenten ErrorBoundaryWithRetry innehåller en återförsöksknapp som, när den klickas, återställer hasError-tillståndet och återskapar de underordnade komponenterna. Du kan också lägga till en retryCount för att begränsa antalet försök. Detta tillvägagångssätt kan vara särskilt användbart för att hantera tillfälliga fel, till exempel tillfälliga nätverksavbrott. Se till att onRetry-egenskapen hanteras på lämpligt sätt och hämtar/kör om logiken som kan ha orsakat fel.

2. Funktionsflaggor

Funktionsflaggor låter dig aktivera eller inaktivera funktioner i din applikation dynamiskt, utan att distribuera ny kod. Felgränser kan användas tillsammans med funktionsflaggor för att försämra funktionaliteten på ett elegant sätt i händelse av ett fel. Om till exempel en viss funktion orsakar fel kan du inaktivera den med hjälp av en funktionsflagga och visa ett meddelande till användaren som indikerar att funktionen är tillfälligt otillgänglig.

3. Kretsbrytarmönster

Kretsbrytarmönstret är ett programvarudesignmönster som används för att förhindra att en applikation upprepade gånger försöker utföra en operation som sannolikt kommer att misslyckas. Det fungerar genom att övervaka framgångs- och misslyckandefrekvensen för en operation och, om misslyckandefrekvensen överstiger ett visst tröskelvärde, "öppna kretsen" och förhindra ytterligare försök att utföra operationen under en viss tidsperiod. Detta kan hjälpa till att förhindra kaskadfel och förbättra applikationens övergripande stabilitet.

Felgränser kan användas för att implementera kretsbrytarmönstret i React-applikationer. När en felgräns fångar ett fel kan den öka en felräknare. Om felräknaren överskrider ett tröskelvärde kan felgränsen visa ett meddelande till användaren som indikerar att funktionen är tillfälligt otillgänglig och förhindra ytterligare försök att utföra operationen. Efter en viss tidsperiod kan felgränsen "stänga kretsen" och tillåta försök att utföra operationen igen.

Slutsats

React Felgränser är ett viktigt verktyg för att bygga robusta och användarvänliga applikationer. Genom att implementera felgränser kan du förhindra att fel kraschar hela din applikation, ge ett elegant reserv-UI till dina användare och logga fel till övervakningstjänster för felsökning och analys. Genom att följa de bästa praxis och avancerade strategier som beskrivs i den här guiden kan du bygga React-applikationer som är motståndskraftiga, pålitliga och levererar en positiv användarupplevelse, även inför oväntade fel. Kom ihåg att fokusera på att tillhandahålla användbara felmeddelanden som är lokaliserade för en global publik.