How to use with new Sentry integration

[chris-erickson]

Sentry has a great integration for Next.js but it assumes you're using a typical config. Is this something that's possible to make work with next-compose-plugins?

Here's a sample config they generate as a starting point:

// This file sets a custom webpack configuration to use your Next.js app
// with Sentry.
// https://nextjs.org/docs/api-reference/next.config.js/introduction
// https://docs.sentry.io/platforms/javascript/guides/nextjs/

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

const moduleExports = {
  // Your existing module.exports
};

const SentryWebpackPluginOptions = {
  // Additional config options for the Sentry Webpack plugin. Keep in mind that
  // the following options are set automatically, and overriding them is not
  // recommended:
  //   release, url, org, project, authToken, configFile, stripPrefix,
  //   urlPrefix, include, ignore
  // For all available options, see:
  // https://github.com/getsentry/sentry-webpack-plugin#options.
};

// Make sure adding Sentry options is the last code to run before exporting, to
// ensure that your source maps include changes from all other Webpack plugins
module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

And here's a pretty basic implementation of next-compose-plugins (I'm not well-versed in this so just wrapping this around the finalized next-compose-plugins caused webpack 4 instead of 5 to be used, etc.

const withPlugins = require('next-compose-plugins');
const nextImages = require('next-images');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === '1',
});

const nextConfig = {
  future: {
    webpack5: true,
  },
  images: {
    domains: ['example.com'],
  },
};

module.exports = withPlugins(
  [
    [
      nextImages,
      {
        esModule: true,
      },
    ],
    [withBundleAnalyzer],
  ],
  nextConfig
);

Any pointers are appreciated — I'll post a working setup once I get there 😬

[vaniyokk]

Same question.
I tried to use it like that, but suddenly sentry plugin configuration options are not applied

const nextPlugins = [
  withNextTranslate,
  withBundleAnalyzer,
  [withSentryConfig, { silent: true }]
];

[FlorinSenoner]

This is probably something that the sentry team needs to address by implementing the api that next-compose-plugin uses. In the meantime you can do something like:

const nextPlugins = [
  ...otherPlugins,
  (nextConfig) => withSentryConfig(nextConfig, SentryWebpackPluginOptions),
]

module.exports = withPlugins(nextPlugins, nextConfig)

[chris-erickson]

Thanks! I did this and it seems to work but is causing

ModuleNotFoundError: Module not found: Error: Can't resolve '@zeit/next-sass' in '/opt/build/repo/node_modules/next/dist/build'

If I just remove the line (nextConfig) => withSentryConfig(nextConfig, SentryWebpackPluginOptions), the issue goes away. Thoughts on where the responsibility is with this?

[chris-erickson]

Not your issue at all: getsentry/sentry-javascript#3575 (comment)

[senorgeno]

@FlorinSenoner your workaround helps for getting my site to run as expected, however, I am getting Error: Cannot find module..... .next/server/sentry/initServerSDK.js. Anyone else seeing this?

[FlorinSenoner]

@senorgeno did you already try to clear the cache and .next folders?

[disguised-uchiha]

Anyone got the solution on how to integrate sentry with next-compose-plugin?

[disguised-uchiha]

To everyone still wondering. I used it like this and It worked for me.

module.exports = withSentryConfig(
  withPlugins(
    [
      [withAntdLess, antdConfig()],
      withImages
      // [withSentryConfig, SentryWebpackPluginOptions]
    ],
    nextConfig
  ),
  SentryWebpackPluginOptions
);

[amir04lm26]

I'm still facing this issue in next@13.
I've managed to fix it using this snippet:

const { extend } = require('next-compose-plugins')

...

module.exports = async (phase, defaults) => {
  return extend(withSentryConfig(nextConfig, SentryWebpackPluginOptions)).withPlugins(
    [[withBundleAnalyzer]],
    nextConfig
  )(phase, defaults)
}

It was overriding my webpack's config so my styles couldn't load.

[mdirshaddev]

module.exports = withSentryConfig(
withPlugins(
[
[withAntdLess, antdConfig()],
withImages
// [withSentryConfig, SentryWebpackPluginOptions]
],
nextConfig
),
SentryWebpackPluginOptions
);

Works for me too. I am trying to build a PWA with Sentry for Application Monitoring. This is my config

const withPlugins = require('next-compose-plugins');
const { withSentryConfig } = require('@sentry/nextjs');
const { version } = require('./package.json');
const withPWA = require('next-pwa');

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com' // GitHub Avatar
      },
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com' // Cloudinary
      },
      {
        protocol: 'https',
        hostname: 'i.scdn.co' // Spotify Album
      },
      {
        protocol: 'https',
        hostname: 'images.unsplash.com' // Unsplash Images
      }
    ]
  }
};

module.exports = withSentryConfig(
  withPlugins(
    [
      [
        withPWA,
        {
          dest: 'public', // Static Assets directory
          swSrc: 'src/services/worker/service-worker.ts' // Custom service worker
        }
      ]
    ],
    nextConfig
  ),
  {
    // For all available options, see:
    // https://github.com/getsentry/sentry-webpack-plugin#options

    // Suppresses source map uploading logs during build
    silent: true,

    org: process.env.SENTRY_ORG,
    project: process.env.SENTRY_PROJECT,
    authToken: process.env.SENTRY_AUTH_TOKEN
  },
  {
    // 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
  }
);