itslekanI
Convex Community•14mo ago•
5 replies
itslekan

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>
    );
    ...
  );
}


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"
}

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
Was this page helpful?