nextjs handling server-side errors in error page

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

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