Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
1 task done
Kamasah-Dickson opened this issue Feb 24, 2024 · 2 comments
Open
1 task done

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

Kamasah-Dickson opened this issue Feb 24, 2024 · 2 comments
Labels
examples Issue/PR related to examples

Comments

@Kamasah-Dickson
Copy link

Verify canary release

  • 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 Kamasah-Dickson added the examples Issue/PR related to examples label Feb 24, 2024
@Kamasah-Dickson Kamasah-Dickson changed the title next js Analytics cannot be used in app/layout in next 14.1.0 Vercel Analytics error: beforeSend function in app/layout requires use server in next 14.1.0 Feb 24, 2024
@Kamasah-Dickson
Copy link
Author

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

  1. 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

This comment has been minimized.

Sign in to view
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
examples Issue/PR related to examples
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rockgabi @Kamasah-Dickson