<ErrorBoundary />

Exibe um componente de fallback quando um erro é lançado (incluindo useSuspense() rejeitado).

informação

Componente reutilizável de Error Boundary para React.

Uso

Coloque ErrorBoundary em limites de navegação ou acima deles, como páginas, rotas ou modais, para "capturar" erros e renderizar uma UI de fallback.

import React from 'react';
import { ErrorBoundary, useSuspense } from '@data-client/react';
import { MyEndpoint } from './MyEndpoint';

export default function MyPage() {
  return (
    <ErrorBoundary>
      <SuspendingComponent />
    </ErrorBoundary>
  );
}

function SuspendingComponent() {
  const data = useSuspense(MyEndpoint);

  return <div>{data.text}</div>;
}

Props

interface Props<E extends Error> {
  children: React.ReactNode;
  className?: string;
  fallbackComponent: React.ComponentType<{
    error: E;
    resetErrorBoundary: () => void;
    className?: string;
  }>;
  listen?: (resetListener: () => void) => () => void;
}

fallbackComponent

import React from 'react';
import { DataProvider, ErrorBoundary } from '@data-client/react';
import Router from './Router';

function ErrorPage({
  error,
  className,
  resetErrorBoundary,
}: {
  error: Error;
  resetErrorBoundary: () => void;
  className?: string;
}) {
  return (
    <pre role="alert" className={className}>
      {error.message} <button onClick={resetErrorBoundary}>Reset</button>
    </pre>
  );
}

export default function App() {
  return (
    <DataProvider>
      <ErrorBoundary fallbackComponent={ErrorPage} className="error">
        <Router />
      </ErrorBoundary>
    </DataProvider>
  );
}

listen

Handler de assinatura para redefinir o estado de erro em eventos como mudanças na URL. É ótimo para envolver componentes de roteamento com um boundary.

Um exemplo usando o Anansi Router, que usa a assinatura do history.

import { useRouter, Link, MatchedRoute } from '@anansi/router';
import { ErrorBoundary } from '@data-client/react';

function App() {
  const { history } = useRouter();
  return (
    <div>
      <nav>
        <Link name="Home">Coin App</Link>
      </nav>
      <main>
        <ErrorBoundary listen={history.listen}>
          <MatchedRoute index={0} />
        </ErrorBoundary>
      </main>
    </div>
  );
}

className

className a ser repassado para fallbackComponent