Next.js Discord

Discord Forum

Sentry in Standalone Build

Answered
Thai posted this in #help-forum
Open in Discord
ThaiOP
I am trying to use sentry with next.js and a standalone build. Once I ran the sentry wizard and it updated the next.config.js but broke the standalone build.

I had to change the next.config.js to next.config.cjs and this is the config:

/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
    output: "standalone"    
};

export default config;


// Injected content via Sentry wizard below

const { withSentryConfig } = require("@sentry/nextjs");

module.exports = withSentryConfig(
  module.exports,
  {
    // 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-project",
  },
  {
    // 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: true,

    // 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: true,
  }
);


It seems to be ignoring the standalone because when I build it, it no longer creates the standalone folder.
Answered by Ray
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
// await import("./src/env.js");
const { withSentryConfig } = await import("@sentry/nextjs");

/** @type {import("next").NextConfig} */
const nextConfig = {
  output: "standalone",
};

// Injected content via Sentry wizard below

export default 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-project",
});
View full answer

29 Replies

@Thai I am trying to use sentry with next.js and a standalone build. Once I ran the sentry wizard and it updated the next.config.js but broke the standalone build. I had to change the `next.config.js` to `next.config.cjs` and this is the config: js /** * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful * for Docker builds. */ await import("./src/env.js"); /** @type {import("next").NextConfig} */ const config = { output: "standalone" }; export default config; // Injected content via Sentry wizard below const { withSentryConfig } = require("@sentry/nextjs"); module.exports = withSentryConfig( module.exports, { // 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-project", }, { // 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: true, // 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: true, } ); It seems to be ignoring the `standalone` because when I build it, it no longer creates the standalone folder.
Ray
should be passing config to first arg of withSentryConfig instead of module.exports
module.exports = withSentryConfig(
  config,
  {
    // 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-project",
  },
  {
    // 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: true,

    // 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: true,
  }
);
and remove the export default config; too
ThaiOP
ok thanks, let me give it a try
ThaiOP
hmm I did that and it isn't creating the standalone either
Is it something due to me renaming the file to .cjs?
Ray
what version of nextjs are you using?
ThaiOP
14.0.4
I adjusted the config to this
await import("./src/env.js");

/** @type {import("next").NextConfig} */
const config = {
    output: "standalone"    
};

// Injected content via Sentry wizard below
const { withSentryConfig } = require("@sentry/nextjs");

module.exports = withSentryConfig(
  config,
  // Sentry Config here
);

And still got the same result
Ray
cjs not work for me too but mjs does
ThaiOP
let me try that
Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error
Ray
/**
 * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
 * for Docker builds.
 */
// await import("./src/env.js");
const { withSentryConfig } = await import("@sentry/nextjs");

/** @type {import("next").NextConfig} */
const nextConfig = {
  output: "standalone",
};

// Injected content via Sentry wizard below

export default 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-project",
});
Answer
Ray
use export default
ThaiOP
running the build now, when does it move to the standalone folder?
the build takes a few mins, so wondering if it moves it last
Ray
let me see
when the build finished
ThaiOP
ok I will keep you posted, it is still building
thanks for the help regardless, this is the kind of stuff that drives me nuts in node
Ray
np, does it work for you?
ThaiOP
still building
it is a huge project
Ray
big site lol
oh
ThaiOP
yeah takes about 5-7 mins on a M1 Max mbp
that worked
thanks so much
@Thai thanks so much
Ray
cool, please mark solutions
ThaiOP
will do