A React Error Boundary that has some basic styling and functionality

MyErrorBoundary.tsx

'use client';

import { ErrorBoundary } from 'react-error-boundary';
import type { ErrorInfo } from 'react';
import type { ErrorBoundaryProps, FallbackProps } from 'react-error-boundary';

import { Button } from '@components/Button';

const logError = (error: Error, info: ErrorInfo) => {
  console.error({ error, info });
};

const ErrorFallback: React.FC<FallbackProps & { message?: string }> = ({
  message,
  error,
  resetErrorBoundary,
}) => {
  return (
    <div className="rounded p-4">
      <h2 className="mb-2 font-bold text-xl">
        Something went wrong{message ? ` in "${message}":` : ':'}
      </h2>
      <p className="mb-4">{error.message}</p>
      <Button
        variant="primary"
        onClick={resetErrorBoundary}
      >
        Try again
      </Button>
    </div>
  );
};

export const MyErrorBoundary: React.FC<
  React.PropsWithChildren<
    Omit<
      ErrorBoundaryProps,
      'FallbackComponent' | 'onError' | 'fallback' | 'fallbackRender'
    >
  >
> = ({ children, ...rest }) => {
  return (
    <ErrorBoundary
      FallbackComponent={undefined}
      fallbackRender={ErrorFallback}
      onError={logError}
      {...rest}
    >
      {children}
    </ErrorBoundary>
  );
};

export default MyErrorBoundary;