itslekan•4w ago

nextjs handling server-side errors in error page

I'm using Nextjs, and I've setup a catch all error page to handle all errors, I've set it up to show formatted convex Errors if it's instanceof ConvexError see code below:

"use client";

import ...

export default function Error({
  error,
}: {
  error:
    | ConvexError<{ title: string; body: string }>
    | (Error & { digest?: string });
}) {
  ...
  if (error instanceof ConvexError)
    return (
      <AnimatedGroup
        preset="blur-slide"
        className="flex flex-col px-10 justify-center items-center flex-1 gap-2"
      >
        <div className="p-4 rounded-full text-red-700 bg-red-100">
          <CircleAlert className="size-6" />
        </div>
        <div className="text-center">
          <h2 className="font-bold">{error.data.title}</h2>
          <p className="text-muted-foreground">{error.data.body}</p>
        </div>
      </AnimatedGroup>
    );
    ...
  );
}

"use client";

import ...

export default function Error({
  error,
}: {
  error:
    | ConvexError<{ title: string; body: string }>
    | (Error & { digest?: string });
}) {
  ...
  if (error instanceof ConvexError)
    return (
      <AnimatedGroup
        preset="blur-slide"
        className="flex flex-col px-10 justify-center items-center flex-1 gap-2"
      >
        <div className="p-4 rounded-full text-red-700 bg-red-100">
          <CircleAlert className="size-6" />
        </div>
        <div className="text-center">
          <h2 className="font-bold">{error.data.title}</h2>
          <p className="text-muted-foreground">{error.data.body}</p>
        </div>
      </AnimatedGroup>
    );
    ...
  );
}

This works fine when the error comes from client side, but it completely breaks for server side requests like fetchQuery. I've looked through the docs and this is not addressed at all.

{
  "stack": "ConvexError: [Request ID: f159ead0758d53c7] Server Error\nUncaught ConvexError: {\"title\":\"Access denied\",\"body\":\"You do not have access to this store\"}...",
  "digest": "1811788005"
}

{
  "stack": "ConvexError: [Request ID: f159ead0758d53c7] Server Error\nUncaught ConvexError: {\"title\":\"Access denied\",\"body\":\"You do not have access to this store\"}...",
  "digest": "1811788005"
}

here's the error. As you can see it's not the usual that has the data key. Any help with this would be appreciated. Thanks

5 Replies

Convex Bot•4w ago

Thanks for posting in <#1088161997662724167>. Reminder: If you have a Convex Pro account, use the Convex Dashboard to file support tickets. - Provide context: What are you trying to achieve, what is the end-user interaction, what are you seeing? (full error message, command output, etc.) - Use search.convex.dev to search Docs, Stack, and Discord all at once. - Additionally, you can post your questions in the Convex Community's <#1228095053885476985> channel to receive a response from AI. - Avoid tagging staff unless specifically instructed. Thank you!

deen•3w ago

Next.js tampers with your server Error, for your protection. https://nextjs.org/docs/14/app/building-your-application/routing/error-handling#handling-server-errors This is a server component, so handle it in a server way: with a try/catch. You have access to your data object there - you can decide what to send to the client.

Routing: Error Handling | Next.js

Handle runtime errors by automatically wrapping route segments and their nested children in a React Error Boundary.

itslekanOP•3w ago

Thanks that was helpful. I figured rather than using fetchQuery and not be able to access the ConvexError data, I'll just use prefetchQuery . This has the benefit of avoiding loading state, while still being able to handle query errors.

deen•3w ago

It's a great option as long as your needs aren't too complex - you can't change the query args, and it doesn't work with paginated queries. You'll need to use fetchQuery for those. I hadn't used this set up in a while so I made a little demo in my app to check it. It looked like the data object had been moved in the message by Next. Maybe you could check for an instanceof ConvexError that lacks a data prop - in that case you could try to JSON.parse the data out of the message. Not sure how reliable that would be, but it's something you could try if you needed a fetchQuery. But dealing with it directly in a server component much more reliable, in my opinion.

itslekanOP•3w ago

for my use cases so far the prefetchQuery is good enough. I won't be willing to JSON.parse the error object nextjs give you. It seems to finiky and wrapping a react component in a trycatch seems odd. Thank you so much for the suggestions though. I think I'll be dealing with pagination soon so I'll do some experimentation.