Custom events does not work in the error boundary

[AhmedBaset]

Hey team, I've set up @vercel/analytics in my Next.js project, and it's working fine.

I want to track errors thrown to the error boundary in error.tsx. I've written this code:

'use client'

import { track } from '@vercel/analytics';
// ...

export default function Error({
  error,
  reset
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    track('thrown-error', { message: error.message, time: formatDate(new Date()) });
  }, [error.message]);

  return // jsx
}

For some reason, this doesn't work as expected; there are no custom events showing up in the analytics dashboard.

When I'm in the development environment, It logs the event in the console. but in production, it does not send to the Vercel analytics dashboard.

I tried another experiment:

<button onClick={() => {
  track('test-event', { name: 'someone' });
}}>trigger</button>

This worked as expected. However, I'm unsure why the first example isn't working. Any help would be appreciated.

[tobiaslins]

Hey @A7med3bdulBaset !

Did you resolve this issue already? This should work fine. If not, please send us a reproducible example!

Thanks

[AhmedBaset]

@tobiaslins
It's still not resolved

I think what we need is not a reproducible repo since the problem is not in the code but in Vercel.

To produce it:

1. run create-next-app
2. deploy to Vercel
3. turn on Vercel analytics
4. copy this code to error.tsx

'use client'

import { track } from '@vercel/analytics';
// ...

export default function Error({
  error,
  reset
}: {
  error: Error;
  reset: () => void;
}) {
  useEffect(() => {
    track('thrown-error', { message: error.message, time: new Date().toLocaleString() });
  }, [error.message]);

  return // jsx
}

5. finally in any page throw new Error("should be tracked")

[tobiaslins]

Hey @A7med3bdulBaset

I just added a example for error tracking (same as you mentioned) and it works fine
https://github.com/vercel/analytics/pull/113/files

Also the deployed version does work for us.

Make sure adblockers are not blocking the script on production!