5 replies

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

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

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

data

key.

Any help with this would be appreciated.
Thanks

Convex Community•16mo 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

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

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

data

key.

Any help with this would be appreciated.
Thanks

nextjs handling server-side errors in error page

Similar Threads

nextjs handling server-side errors in error page

Similar Threads

Similar Threads

Similar Threads