BeforeSend don't work in app directory RSC

[thibaultleouay]

When using beforeSend in my root layout it throws this error

1 of 1 unhandled error

Unhandled Runtime Error
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... beforeSend={function}>
                  ^^^^^^^^^^

[tobiaslins]

Hey @thibaultleouay!

Because it's not possible to pass functions from a server-component to a client component, you need to create a client component wrapper to make before send work.

"use client"
import { Analytics } from '@vercel/analytics/react'`

export const VercelAnalytics = () => {
   return <Analytics beforeSend={(event) => {
      // do something
      return event
   }} />
}

Now you can use this new client component in your root layout! <VercelAnalytics />