Unhandled Runtime Error

[sikta-roy]

I got an error at around 1hour 57min into the video tutorial,

the error was:

[sikta-roy]

If i update the: app(root)\transformations\add[type]\page.tsx

import Header from "@/components/shared/Header"; import TransformationForm from "@/components/shared/TransformationForm"; import { transformationTypes } from "@/constants"; import { getUserById } from "@/lib/actions/user.actions"; import { auth } from "@clerk/nextjs/server"; import { redirect } from "next/navigation";

const AddTransformationTypePage = async ({ params: { type } }: SearchParamProps) => { const { userId } = auth(); const transformation = transformationTypes[type];

if (!userId) { redirect('/sign-in');

}

let user = null; try { user = await getUserById(userId); } catch (error) {

console.error('Error fetching user:', error);
// Optionally render an error UI or return a custom error component
return (
  <div>
    <p>There was an error loading the user data.</p>
  </div>
);

}

return ( <>

  <TransformationForm
    action="Add"
    userId={user._id}
    type={transformation.type as TransformationTypeKey}
    creditBalance={user.creditBalance}
  />
</>

); };

export default AddTransformationTypePage;

to detect errors then:

then it shows this