React Error Boundary Tree: Hierarkisk felhantering för robusta applikationer

Reacts komponentbaserade arkitektur främjar återanvändbarhet och underhåll, men den introducerar också risken för att fel sprider sig och stör hela applikationen. Ohanterade fel kan leda till en störande upplevelse för användare, med kryptiska meddelanden eller till och med att applikationen kraschar. Error Boundaries erbjuder en mekanism för att fånga JavaScript-fel var som helst i deras underordnade komponentträd, logga dessa fel och visa ett reserv-UI istället för komponentträdet som kraschade. Ett väl utformat Error Boundary Tree låter dig isolera fel och ge en bättre användarupplevelse genom att graciöst degradera specifika sektioner av din applikation utan att påverka andra.

Förstå React Error Boundaries

Error Boundaries, introducerade i React 16, ä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 komponentträdet som kraschade. Error Boundaries fångar fel under rendering, i livscykelmetoder och i konstruktorer för hela trädet under dem. Kritiskt nog fångar de *inte* fel för:

• Händelsehanterare (läs mer nedan)
• Asynkron kod (t.ex. setTimeout eller requestAnimationFrame-callbacks)
• Server side rendering (serversidans rendering)
• Fel som kastas i själva error boundaryn (snarare än dess barn)

En klasskomponent blir en Error Boundary om den definierar en av (eller båda) dessa livscykelmetoder:

• static getDerivedStateFromError(): Denna metod anropas efter att ett fel har kastats av en underordnad komponent. Den tar emot felet som kastades som ett argument och bör returnera ett värde för att uppdatera state.
• componentDidCatch(): Denna metod anropas efter att ett fel har kastats av en underordnad komponent. Den tar emot två argument:
  • error: Felet som kastades.
  • info: Ett objekt som innehåller information om vilken komponent som kastade felet.

Ett enkelt exempel på en Error Boundary

Här är en grundläggande Error Boundary-komponent:

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

  static getDerivedStateFromError(error) {
    // Uppdatera state så att nästa rendering visar reserv-UI:t.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Du kan också logga felet till en felrapporteringstjänst
    console.error("Ett fel har fångats: ", error, info.componentStack);
    //loggaFelTillMinTjänst(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // Du kan rendera vilket anpassat reserv-UI som helst
      return <h1>Något gick fel.</h1>;
    }

    return this.props.children; 
  }
}

            

              
                Copy
              
            
          

Användning:

            
<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

            

              
                Copy
              
            
          

Kraften i ett Error Boundary Tree

Medan en enskild Error Boundary kan skydda hela din applikation, innebär ett mer sofistikerat tillvägagångssätt att skapa ett Error Boundary *Tree*. Det betyder att strategiskt placera flera Error Boundaries på olika nivåer i din komponenthierarki. Detta låter dig:

• Isolera fel: Ett fel i en del av applikationen kommer inte nödvändigtvis att krascha hela UI:t. Endast den del som är omsluten av den specifika Error Boundary kommer att visa reserv-UI:t.
• Erbjuda kontextspecifika reserver: Olika delar av din applikation kan kräva olika reserv-UI:er. Till exempel kan en felande bildkomponent visa en platshållarbild, medan en felande datainhämtningskomponent kan visa en "Försök igen"-knapp.
• Förbättra användarupplevelsen: Genom att noggrant placera Error Boundaries kan du säkerställa att din applikation degraderar graciöst, vilket minimerar störningar för användaren.

Bygga ett Error Boundary Tree: Ett praktiskt exempel

Låt oss tänka oss en webbapplikation som visar en användarprofil. Profilen består av flera sektioner:

• Användarinformation (namn, plats, biografi)
• Profilbild
• Senaste aktivitetsflöde
• Lista över följare

Vi kan omsluta var och en av dessa sektioner med sin egen Error Boundary.

            
// ErrorBoundary.js (Den generiska ErrorBoundary-komponenten från ovan)

import ErrorBoundary from './ErrorBoundary';

function UserProfile() {
  return (
    <div>
      <ErrorBoundary>
        <UserInfo />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<img src="/placeholder.png" alt="Platshållare"/>}>
        <ProfilePicture />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<p>Kunde inte ladda aktivitet. Försök igen senare.</p>}>
        <ActivityFeed />
      </ErrorBoundary>
      <ErrorBoundary fallbackUI={<p>Kunde inte ladda följare.</p>}>
        <FollowersList />
      </ErrorBoundary>
    </div>
  );
}

            

              
                Copy
              
            
          

I detta exempel, om ProfilePicture-komponenten inte lyckas laddas (t.ex. på grund av en trasig bild-URL), kommer endast profilbildsområdet att visa reserv-UI:t (platshållarbilden). Resten av profilen förblir funktionell. På samma sätt kommer ett fel i ActivityFeed-komponenten endast att påverka den sektionen och visa ett meddelande om att försöka igen senare.

Notera användningen av fallbackUI-propen i några av ErrorBoundary-komponenterna. Detta gör att vi kan anpassa reserv-UI:t för varje sektion, vilket ger en mer kontextmedveten och användarvänlig upplevelse.

