.profile/app/error.tsx

"use client"

import { useEffect } from "react"

export interface ErrorHandlingProps {
  error: Error
}

const ErrorHandling = (props: ErrorHandlingProps): JSX.Element => {
  const { error } = props

  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <main className="flex flex-col flex-1 items-center justify-center">
      <h1 className="my-6 text-4xl font-semibold">
        Error{" "}
        <span
          className="text-yellow dark:text-yellow-dark"
          data-cy="status-code"
        >
          500
        </span>
      </h1>
      <p className="text-center text-lg">Server error</p>
    </main>
  )
}

export default ErrorHandling