Next.js Discord

Discord Forum

Is there a way to include source maps for Sentry for client components?

Answered
Australian Freshwater Crocodile posted this in #help-forum
Open in Discord
Australian Freshwater CrocodileOP
Hey guys!

I'm setting up Sentry right now and I want to have a readable stack trace so I've enabled source maps and they work fine for server components. But they don't work at all for client components. I tried to run the project in the development mode and source maps work fine. But once I build the project and run it, source maps don't work only for client components

Is there a workaround to enable source maps for client components as well?

I tried to enable productionBrowserSourceMaps but it didn't help. Actually, stack trace was the same even in the browser, not only in the Sentry
Answered by Australian Freshwater Crocodile
The problem is in the Next.js's [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups)

Issue in Sentry's repository — https://github.com/getsentry/sentry-javascript/issues/12256
View full answer

4 Replies

Australian Freshwater CrocodileOP
I use Next.js 14.2.3

Here is next.config.mjs:
import { withSentryConfig } from '@sentry/nextjs';
import createNextIntlPlugin from 'next-intl/plugin';

const withNextIntl = createNextIntlPlugin('./src/i18n');

/** @type {import('next').NextConfig} */
const nextConfig = {
  compiler: {
    styledComponents: true,
  },
  images: {
    loader: 'custom',
    loaderFile: './src/image-loader.ts',
  },
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  typescript: {
    // !! WARN !!
    // Dangerously allow production builds to successfully complete even if
    // your project has type errors.
    // !! WARN !!
    ignoreBuildErrors: true,
  },
  webpack(config) {
    // Grab the existing rule that handles SVG imports
    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));

    config.module.rules.push(
      // Reapply the existing rule, but only for svg imports ending in ?url
      {
        ...fileLoaderRule,
        test: /\.svg$/i,
        resourceQuery: /url/, // *.svg?url
      },
      // Convert all other *.svg imports to React components
      {
        test: /\.svg$/i,
        issuer: fileLoaderRule.issuer,
        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
        use: [{ loader: '@svgr/webpack', options: { icon: true } }],
      },
    );

    // Modify the file loader rule to ignore *.svg, since we have it handled now.
    fileLoaderRule.exclude = /\.svg$/i;

    return config;
  },
};

export default withSentryConfig(withNextIntl(nextConfig), {
  org: '###',
  project: '###',
  sentryUrl: '###', // Self-hosted
  widenClientFileUpload: true,
  hideSourceMaps: true,
  disableLogger: true,
});
And here is sentry.client.config.ts, sentry.edge.config.ts and sentry.server.config.ts (they are all the same):
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "###",
  environment: process.env.NEXT_PUBLIC_ENVIRONMENT_NAME,
  enabled: process.env.NODE_ENV !== 'development',
  tracesSampleRate: 1,
  debug: false,
});
Australian Freshwater CrocodileOP
The problem is in the Next.js's [Route Groups](https://nextjs.org/docs/app/building-your-application/routing/route-groups)

Issue in Sentry's repository — https://github.com/getsentry/sentry-javascript/issues/12256
Answer
Australian Freshwater CrocodileOP
Fixed has landed in the version 8.8.0 — https://github.com/getsentry/sentry-javascript/releases/tag/8.8.0