Avancerade tekniker för Error Boundary

1. Anpassa reserv-UI

Standard-reserv-UI:t (t.ex. ett enkelt "Något gick fel"-meddelande) kanske inte är tillräckligt för alla scenarier. Du kan anpassa reserv-UI:t för att ge mer informativa meddelanden, erbjuda alternativa åtgärder eller till och med försöka återhämta dig från felet.

Som visas i föregående exempel kan du använda props för att skicka ett anpassat reserv-UI till ErrorBoundary-komponenten:

            
<ErrorBoundary fallbackUI={<CustomFallbackComponent />}>
  <MyComponent />
</ErrorBoundary>

            

              
                Copy
              
            
          

CustomFallbackComponent kan visa ett mer specifikt felmeddelande, föreslå felsökningssteg eller erbjuda en "Försök igen"-knapp.

2. Logga fel till externa tjänster

Medan Error Boundaries förhindrar applikationskrascher är det avgörande att logga fel så att du kan identifiera och åtgärda underliggande problem. componentDidCatch-metoden är den idealiska platsen för att logga fel till externa felspårningstjänster som Sentry, Bugsnag eller Rollbar.

            
class ErrorBoundary extends React.Component {
  // ...

  componentDidCatch(error, info) {
    // Logga felet till en felrapporteringstjänst
    logErrorToMyService(error, info.componentStack);
  }

  // ...
}

            

              
                Copy
              
            
          

Se till att konfigurera din felspårningstjänst för att hantera JavaScript-fel och ge dig detaljerad information om felet, inklusive komponentens stack trace.

Exempel med Sentry:

            
import * as Sentry from "@sentry/react";
import { BrowserTracing } from "@sentry/tracing";

Sentry.init({
  dsn: "YOUR_SENTRY_DSN",
  integrations: [new BrowserTracing()],

  // Sätt tracesSampleRate till 1.0 för att fånga 100%
  // av transaktioner för prestandaövervakning.
  // Vi rekommenderar att justera detta värde i produktion
  tracesSampleRate: 1.0,
});

class ErrorBoundary extends React.Component {
  // ...

  componentDidCatch(error, info) {
    Sentry.captureException(error, { extra: info });
  }

  // ...
}

            

              
                Copy
              
            
          

3. Error Boundaries och händelsehanterare

Som nämnts tidigare fångar Error Boundaries *inte* fel inuti händelsehanterare. Detta beror på att händelsehanterare exekveras asynkront, utanför Reacts renderingslivscykel. För att hantera fel i händelsehanterare måste du använda ett try...catch-block.

            
function MyComponent() {
  const handleClick = () => {
    try {
      // Kod som kan kasta ett fel
      throw new Error("Något gick fel i händelsehanteraren!");
    } catch (error) {
      console.error("Fel i händelsehanterare:", error);
      // Visa ett felmeddelande för användaren
      alert("Ett fel inträffade. Försök igen.");
    }
  };

  return <button onClick={handleClick}>Klicka här</button>;
}

            

              
                Copy
              
            
          

4. Error Boundaries och asynkrona operationer

På samma sätt fångar Error Boundaries inte fel i asynkrona operationer som setTimeout, setInterval eller Promises. Du måste använda try...catch-block inom dessa asynkrona operationer för att hantera fel.

Exempel med Promises:

            
function MyComponent() {
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        if (!response.ok) {
          throw new Error(`HTTP-fel! status: ${response.status}`);
        }
        const data = await response.json();
        // Bearbeta datan
        console.log(data);
      } catch (error) {
        console.error("Fel vid hämtning av data:", error);
        // Visa ett felmeddelande för användaren
        alert("Kunde inte hämta data. Kontrollera din anslutning.");
      }
    };

    fetchData();
  }, []);

  return <div>Laddar data...</div>;
}

            

              
                Copy
              
            
          

5. Försöka misslyckade operationer på nytt

I vissa fall kan det vara möjligt att automatiskt försöka en misslyckad operation på nytt. Om till exempel en nätverksförfrågan misslyckas på grund av ett tillfälligt anslutningsproblem kan du implementera en återförsöksmekanism med exponentiell backoff.

Du kan implementera en återförsöksmekanism inom reserv-UI:t eller inom komponenten som upplevde felet. Överväg att använda bibliotek som axios-retry eller implementera din egen återförsökslogik med setTimeout.

Exempel (grundläggande återförsök):

            
function RetryComponent({ onRetry }) {
  return <button onClick={onRetry}>Försök igen</button>;
}

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

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

  componentDidCatch(error, info) {
    console.error("Ett fel har fångats: ", error, info.componentStack);
  }

  handleRetry = () => {
    this.setState({ hasError: false, error: null }, () => {
      // Tvinga omrendering av komponenten genom att uppdatera state
      this.forceUpdate();
    });
  };

  render() {
    if (this.state.hasError) {
      return (
        <div>
          <h1>Något gick fel.</h1>
          <p>{this.state.error?.message}</p>
          <RetryComponent onRetry={this.handleRetry} />
        </div>
      );
    }

    return this.props.children;
  }
}

            

              
                Copy
              
            
          

