如何允许抛出的错误冒泡？答案

【问题标题】：How can I allow thrown errors to bubble up?如何允许抛出的错误冒泡？
【发布时间】：2015-09-02 17:29:04
【问题描述】：

当我需要一个引发错误的模块时，它最终会返回一个空模块，而不是让该错误冒泡。

我的代码如下：

var module = require("./path/to/the-module");
doSomethingWithComponent(module.mainComponent);

当没有抛出错误时，模块看起来像：

{
  getters: []
  actions: []
  mainComponent: <TheComponent />
}

当出现错误时，它最终会像：

{}

破坏组件的示例如下所示：

var TheComponent = React.createClass({
  getDefaultProps() {
    return { x: this.props.x };
  }
});

使用 Chrome 的“捕获异常时暂停”选项，我发现异常正在发生但被捕获。我无法追踪它被抓到的地方。

这是发生错误的屏幕截图：

这是一个屏幕截图，突出显示了它是如何设置为空对象的：

我的 webpack 配置如下：

var _ = require('lodash');
var path = require('path');
var fs = require('fs');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var vendorLibs = {
  _: 'lodash',
  $: 'jquery',
  jQuery: 'jquery',
  bootstrap: 'bootstrap',
  key: 'mousetrap',
  React: 'react/addons',
  debug: 'debug',
  cx: 'classnames',
  Immutable: 'immutable',
  immstruct: 'immstruct',
  interact: 'interact.js'
};
var providePlugin = {
  Mixins: path.join(__dirname, 'src', 'app', 'mixins', 'index.js'),
  Util: path.join(__dirname, 'src', 'app', 'lib', 'Util.js'),
  reactor: path.join(__dirname, 'src', 'app', 'reactor.js')
};

var config = {
  entry: {
    app: './src/app/components/App.jsx',
    vendor: _.values(vendorLibs)
  },
  output: {
    path: './src/compiled/js',
    filename: 'app.js'
  },
  module: {
    loaders: [{
      test: /^(?!.*node_modules)+.+\.jsx?$/,
      loader: 'babel'
    }, {
      test: /\.json5$/,
      loader: 'json5-loader'
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer-loader')
    }, {
      test: /\.less$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!autoprefixer-loader!less-loader')
    }, {
      test: /\.png$/,
      loader: 'file'
    }, {
      test: /\.(ttf|eot|svg|woff2?)(\?v=(\d|\.)+)?$/,
      loader: 'file?name=../fonts/[hash].[ext]'
    }]
  },
  resolve: {
    root: [
      path.join(__dirname, 'src', 'app'),
      path.join(__dirname, 'src', 'app', 'components'),
      path.join(__dirname, 'src', 'less'),
      path.join(__dirname, 'src', 'icons')
    ],
    extensions: [
      '', '.jsx', '.js'
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.js'),
    new webpack.ResolverPlugin(
      new webpack.ResolverPlugin.DirectoryDescriptionFilePlugin(['main'])
    ),
    new webpack.ProvidePlugin(_.extend({}, vendorLibs, providePlugin)),
    new ExtractTextPlugin('../css/app.css', { allChunks: true })
  ]
};

module.exports = config;

这个应用程序也在使用 NuclearJS，并且需要这个组件是一个动作被调度的结果，所以它也有可能在那里捕获它。

我希望这个错误不会被捕获，这样我就可以发现它并解决它，而无需深入调试器。有谁知道我怎样才能做到这一点？

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

原来有一段带有 try/catch 的代码看起来很无辜，但却导致了这个问题。在我发现我可以解决问题之后。看起来像这样：

    try {
      require(`modules/${variableValue}/index`);
    } catch (err) {
      dbg(`Cannot load module ${variableValue}`);
    }

dbg 没有登录浏览器，因此我没有看到它。

【讨论】：