function Error({ statusCode }) {
	... // statusCode에 따라 에러 화면을 구성합니다.
}

Error.getInitialProps = ({ res, err }) => {
  const statusCode = res ? res.statusCode : err ? err.statusCode : null
  return { statusCode }
}

export default Error

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)

    // Define a state variable to track whether is an error or not
    this.state = { hasError: false }
  }
  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI

    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // You can use your own error logging service here
    console.log({ error, errorInfo })
  }
  render() {
    // Check if the error is thrown
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <div>
          <h2>Oops, there is an error!</h2>
          <button type="button" onClick={() => this.setState({ hasError: false })}>
            Try again?
          </button>
        </div>
      )
    }

    // Return children components in case of no error

    return this.props.children
  }
}

export default ErrorBoundary

import React, { Component, ErrorInfo, FunctionComponent, ReactNode } from 'react'

interface ErrorBoundaryFallbackProops<TError extends Error = Error> {
  error: TError
  reset: () => void
}

interface ErrorBoundaryProps {
  children?: ReactNode
  onError?(error: Error, info: ErrorInfo): void
  onReset?(): void
  fallback: ReactNode | FunctionComponent<ErrorBoundaryFallbackProops>
}

type ErrorBoundaryState<TError extends Error = Error> =
  | { isError: true; error: TError }
  | { isError: false; error: null }

const initialErrorBoundaryState: ErrorBoundaryState = {
  isError: false,
  error: null,
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
    return { isError: true, error }
  }

  state: ErrorBoundaryState = initialErrorBoundaryState

  componentDidUpdate(
    prevProps: Readonly<ErrorBoundaryProps>,
    prevState: Readonly<ErrorBoundaryState<Error>>,
    snapshot?: any,
  ) {
    const { isError } = this.state

    if (isError && prevState.isError) {
      this.reset() // 재실행 함수
    }
  }

  componentDidCatch(error: Error, into: ErrorInfo) {
    console.error('Uncaught error:', error, into) // 에러 로깅
    this.props.onError?.(error, into) // 에러 발생 시 호출할 수 있는 함수
  }

  reset = () => {
    this.props.onReset?.()
    this.setState(initialErrorBoundaryState)
  }

  render() {
    const { children, fallback } = this.props
    const { error, isError } = this.state

    let childrenOrFallback = children

    if (isError) {
      if (typeof this.props.fallback === 'undefined') {
        if (process.env.NODE_ENV === 'development') {
          console.error('ErrorBoundary requires a defined fallback.')
        }

        throw error
      }

      if (typeof fallback === 'function') {
        const FallbackComponent = fallback
        childrenOrFallback = <FallbackComponent error={error} reset={this.reset} /> // 에러 발생 시 표시할 컴포넌트
      } else {
        childrenOrFallback = fallback
      }
    }

    return childrenOrFallback
  }
}

export default ErrorBoundary

<ErrorBoundary
  fallback={({ error, reset }) => (
    <GlobalErrorContainer errorMessage={error.message} onReset={reset} />
  )}
>
  ...
  <Components {...pageProps} />
</ErrorBoundary>