Bästa praxis för att använda Error Boundaries

• Omslut hela routes: För toppnivå-routes, överväg att omsluta hela routen med en Error Boundary för att fånga oväntade fel som kan uppstå. Detta ger ett skyddsnät och förhindrar att hela applikationen kraschar.
• Omslut kritiska sektioner: Identifiera de mest kritiska sektionerna av din applikation (t.ex. kassaprocessen på en e-handelssajt) och omslut dem med Error Boundaries för att säkerställa att de är motståndskraftiga mot fel.
• Överanvänd inte Error Boundaries: Undvik att omsluta varje enskild komponent med en Error Boundary. Detta kan lägga till onödig overhead och göra din kod svårare att läsa. Fokusera på att omsluta komponenter som sannolikt kommer att misslyckas eller som är kritiska för användarupplevelsen.
• Ge informativa reserv-UI:er: Reserv-UI:t bör ge tydlig och hjälpsam information till användaren om vad som gick fel och vad de kan göra för att lösa problemet. Undvik att visa generiska felmeddelanden som inte ger någon kontext.
• Logga fel noggrant: Se till att logga alla fel som fångas av Error Boundaries till en extern felspårningstjänst. Detta hjälper dig att snabbt identifiera och åtgärda underliggande problem.
• Testa dina Error Boundaries: Skriv enhetstester och integrationstester för att säkerställa att dina Error Boundaries fungerar korrekt och att de fångar de förväntade felen. Simulera felförhållanden och verifiera att reserv-UI:t visas korrekt.
• Överväg global felhantering: Medan Error Boundaries är utmärkta för att hantera fel inom React-komponenter, bör du också överväga att implementera global felhantering för att fånga fel som inträffar utanför React-trädet (t.ex. ohanterade promise rejections).

Globala överväganden och kulturell känslighet

När du utformar Error Boundary Trees för en global publik är det viktigt att ta hänsyn till kulturell känslighet och lokalisering:

• Lokalisering: Se till att dina reserv-UI:er är korrekt lokaliserade för olika språk och regioner. Använd ett lokaliseringsbibliotek som i18next eller react-intl för att översätta felmeddelanden och annan text.
• Kulturell kontext: Var medveten om kulturella skillnader när du utformar dina reserv-UI:er. Undvik att använda bilder eller symboler som kan vara stötande eller olämpliga i vissa kulturer. Till exempel kan en handgest som anses positiv i en kultur vara stötande i en annan.
• Tidszoner: Om dina felmeddelanden innehåller tidsstämplar eller annan tidsrelaterad information, se till att visa dem i användarens lokala tidszon.
• Valutor: Om dina felmeddelanden involverar monetära värden, visa dem i användarens lokala valuta.
• Tillgänglighet: Se till att dina reserv-UI:er är tillgängliga för användare med funktionsnedsättningar. Använd lämpliga ARIA-attribut och följ riktlinjer för tillgänglighet för att göra din applikation användbar för alla.
• Opt-in för felrapportering: Var transparent med felrapportering. Ge användarna möjlighet att välja att delta i eller avstå från att skicka felrapporter till dina servrar. Säkerställ efterlevnad av integritetsregler som GDPR och CCPA.

Exempel (Lokalisering med `i18next`):

            
// i18n.js (i18next-konfiguration)

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import en from './locales/en/translation.json';
import sv from './locales/sv/translation.json';

i18n
  .use(initReactI18next) // skickar i18n vidare till react-i18next
  .init({
    resources: {
      en: { translation: en },
      sv: { translation: sv },
    },
    lng: 'sv', // standardspråk
    fallbackLng: 'en',

    interpolation: {
      escapeValue: false, // react skyddar redan mot xss
    },
  });

export default i18n;

// ErrorBoundary.js

import { useTranslation } from 'react-i18next';

function ErrorBoundary(props) {
  const { t } = useTranslation();

  // ...

  render() {
    if (this.state.hasError) {
      return <h1>{t('error.somethingWentWrong')}</h1>;
    }

    return this.props.children;
  }
}

            

              
                Copy
              
            
          

Slutsats

React Error Boundary Trees är ett kraftfullt verktyg för att bygga robusta och motståndskraftiga applikationer. Genom att strategiskt placera Error Boundaries på olika nivåer i din komponenthierarki kan du isolera fel, erbjuda kontextspecifika reserver och förbättra den övergripande användarupplevelsen. Kom ihåg att hantera fel i händelsehanterare och asynkrona operationer med try...catch-block. Genom att följa bästa praxis och ta hänsyn till globala och kulturella faktorer kan du skapa applikationer som är både pålitliga och användarvänliga för en mångsidig publik.

Genom att implementera ett väl utformat Error Boundary Tree och vara noggrann med detaljer kan du avsevärt förbättra tillförlitligheten och användarupplevelsen i dina React-applikationer, oavsett var dina användare befinner sig.