Vercel Analytics error: beforeSend function in app/layout requires use server in next 14.1.0

Kamasah-Dickson commented 4 months ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Pro
Binaries:
  Node: 18.17.0
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.1.0
  eslint-config-next: 14.0.4
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which example does this report relate to?

https://vercel.com/docs/analytics/quickstart#add-the-analytics-component-to-your-app

What browser are you using? (if relevant)

Chrome

How are you deploying your application? (if relevant)

Vercel

Describe the Bug

I wanted to test the vercel analytics and followed the docs and I got an error


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

### Expected Behavior

My app is supposed to run without a runtime error

### To Reproduce

1. install and import analytics into application.

```js
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <head>
        <title>Next.js</title>
      </head>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

Kamasah-Dickson commented 4 months ago

this is my app/layout file. commented it out to wait for a fix.

Error is not showing up on deployment though.



import type { Metadata } from "next";
import { Roboto } from "next/font/google";
import "./globals.scss";
import { SATSATmetadata } from "@/utils/metadata";
import NextTopLoader from "nextjs-toploader";
import "react-tooltip/dist/react-tooltip.css";
import { Toaster } from "react-hot-toast";
import { getServerSession } from "next-auth";
import SessionProvider from "@/components/SessionProvider";
import { options } from "./api/auth/[...nextauth]/options";
// import { Analytics } from "@vercel/analytics/react";
import { SpeedInsights } from "@vercel/speed-insights/next";

const roboto = Roboto({
    subsets: ["latin", "greek"],
    weight: ["300", "400", "500", "700", "900"],
});

export const metadata: Metadata = SATSATmetadata;

export default async function RootLayout({
    children,
}: {
    children: React.ReactNode;
}) {
    const session = await getServerSession(options);
    return (
        <html lang="en">
            <body className={`antialiased ${roboto.className}`}>
                <NextTopLoader
                    showSpinner={false}
                    color="#29a173"
                    initialPosition={0.04}
                    crawlSpeed={300}
                    height={2}
                    crawl={true}
                    easing="ease"
                    speed={350}
                    shadow="0 0 10px #29a173,0 0 5px #29a173"
                />
                <Toaster />
                <SessionProvider session={session}>{children}</SessionProvider>
                {/* <Analytics
                    beforeSend={(event) => {
                        const url = new URL(event.url);
                        url.searchParams.delete("plan");
                        return {
                            ...event,
                            url: url.toString(),
                        };
                    }}
                /> */}
                <SpeedInsights />
            </body>
        </html>
    );
}

rockgabi commented 1 month ago

have you found a solution to this?

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

vercel / next.js