Handling TRPC errors in Sentry

[MonkeeMan1]

Environment

SaaS (https://sentry.io/)

What are you trying to accomplish?

Hello,

I have recently implemented Sentry into my webapp that uses TRPC. However, we are running into problems with Sentry displaying error pages to our users for client side errors which do not break functionality. See image below

How are you getting stuck?

An example of when this page appears is when a user tries to visit a page which requires them to be signed in. On our protectedProcedure function we check if the user is signed in, and if they aren't we throw a TRPC unauthorized error.

export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
	if (!ctx.session || !ctx.session.user) {
		throw new TRPCError({ code: 'UNAUTHORIZED', message: 'You are not signed in' });
	}

This is resulting in the error below:

We are using an error boundary provided by sentry, with no props: import { ErrorBoundary } from '@sentry/nextjs'; and wrapping that inside of our root layout.

How would I go about stopping sentry from detecting these TRPC errors?

Where in the product are you?

Unknown

Link

No response

DSN

No response

Version

No response

[getsantry[bot]]

Assigning to @getsentry/support for routing ⏲️

[getsantry[bot]]

Routing to @getsentry/product-owners-issues for triage ⏲️

[jangjodi]

Hi @ReneGreen27, this seems to be an SDK issue - could we please re-route this?

[chargome]

Hi @MonkeeMan1, the trpc middleware currently does not support filtering your errors directly but you can do so following these docs.

As for your client, simply catching and handling your errors should prevent them from hitting the error boudary.

[MonkeeMan1]

thank you! :)