Next.js Sentry Sourcemap 大小过大答案

【问题标题】：Next.js Sentry Sourcemap size is too largeNext.js Sentry Sourcemap 大小过大
【发布时间】：2020-09-17 08:09:51
【问题描述】：

我正在尝试使用 next.js 的 sourcemap 功能来更好地调试 sentry，但是当我构建下一个应用程序时，它会尝试将大型 sourcemap 文件上传到 sentry。有什么问题吗？

另外我的 next.config.js 配置是这样的。

const SentryWebpackPlugin = require('@sentry/webpack-plugin');
const withSourceMaps = require('@zeit/next-source-maps')();

webpack: (config, { dev, isServer, buildId }) => {
    if (!isServer) {
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new SentryWebpackPlugin({
          include: './app/.next',
          ignore: ['node_modules'],
          urlPrefix: '~/_next',
          release: buildId,
        }),
      );
    }

    return config;}

【问题讨论】：

标签： webpack next.js source-maps sentry vercel

【解决方案1】：

npm 删除 @zeit/next-source-maps
npm i next@latest

nextjs 现在已内置配置以在生产中启用源映射 https://nextjs.org/docs/advanced-features/source-maps 我还建议忽略*.css.map 和哨兵不需要的其他文件，所以不要上传它们。

const SentryWebpackPlugin = require('@sentry/webpack-plugin');

...
module.exports = {
...
productionBrowserSourceMaps: process.env.NODE_ENV === 'production',
...
webpack: (config, { dev, isServer, buildId }) => {
    if (!isServer) {
      config.resolve.alias['@sentry/node'] = '@sentry/browser';
    }
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new SentryWebpackPlugin({
          include: './app/.next',
          ignore: ['node_modules', '*.css.map'],
          stripPrefix: ['webpack://_N_E/'],
          urlPrefix: '~/_next',
          release: buildId,
        }),
      );
    }

    return config;
}

【讨论】：