使用 Sentry 的 Next.js 应用程序的源代码在生产中显示“_N_E”

Question

我正在开发一个 Next.js 应用程序，并集成了 Sentry 来进行错误跟踪。但是，在生产环境中部署应用程序时，源代码在 Google Chrome 的 Developer 中显示为“_N_E”。我正在寻找有关如何解决此问题的指导，确保源代码在生产中正确显示。

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

const nextConfig = {
  output: 'standalone',
  productionBrowserSourceMaps: true,
  trailingSlash: true,
  modularizeImports: {
    '@mui/icons-material': {
      transform: '@mui/icons-material/{{member}}',
    },
    '@mui/material': {
      transform: '@mui/material/{{member}}',
    },
    '@mui/lab': {
      transform: '@mui/lab/{{member}}',
    },
  },
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
  sentry: {
    hideSourceMaps: true,
    disableLogger: true,
    transpileClientSDK: true,
  },
};

const sentryWebpackPluginOptions = {
  silent: true,
  // Project details redacted
  tunnelRoute: "/monitoring",
};

module.exports = withSentryConfig(nextConfig, sentryWebpackPluginOptions);

尝试的解决方案：

确保 ProductionBrowserSourceMaps 在我的 Next.js 配置中设置为 true。 检查 Sentry 配置是否有任何可能隐藏源映射的错误配置。 搜索了类似的问题，但没有找到解决“_N_E”显示问题的方法。

问题：

有人遇到过这个问题或者可以深入了解为什么源代码在生产环境中显示为“_N_E”吗？任何有关调试或解决此问题的建议将不胜感激。

其他背景：

我添加了显示“_N_E”的 Google Chrome 源代码的屏幕截图。 （注意：在 Stack Overflow 上发帖时记得附上屏幕截图）。

Answer 1

在下一个配置中尝试这个

https://nextjs.org/docs/app/api-reference/next-config-js/productBrowserSourceMaps

对我有用