Theo's Typesafe Cult•3w ago

App crashes when TRPC error is thrown on the server

I've found an interesting situation while using TRPc with the T3 template on the server. If the Authentication middleware for the TRPC procedures throws an UNAUTHORIZED error if calling it on the server:

import { api } from "~/trpc/server";

export default async function ProjectPaged({ params }: {
  params: { projectId: string };
}) {
  const project = await api.project.getProject({ projectId: params.projectId });

  return (
    <>
      <div>My Post: {params.projectId}</div>
    </>
  );
}

import { api } from "~/trpc/server";

export default async function ProjectPaged({ params }: {
  params: { projectId: string };
}) {
  const project = await api.project.getProject({ projectId: params.projectId });

  return (
    <>
      <div>My Post: {params.projectId}</div>
    </>
  );
}

It throws a global error. I would expect this to return an actual error or be able to handle it somehow, but instead it throws a global error. In development mode it just crashes

2 Replies

JulieCezar•3w ago

ayoub•3w ago

On nextjs you can create and error.tsx to handle the error on the client, otherwise you can change the behaviour of the protected procedure to return instead of throwing, but I recommend to keep the default and throw.

Gaming

Programming

App crashes when TRPC error is thrown on the server