user19448827
user19448827

Reputation: 245

Next.js app router error boundary - sending more than just an error message from a server component

All of our fetch work is being done in server components. When a fetch fails, we throw an error in a server component:

// MyServerComponent making the fetch call
try{
   fetch(.....)
}catch(e){
   const myError = new Error("Something went wrong")
   myError.type = "MyCustomType";
   myError.code = 123;
   throw myError;
}


Then the app router has us defining the error boundary (which is a client component) called error.tsx by convention. When the error is thrown from a server component, the error should be passed to this component:

'use client'


interface ErrorProps {
  error: Error & { digest?: string };
}

export default function Error({ error }: ErrorProps) {
  useEffect(() => {
     console.log(error.message) // "Something went wrong"
     console.log(error.type) // undefined
     console.log(error.code) //undefined

  }, [error]);

When I log this I don't see the type or code being passed. I only have access the error.message . Is there a way I can get access to more error properties in my error boundary component besides just the message?

Upvotes: 0

Views: 841

Answers (0)

Related Questions