Error Handling -- NextJS

[daring sigil]

.

I'm having trouble creating the Error Handling effect that catches any rendered errors in prodcution

ErrorBoundary.tsx

import React, { Component, ErrorInfo, ReactNode } from "react";

interface Props {
  children?: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  public state: State = {
    hasError: false
  };

  public static getDerivedStateFromError(_: Error): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
    console.error("Uncaught error:", error, errorInfo);
  }

  public render() {
    if (this.state.hasError) {
      return <h1>Sorry.. there was an error</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

I've created the following error boundary class

And wrapped it around my App component

_app.tsx

import '../styles/globals.css'
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'
import { SessionProvider } from 'next-auth/react'
import ErrorBoundary from '../components/ErrorBoundary'

export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout ?? ((page) => page)

  return (
    <ErrorBoundary>
      <SessionProvider session={pageProps.session}>
        {(getLayout(<Component {...pageProps} />))}
      </SessionProvider>
    </ErrorBoundary>
  )
}

Yet, I'm still seeing the errors on the development screen

Any suggestions?

[stone cairn]

They are only caught in prod mode

In dev mode why do you want it to be caught?

[daring sigil]

Oh, okay, I just wanted to see what it looked like first

[daring sigil]

I haven't deployed the site yet

[stone cairn]

Then run it in prod mode, next build && next start

In dev mode the overlay is there to help you debug, and there is (thankfully) no way to turn it off