错误堆栈跟踪指向错误的行-Node.js + Webpack

Question

我正在使用Webpack将Node.js代码缩小到一个包中。引发错误时出现问题。错误的堆栈跟踪中显示错误的行。

例如，这是我的代码的屏幕截图，其中文件的最小化版本中发生错误：

这是运行压缩包时错误的堆栈跟踪：

[16:20:20] - ERROR - http://localhost:3000/generate/error-abc/
TypeError: Cannot read property 'c' of undefined
    at eo.get (/Users/dmitri/website/dist/app.js:1:61951)

如果我将缩小的捆绑文件转到此特定行，则可以看到它在实际错误之后稍有一点：

这是我的webpack.config.js的样子：

const path = require('path');
const webpack = require('webpack');
const nodeExternals = require('webpack-node-externals');
const SentryWebpackPlugin = require('@sentry/webpack-plugin');

const config = {
  target: 'node',
  optimization: {
    nodeEnv: false
  },
  node: {
    __dirname: false,
    __filename: false
  },
  entry: './server/app.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'app.js'
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js?$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [['latest-node', { target: '8', modules: false }]]
          }
        }
      }
    ]
  },
  plugins: [
    new SentryWebpackPlugin({
       release: process.env.SENTRY_RELEASE,
       include: './dist',
       setCommits: {
         repo: 'org/website',
         auto: true
       },
       configFile: 'sentry.properties'
    })
  ],
  devtool: 'source-map'
};

module.exports = env => {
  if (env === 'develop') {
    config.mode = 'development';
    config.watch = true;
    config.plugins.push(
      new NodemonPlugin({
        nodeArgs: ['--inspect']
      })
    );
  }

  if (env === 'production') {
    config.mode = 'production';
    config.watch = false;
  }

  config.plugins.push(
    new webpack.DefinePlugin({
      __DEV__: JSON.stringify(env === 'develop'),
      __PRODUCTION__: JSON.stringify(env === 'production')
    })
  );

  return config;
};

您可能会问为什么我对此感兴趣。答案是由于在Node.js stacktrace中报告了错误的行，Sentry在错误预览窗口中显示了错误的代码。这是使用调试模式在Sentry中框架的外观：

frame { colno: 60951,
  filename: '/Users/dmitri/website/dist/app.js',
  function: 'eo.get',
  lineno: 1,
  in_app: true,
  module: 'app',
  pre_context: [],
  context_line: '\'{snip} ),eo.get("/api/cache/",$r()),eo.post("/api/cache/",$r()) {snip}',
  post_context: [ '//# sourceMappingURL=app.js.map' ] }

任何人都可以对我说，如果这是正确的行为，或者我的Webpack配置有问题？谢谢！

Answer 1

这是正常行为，因为webkpack行为正在创建压缩的捆绑文件，您需要使用源映射映射源代码，而我们仅在开发阶段使用它，但是sentry为您是webpack的插件，这样您就可以跟进错误https://www.npmjs.com/package/@sentry/webpack-plugin