Open chris-erickson opened 3 years ago
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 }]
];
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)
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?
Not your issue at all: https://github.com/getsentry/sentry-javascript/issues/3575#issuecomment-848954576
@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?
@senorgeno did you already try to clear the cache and .next folders?
Anyone got the solution on how to integrate sentry with next-compose-plugin?
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
);
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.
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
}
);
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:
And here's a pretty basic implementation of
next-compose-plugins
(I'm not well-versed in this so just wrapping this around the finalizednext-compose-plugins
caused webpack 4 instead of 5 to be used, etc.Any pointers are appreciated — I'll post a working setup once I get there 😬