How to handle expected TRPCError

[CapitaineToinon]

Hello 👋

I have a simple router like this with dummy data:

export const router = t.router({
	byId: t.procedure.input(z.object({ id: z.number() })).query(async ({ input }) => {
		const blog = db.blog.find((blog) => blog.id === input.id);

		if (!blog) {
			throw new TRPCError({
				code: 'NOT_FOUND'
			});
		}

		return blog;
	})
});

And a simple load function like so:

export const load = (async ({ params }) => {
	const blog = await trpc(event).byId.query({ id: params.id });

	return {
		blog
	};
}) satisfies PageLoad;

I was wondering if this package has a way to handle expected TRPCErrors? In this case, if the user goes to /blog/1000 and if blog with id 1000 does not exists, then my router will throw a TRPCError with status code 404. I would like to be able to automatically convert this to a sveltekit error call in order to trigger my +error.svelte page as this error is expected but instead it will just go the unexpected errors. I know I can just handle the error manually in my load function but I'm expected to use trpc in many loaders and I would prefer a better way to avoid repeated code everywhere.

Is there any out of the box solution with this package? Could I create a simple wrapper function? Or maybe are there good reasons for me not to do what I'm trying to do?

Feedback welcome, thanks!

🤠

[bato3]

From https://trpc.io/docs/error-handling

Whenever an error occurs in a procedure, tRPC responds to the client with an object that includes an "error" property. This property contains all the information that you need to handle the error in the client.

{
  "id": null,
  "error": {
    "message": "\"password\" must be at least 4 characters",
    "code": -32600,
    "data": {
      "code": "BAD_REQUEST",
      "httpStatus": 400,
      "stack": "...",
      "path": "user.changepassword"
    }
  }
}

And from https://kit.svelte.dev/docs/load#errors

import { error } from '@sveltejs/kit';

export const load = (async ({ params }) => {
	const blog = await trpc(event).byId.query({ id: params.id });
  if (blog.error) {
  // process error
    throw error(404, 'Not found');
  }
	return {
		blog
	};
}) satisfies PageLoad;

[multiplehats]

Maybe this helps?

#86