Javascript 错误stacktrace指向错误的行-Node.js+；网页包

我正在使用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' ] }

---

谁能告诉我这是一个正确的行为还是我的网页配置有问题？谢谢

这是正常行为，因为

webkpack

行为正在创建压缩的捆绑文件，您需要的是使用源代码映射映射源代码，我们仅在开发阶段使用它，但是

sentry

为您提供了一个

webpack

插件，这样您就可以跟踪您的错误了

我正在使用sentry webpack插件，正如您在我的webpack配置中看到的，我正在使用

源代码映射作为devtool。不幸的是，哨兵将错误映射到错误的线路上。这就是我第一眼就怀疑stacktrace的原因。但正如我看到的，您没有实现Sentry网页包插件这是Sentry的一个例子，