Client Errors are not reported when using Nextjs `assetPrefix` property

[omerman]

Environment

SaaS (https://sentry.io/)

Steps to Reproduce

1. Create nextjs app
2. Have the static content served from cdn. and define the assetPrefix property in the nextjs config to point to the cdn.
3. (Define Sentry normally most basic)
4. Add a simple button that throws expection (The most basic, just like in the docs)

Expected Result

Error is Reported to Sentry.

Actual Result

Error is NOT Reported to Sentry. I would attach screenshots but its fairly straightforward.. nothing to see.

Product Area

Unknown

Link

No response

DSN

https://7c175315b02a013fcdc288ef873065e2@o4507547855486976.ingest.de.sentry.io/4507547861647440

Version

No response

[getsantry[bot]]

Auto-routing to @getsentry/product-owners-issues for triage ⏲️

[chargome]

Hey @omerman thanks for writing in!

It's a bit hard to track down your issue without context, could you please provide some more info on your setup:

• SDK version, Next.js Version
• your sentry config files (next.config, sentry.client.config)
• maybe a link to a reproducible repo

[omerman]

Hey sorry for the delay: "@sentry/nextjs": "^8", "next": "15.0.0-canary.56"

// sentry client
import * as Sentry from '@sentry/nextjs';

Sentry.init({
  dsn: 'https://7c175315b02a013fcdc288ef873065e2@o4507547855486976.ingest.de.sentry.io/4507547861647440',

  // Adjust this value in production, or use tracesSampler for greater control
  tracesSampleRate: 1,

  // Setting this option to true will print useful information to the console while you're setting up Sentry.
  // debug: true,

  environment: process.env.NEXT_PUBLIC_NX_TARGET_ENV,
  // debug: true,
});

// next config
//@ts-check

// eslint-disable-next-line @typescript-eslint/no-var-requires
const { composePlugins, withNx } = require('@nx/next');
const { withSentryConfig } = require('@sentry/nextjs');
require('../../core/src/next/utils/prepareEnv'); // validate env variables.

/**
 * @type {import('@nx/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },

  eslint: {
    ignoreDuringBuilds: false,
  },
  compiler: {
    emotion: true,
  },
  images: {
    remotePatterns: [{ hostname: 'nagnu.s3.eu-north-1.amazonaws.com' }],
  },
  basePath: process.env['NEXT_PUBLIC_BASE_PATH'] || undefined,
  async redirects() {
    if (
      process.env.IS_LOCAL_FE === 'true' ||
      process.env.NEXT_PUBLIC_NX_TARGET_ENV === 'development'
    ) {
      return [
        {
          source: '/Images/:path*',
          destination: `${process.env.NEXT_PUBLIC_SERVER_SIDE_BASE_URL}/Images/:path*`,
          permanent: true,
          basePath: false,
        },
      ];
    } else {
      return [];
    }
  },
  async rewrites() {
    /** @type {import('next/dist/lib/load-custom-routes').Rewrite[]} */
    const beforeFiles = [];

    if (process.env.IS_LOCAL_FE === 'true') {
      beforeFiles.push({
        source: '/api/:path*',
        destination: `${process.env.NEXT_PUBLIC_SERVER_SIDE_BASE_URL}/api/:path*`,
        basePath: false,
      });
      beforeFiles.push({
        source: '/Search/:path*',
        destination: `${process.env.NEXT_PUBLIC_SERVER_SIDE_BASE_URL}/Search/:path*`,
        basePath: false,
      });
      beforeFiles.push({
        source: '/sounds/:path*',
        destination: `${process.env.NEXT_PUBLIC_SERVER_SIDE_BASE_URL}/sounds/:path*`,
        basePath: false,
      });
      beforeFiles.push({
        source: '/chords-map.json',
        destination: `${process.env.NEXT_PUBLIC_SERVER_SIDE_BASE_URL}/chords-map.json`,
        basePath: false,
      });
    }

    return {
      beforeFiles,
      afterFiles: [],
      fallback: [],
    };
  },
  experimental: {
    optimizePackageImports: ['@mui/material', 'lodash-es', 'react-icons'],
    // ppr: true,
  },
  assetPrefix: `${process.env.NEXT_PUBLIC_ASSET_PREFIX}${process.env['NEXT_PUBLIC_BASE_PATH']}`,
  compress: process.env.IS_LOCAL_FE === 'true' ? true : false,
};

const plugins = [
  // Add more Next.js plugins to this list if needed.
  withNx,
  withSentryConfigWrap({}),
];

module.exports = composePlugins(...plugins)(nextConfig);

/**
  @param {import('@sentry/nextjs/build/types/config/types').SentryBuildOptions} overrides 
*/
function withSentryConfigWrap(overrides) {
  /** 
    @param {import('@nx/next/plugins/with-nx').WithNxOptions} nextConfig
  */
  return (nextConfig) => {
    return withSentryConfig(nextConfig, {
      telemetry: false,
      // For all available options, see:
      // https://github.com/getsentry/sentry-webpack-plugin#options

      org: 'omer-fl',
      project: 'javascript-nextjs',

      silent: false,

      // 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,

      // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
      // This can increase your server load as well as your hosting bill.
      // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
      // side errors will fail.
      // tunnelRoute: "/monitoring",

      // Hides source maps from generated client bundles
      hideSourceMaps: true,

      // Automatically tree-shake Sentry logger statements to reduce bundle size
      disableLogger: true,

      authToken: process.env.SENTRY_AUTH_TOKEN,

      sourcemaps: {
        // For now sense it's not working for some reason - Maybe a windows issue.
        disable: true,
      },
      // debug: true,
      ...overrides,
    });
  };
}

** Can't have a link to a reproducible repo, sense it will require me to supply an assetPrefix to nextjs. Just to make sure you understand, Sentry scripts are also being served from this cdn location so i suspect it doesnt understand the context in which is running on and therefore does not deliver the errors(?)

[andreiborza]

hi @omerman could you please set debug: true in your sentry configs and disableLogger: false in your next conifg and paste some debug logs when running into your issue? Are you getting anything at all showing up in Sentry?

Just to make sure you understand, Sentry scripts are also being served from this cdn location so i suspect it doesnt understand the context in which is running on and therefore does not deliver the errors(?)

Just to make sure I understand correctly, are you self hosting our sentry bundle via your CDN?

[omerman]

@andreiborza Ill put it later on today and post the logs.

And to answer the question, Nextjs has the property assetPrefix, when you set it, all of the static js files will be served from the cdn. So the sentry client code will also come from the cdn.

and to clarify, when I omit the assetPrefix, the errors are correctly reported to sentry and I see a network request each time an error occours.