From 9c39bb5f0010b94e5c4588c065409fea33def290 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Martin=20Sandstr=C3=B6m?= Date: Sun, 28 Mar 2021 18:09:45 +0200 Subject: [PATCH] Replace withSourceMaps with productionBrowserSourceMaps. Fixes #384 --- Company-Project/frontend/next.config.js | 164 ++++++++++-------- Company-Project/frontend/package.json | 1 - .../frontend/next.config.js | 164 ++++++++++-------- .../frontend/package.json | 1 - 4 files changed, 184 insertions(+), 146 deletions(-) diff --git a/Company-Project/frontend/next.config.js b/Company-Project/frontend/next.config.js index 4d9d3696d..8e50b3088 100644 --- a/Company-Project/frontend/next.config.js +++ b/Company-Project/frontend/next.config.js @@ -1,6 +1,91 @@ const withPlugins = require('next-compose-plugins'); -const withSourceMaps = require('@zeit/next-source-maps')(); -const SentryWebpackPlugin = require('@sentry/webpack-plugin'); +const SentryWebpackPlugin = require('@sentry/webpack-plugin') + +const { + NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN, + SENTRY_ORG, + SENTRY_PROJECT, + SENTRY_AUTH_TOKEN, + NODE_ENV, + VERCEL_GITHUB_COMMIT_SHA, + VERCEL_GITLAB_COMMIT_SHA, + VERCEL_BITBUCKET_COMMIT_SHA, + CIRCLE_SHA1, +} = process.env + +const COMMIT_SHA = + VERCEL_GITHUB_COMMIT_SHA || + VERCEL_GITLAB_COMMIT_SHA || + VERCEL_BITBUCKET_COMMIT_SHA || + CIRCLE_SHA1; + +process.env.SENTRY_DSN = SENTRY_DSN +const basePath = '' + +const nextConfig = { + productionBrowserSourceMaps: true, + env: { + // Make the COMMIT_SHA available to the client so that Sentry events can be + // marked for the release they belong to. It may be undefined if running + // outside of Vercel + NEXT_PUBLIC_COMMIT_SHA: COMMIT_SHA, + }, + webpack: (config, options) => { + // In `pages/_app.js`, Sentry is imported from @sentry/browser. While + // @sentry/node will run in a Node.js environment. @sentry/node will use + // Node.js-only APIs to catch even more unhandled exceptions. + // + // This works well when Next.js is SSRing your page on a server with + // Node.js, but it is not what we want when your client-side bundle is being + // executed by a browser. + // + // Luckily, Next.js will call this webpack function twice, once for the + // server and once for the client. Read more: + // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config + // + // So ask Webpack to replace @sentry/node imports with @sentry/browser when + // building the browser's bundle + if (!options.isServer) { + config.resolve.alias['@sentry/node'] = '@sentry/browser' + } + + // Define an environment variable so source code can check whether or not + // it's running on the server so we can correctly initialize Sentry + config.plugins.push( + new options.webpack.DefinePlugin({ + 'process.env.NEXT_IS_SERVER': JSON.stringify( + options.isServer.toString() + ), + }) + ) + + // When all the Sentry configuration env variables are available/configured + // The Sentry webpack plugin gets pushed to the webpack plugins to build + // and upload the source maps to sentry. + // This is an alternative to manually uploading the source maps + // Note: This is disabled in development mode. + if ( + SENTRY_DSN && + SENTRY_ORG && + SENTRY_PROJECT && + SENTRY_AUTH_TOKEN && + COMMIT_SHA && + NODE_ENV === 'production' + ) { + config.plugins.push( + new SentryWebpackPlugin({ + include: '.next', + ignore: ['node_modules'], + stripPrefix: ['webpack://_N_E/'], + urlPrefix: `~${basePath}/_next`, + release: COMMIT_SHA, + }) + ) + } + return config + }, + basePath, +} const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { return Object.assign({}, nextConfig, { @@ -22,76 +107,11 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { }); }; -const { - NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN, - SENTRY_ORG, - SENTRY_PROJECT, - SENTRY_AUTH_TOKEN, - NODE_ENV, - VERCEL_GITHUB_COMMIT_SHA, - VERCEL_GITLAB_COMMIT_SHA, - VERCEL_BITBUCKET_COMMIT_SHA, -} = process.env; - -const COMMIT_SHA = - VERCEL_GITHUB_COMMIT_SHA || - VERCEL_GITLAB_COMMIT_SHA || - VERCEL_BITBUCKET_COMMIT_SHA; - -process.env.SENTRY_DSN = SENTRY_DSN; -const basePath = ''; +// const withBundleAnalyzer = require('@next/bundle-analyzer')({ +// enabled: process.env.ANALYZE === 'true', +// }); module.exports = withPlugins([ - withSourceMaps({ - trailingSlash: true, - serverRuntimeConfig: { - rootDir: __dirname, - }, - webpack: (config, options) => { - // In `pages/_app.js`, Sentry is imported from @sentry/browser. While - // @sentry/node will run in a Node.js environment. @sentry/node will use - // Node.js-only APIs to catch even more unhandled exceptions. - // - // This works well when Next.js is SSRing your page on a server with - // Node.js, but it is not what we want when your client-side bundle is being - // executed by a browser. - // - // Luckily, Next.js will call this webpack function twice, once for the - // server and once for the client. Read more: - // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config - // - // So ask Webpack to replace @sentry/node imports with @sentry/browser when - // building the browser's bundle - if (!options.isServer) { - config.resolve.alias['@sentry/node'] = '@sentry/browser'; - } - - // When all the Sentry configuration env variables are available/configured - // The Sentry webpack plugin gets pushed to the webpack plugins to build - // and upload the source maps to sentry. - // This is an alternative to manually uploading the source maps - // Note: This is disabled in development mode. - if ( - SENTRY_DSN && - SENTRY_ORG && - SENTRY_PROJECT && - SENTRY_AUTH_TOKEN && - COMMIT_SHA && - NODE_ENV === 'production' - ) { - config.plugins.push( - new SentryWebpackPlugin({ - include: '.next', - ignore: ['node_modules'], - stripPrefix: ['webpack://_N_E/'], - urlPrefix: `~${basePath}/_next`, - release: COMMIT_SHA, - }) - ); - } - return config; - }, - basePath, - }), withSvgr, -]); + //withBundleAnalyzer, +], nextConfig); diff --git a/Company-Project/frontend/package.json b/Company-Project/frontend/package.json index 42d80a598..1cc706164 100644 --- a/Company-Project/frontend/package.json +++ b/Company-Project/frontend/package.json @@ -21,7 +21,6 @@ "@sentry/node": "^6.2.3", "@sentry/webpack-plugin": "^1.14.2", "@svgr/webpack": "^5.5.0", - "@zeit/next-source-maps": "0.0.4-canary.1", "i18next": "^19.9.2", "next": "10.0.9", "next-compose-plugins": "^2.2.1", diff --git a/{{cookiecutter.project_name}}/frontend/next.config.js b/{{cookiecutter.project_name}}/frontend/next.config.js index 4d9d3696d..8e50b3088 100644 --- a/{{cookiecutter.project_name}}/frontend/next.config.js +++ b/{{cookiecutter.project_name}}/frontend/next.config.js @@ -1,6 +1,91 @@ const withPlugins = require('next-compose-plugins'); -const withSourceMaps = require('@zeit/next-source-maps')(); -const SentryWebpackPlugin = require('@sentry/webpack-plugin'); +const SentryWebpackPlugin = require('@sentry/webpack-plugin') + +const { + NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN, + SENTRY_ORG, + SENTRY_PROJECT, + SENTRY_AUTH_TOKEN, + NODE_ENV, + VERCEL_GITHUB_COMMIT_SHA, + VERCEL_GITLAB_COMMIT_SHA, + VERCEL_BITBUCKET_COMMIT_SHA, + CIRCLE_SHA1, +} = process.env + +const COMMIT_SHA = + VERCEL_GITHUB_COMMIT_SHA || + VERCEL_GITLAB_COMMIT_SHA || + VERCEL_BITBUCKET_COMMIT_SHA || + CIRCLE_SHA1; + +process.env.SENTRY_DSN = SENTRY_DSN +const basePath = '' + +const nextConfig = { + productionBrowserSourceMaps: true, + env: { + // Make the COMMIT_SHA available to the client so that Sentry events can be + // marked for the release they belong to. It may be undefined if running + // outside of Vercel + NEXT_PUBLIC_COMMIT_SHA: COMMIT_SHA, + }, + webpack: (config, options) => { + // In `pages/_app.js`, Sentry is imported from @sentry/browser. While + // @sentry/node will run in a Node.js environment. @sentry/node will use + // Node.js-only APIs to catch even more unhandled exceptions. + // + // This works well when Next.js is SSRing your page on a server with + // Node.js, but it is not what we want when your client-side bundle is being + // executed by a browser. + // + // Luckily, Next.js will call this webpack function twice, once for the + // server and once for the client. Read more: + // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config + // + // So ask Webpack to replace @sentry/node imports with @sentry/browser when + // building the browser's bundle + if (!options.isServer) { + config.resolve.alias['@sentry/node'] = '@sentry/browser' + } + + // Define an environment variable so source code can check whether or not + // it's running on the server so we can correctly initialize Sentry + config.plugins.push( + new options.webpack.DefinePlugin({ + 'process.env.NEXT_IS_SERVER': JSON.stringify( + options.isServer.toString() + ), + }) + ) + + // When all the Sentry configuration env variables are available/configured + // The Sentry webpack plugin gets pushed to the webpack plugins to build + // and upload the source maps to sentry. + // This is an alternative to manually uploading the source maps + // Note: This is disabled in development mode. + if ( + SENTRY_DSN && + SENTRY_ORG && + SENTRY_PROJECT && + SENTRY_AUTH_TOKEN && + COMMIT_SHA && + NODE_ENV === 'production' + ) { + config.plugins.push( + new SentryWebpackPlugin({ + include: '.next', + ignore: ['node_modules'], + stripPrefix: ['webpack://_N_E/'], + urlPrefix: `~${basePath}/_next`, + release: COMMIT_SHA, + }) + ) + } + return config + }, + basePath, +} const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { return Object.assign({}, nextConfig, { @@ -22,76 +107,11 @@ const withSvgr = (nextConfig = {}, nextComposePlugins = {}) => { }); }; -const { - NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN, - SENTRY_ORG, - SENTRY_PROJECT, - SENTRY_AUTH_TOKEN, - NODE_ENV, - VERCEL_GITHUB_COMMIT_SHA, - VERCEL_GITLAB_COMMIT_SHA, - VERCEL_BITBUCKET_COMMIT_SHA, -} = process.env; - -const COMMIT_SHA = - VERCEL_GITHUB_COMMIT_SHA || - VERCEL_GITLAB_COMMIT_SHA || - VERCEL_BITBUCKET_COMMIT_SHA; - -process.env.SENTRY_DSN = SENTRY_DSN; -const basePath = ''; +// const withBundleAnalyzer = require('@next/bundle-analyzer')({ +// enabled: process.env.ANALYZE === 'true', +// }); module.exports = withPlugins([ - withSourceMaps({ - trailingSlash: true, - serverRuntimeConfig: { - rootDir: __dirname, - }, - webpack: (config, options) => { - // In `pages/_app.js`, Sentry is imported from @sentry/browser. While - // @sentry/node will run in a Node.js environment. @sentry/node will use - // Node.js-only APIs to catch even more unhandled exceptions. - // - // This works well when Next.js is SSRing your page on a server with - // Node.js, but it is not what we want when your client-side bundle is being - // executed by a browser. - // - // Luckily, Next.js will call this webpack function twice, once for the - // server and once for the client. Read more: - // https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config - // - // So ask Webpack to replace @sentry/node imports with @sentry/browser when - // building the browser's bundle - if (!options.isServer) { - config.resolve.alias['@sentry/node'] = '@sentry/browser'; - } - - // When all the Sentry configuration env variables are available/configured - // The Sentry webpack plugin gets pushed to the webpack plugins to build - // and upload the source maps to sentry. - // This is an alternative to manually uploading the source maps - // Note: This is disabled in development mode. - if ( - SENTRY_DSN && - SENTRY_ORG && - SENTRY_PROJECT && - SENTRY_AUTH_TOKEN && - COMMIT_SHA && - NODE_ENV === 'production' - ) { - config.plugins.push( - new SentryWebpackPlugin({ - include: '.next', - ignore: ['node_modules'], - stripPrefix: ['webpack://_N_E/'], - urlPrefix: `~${basePath}/_next`, - release: COMMIT_SHA, - }) - ); - } - return config; - }, - basePath, - }), withSvgr, -]); + //withBundleAnalyzer, +], nextConfig); diff --git a/{{cookiecutter.project_name}}/frontend/package.json b/{{cookiecutter.project_name}}/frontend/package.json index 42d80a598..1cc706164 100644 --- a/{{cookiecutter.project_name}}/frontend/package.json +++ b/{{cookiecutter.project_name}}/frontend/package.json @@ -21,7 +21,6 @@ "@sentry/node": "^6.2.3", "@sentry/webpack-plugin": "^1.14.2", "@svgr/webpack": "^5.5.0", - "@zeit/next-source-maps": "0.0.4-canary.1", "i18next": "^19.9.2", "next": "10.0.9", "next-compose-plugins": "^2.2.1",