Is there an existing issue for this?
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
https://the-key.sentry.io/issues/4917806857/?project=4506501905252352&query=is%3Aunresolved&referrer=issue-stream&statsPeriod=14d&stream_index=0
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
Is there an existing issue for this?
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
https://the-key.sentry.io/issues/4917806857/?project=4506501905252352&query=is%3Aunresolved&referrer=issue-stream&statsPeriod=14d&stream_index=0
SDK Setup
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:
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.
If I comment the Sentry parts out, everything works as expected.
This error doesn't occur on
v7.88.0of@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