Theo's Typesafe Cult•2y ago

Sentry Integration

I'm currently integrating Sentry reporting and I wanna ask what's the best way to add a function that reports all trpc errors to Sentry Something like a middleware https://github.com/trpc/examples-next-prisma-starter/blob/5158b825a2c236e19ef1e7128f86021498fc833c/src/pages/api/trpc/%5Btrpc%5D.ts#L14-L22 I found this but I'm trying to implement it in the API package, not the next js api packages/api/src/trpc.ts

GitHub

examples-next-prisma-starter/src/pages/api/trpc/[trpc].ts at 5158b8...

🚀 tRPC starter repo with E2E-testing. Contribute to trpc/examples-next-prisma-starter development by creating an account on GitHub.

1 Reply

HikOP•2y ago

answer by @marminge moved from ct3a-meta to questions you make an errorFormatter and then you can use that shape in the onError handler whereever you deploy your app:

// packages/api/src/trpc.ts
const t = initTRPC.context<...>().create({
  transformer: ...,
  errorFormatter: ...,
})

// apps/nextjs/pages/api/trpc/[trpc].ts
export default trpcNext.createNextApiHandler({
  onError({ error, shape }) {
    if (error.code === 'INTERNAL_SERVER_ERROR') {
      shape; // whatever shape you return from the formatter

      // send to bug reporting
      console.error('Something went wrong', error);
    }
  },
});

// packages/api/src/trpc.ts
const t = initTRPC.context<...>().create({
  transformer: ...,
  errorFormatter: ...,
})

// apps/nextjs/pages/api/trpc/[trpc].ts
export default trpcNext.createNextApiHandler({
  onError({ error, shape }) {
    if (error.code === 'INTERNAL_SERVER_ERROR') {
      shape; // whatever shape you return from the formatter

      // send to bug reporting
      console.error('Something went wrong', error);
    }
  },
});

alternatively, if you wanna go down the middleware route:

const forwardErrorMiddleware = middleware(async (opts) => {
  const result = await opts.next();
  if (!result.ok) {
    // handle error and send somewhere
    // console.log("Error occured in procedure", opts.path);
  }
  return result;
});

export const publicProcedure = t.procedure.use(forwardErrorMiddleware);

const forwardErrorMiddleware = middleware(async (opts) => {
  const result = await opts.next();
  if (!result.ok) {
    // handle error and send somewhere
    // console.log("Error occured in procedure", opts.path);
  }
  return result;
});

export const publicProcedure = t.procedure.use(forwardErrorMiddleware);

Gaming

Programming

Sentry Integration