Next.js ErrorBoundary example

_app.tsx

export default function MyApp({ Component, pageProps }: { Component: any; pageProps: any }) {
  // ReactErrorBoundary doesn't pass in the component stack trace.
  // Capture that ourselves to pass down via render props
  const [errorInfo, setErrorInfo] = useState<React.ErrorInfo | null>(null);

  return (
    <React.Fragment>
      <ErrorBoundary
        onError={(error, info) => {
          if (process.env.NODE_ENV === 'production') {
            uploadErrorDetails(error, info);
          }
          setErrorInfo(info);
        }}
        fallbackRender={fallbackProps => {
          return <AppErrorFallback {...fallbackProps} errorInfo={errorInfo} />;
        }}
      >
        <Component {...pageProps} />;
      </ErrorBoundary>
    </React.Fragment>
  );
}

AppErrorFallback.tsx

import React from 'react';

import Jumbotron from 'react-bootstrap/Jumbotron';
import Alert from 'react-bootstrap/Alert';
import Button from 'react-bootstrap/Button';

import { FallbackProps } from 'react-error-boundary';


interface AEFProps extends FallbackProps {
  errorInfo: React.ErrorInfo | null;
}

const sliceErrorStack = (stackTrace = '', numLines = 10) => {
  const lines = stackTrace.split('\n');
  const firstNLines = lines.slice(0, numLines);
  const joinedLines = firstNLines.join('\n');
  return joinedLines;
};

export const AppErrorFallback = ({ error, errorInfo, resetErrorBoundary }: AEFProps) => {
  return (
    <Jumbotron>
      <Alert variant="danger">
        <h2>An Error Occurred</h2>
        <p>
          The application detected an error, and it's been reported to the application development team. You can try clicking
          "Reload the Page" to return to the page you were on previously.
        </p>
        <p>
          If the error keeps occurring, please file a bug report with the following details, and include any steps to reproduce the issue:
        </p>

        <Button onClick={resetErrorBoundary}>Reload the Page</Button>

        <h3>Error Details</h3>
        <h5>Message</h5>
        <pre>{error.message}</pre>
        <details>
          <summary>Expand to Show Error Stack Traces</summary>
          <h5>Stack Trace</h5>
          <pre>{sliceErrorStack(error.stack)}</pre>
          <h4>Component Stack</h4>
          <pre>{sliceErrorStack(errorInfo?.componentStack)}</pre>
        </details>
      </Alert>
    </Jumbotron>
  );
};

Hello i try this but next is not rendering the AppErrorFallback.tsx, i'm using react-error-boundary too