I have the following page.tsx (app/register/page.tsx)

import Form from './form'

const user = null;

const page = () => {

    if (!user) {
        throw new Error('OOPS');
    }

    return (
        <div className='w-[300px] min-h-[400px] mx-auto mt-10'>
            <Form />
        </div>
    )
}

export default page

Also I created error.tsx page

"use client"

const error = ({error,reset}: {error: Error, reset: () => void}) => {
    <div className=" text-2xl text-black w-full bg-pink-600 h-10">Error</div>
}

export default error;

But nothing is shown up. I just want to test if my error.tsx page works. But currently it is not working.

I tried to change page.tsx to async function but it is not working again. Also I want to ask if I throw an Error in my api folder and after that I fetch data in my page.tsx and hit the api route, will the error be handeled