Avoiding Sentry Impact on Client-side bundle size in Next JS via sending error data to the server route

[stepan-twnty]

To avoid increasing bundle size, I created a route that I use for sending all Errors from the client. Here is an example:

// /pages/api/glitchtip/exception.TS
import * as Sentry from '@sentry/nextjs'

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    Sentry.captureException(new Error(JSON.stringify(req.body)))

    res.status(200).json({})
  }

  res.status(200).json({})
}


//UTILS.TS
export const addExceptionToLog = async (message: unknown) => {
  let body: { name: string; message: string; stack?: string } | undefined

  if (message instanceof Error) {
    body = {
      name: message.name,
      message: message.message,
      stack: message.stack,
      ...(message.cause ? { cause: message.cause } : {}), // Spread `cause` only if it exists
    }
  }

  if (typeof message === 'string') {
    body = {
      name: '',
      message,
    }
  }

  await fetch(`${process.env.NEXT_PUBLIC_SITE_URL}api/glitchtip/exception/`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body || message),
  }).catch(() => null)
}

//SOME CLIENT FILE
...
 const submitHandler = handleSubmit(async (data) => {
    try {
      setInternalStatus(Status.loading)

      const verifyResponseData = await verifyToken(data['cf-turnstile-response'])
      if (!verifyResponseData.success) {
        void addExceptionToLog(`Captcha verify failed ${JSON.stringify(verifyResponseData)}`)

        return void setInternalStatus(Status.failed)
      }

      onSubmit({ email: data.email, firstName: data.firstName })
    } catch (error) {
      void addExceptionToLog(`Contact form sending failed ${error}`)
      setInternalStatus(Status.failed)
    }
  })
  ...

I understand that a lot of features are not working, but actually, I only need the Error name, on what page it happened, and a simple trace (optional), and it looks like everything that I need, Sentry captured.

Maybe someone has some suggestions on how to improve this way of using Sentry on the client side?