Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
@sentry/nextjs
SDK Version
7.89.0
Framework Version
7.89.0
Link to Sentry event
SDK Setup
if (process.env.NODE_ENV === 'production') {
nextConfig = withSentryConfig(
nextConfig,
{
// For all available options, see:
// https://github.com/getsentry/sentry-webpack-plugin#options
// Suppresses source map uploading logs during build
silent: true,
org: 'my-org',
project: 'my-app-nextjs',
},
{
// For all available options, see:
// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
// Upload a larger set of source maps for prettier stack traces (increases build time)
widenClientFileUpload: true,
// Transpiles SDK to be compatible with IE11 (increases bundle size)
transpileClientSDK: false,
// Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
tunnelRoute: '/monitoring',
// Hides source maps from generated client bundles
hideSourceMaps: true,
// Automatically tree-shake Sentry logger statements to reduce bundle size
disableLogger: true,
// Enables automatic instrumentation of Vercel Cron Monitors.
// See the following for more information:
// https://docs.sentry.io/product/crons/
// https://vercel.com/docs/cron-jobs
automaticVercelMonitors: false,
}
);
}
Steps to Reproduce
In my Next v14.1.0 app, I loaded a page, when a component seems to change inside the page, it caused an error from Sentry:
Class extends value undefined is not a constructor or null
This might be caused by a React Class Component being rendered in a Server Component, React Class Components only works in Client Components. Read more: https://nextjs.org/docs/messages/class-component-in-server-component
I have worked out the code that is the problem is within a server-only function which is loaded on every page to fetch user data from my API, this function is also where I am setting the user for Sentry.
import 'server-only';
import { cache } from 'react';
import { cookies } from 'next/headers';
import * as Sentry from '@sentry/nextjs';
/**
* Fetch user's data
* @returns {User | null}
*/
export const fetchUser = cache(async (): Promise<User | null> => {
const res = await fetch(`${API_ENDPOINT}/keyusers/?current=True`, {
headers: {
Cookie: `sessionid=${cookies().get('sessionid')?.value}`,
'Content-Type': 'application/json',
},
});
if (!res.ok) {
return null;
}
const data = await res.json();
Sentry.setUser({ id: data.results[0].id });
return data.results[0];
});
If I comment the Sentry parts out, everything works as expected.
This error doesn't occur on v7.88.0 of @sentry/nextjs, so am stuck on this version for now. I use this function in several places within my monorepo, so am unable to upgrade Sentry until I can find a solution here.
Expected Result
No errors in the console to occur
Actual Result
Metadata
Metadata
Assignees
Type
Projects
Status
Waiting for: Product Owner