反应错误显示在控制台而不是窗口中

Question

当我使用 CRA 应用程序和大多数 React 应用程序时，代码中的错误将导致浏览器显示错误屏幕而不是应用程序。

我正在处理的遗留代码没有这样做。一个基本上会导致应用程序崩溃的错误只会显示一个空白屏幕（黑屏，我想这是我们的背景颜色），您只能通过打开浏览器的开发控制台来了解发生了什么。

该项目是由 CRA 制作的，但已是很久以前的事了。它不包括任何地方的 react-scripts。

如何将其设置回“正常”，以便错误显示在浏览器窗口本身中？

这是我当前的 webpack 配置

const os = require('os');
const path = require('path');
const ip = require('my-local-ip');
const colors = require('colors');
const process = require('process');
const webpack = require('webpack');
const states = require('./util/state-spoof');
const childProcess = require('child_process');
const PlayerIdPlugin = require('./plugins/PlayerIdPlugin');
const eslintFormatter = require('react-dev-utils/eslintFormatter');
const MiniCssExtractPlugin = require('extract-css-chunks-webpack-plugin');

const envPort = process.env.PORT;
const port = envPort ? envPort : 3000;

const spoof = states[process.env.SPOOF || 'NH'];

const forcedProdAPI = process.env.FORCE_PROD_API || false;

const platform = os.platform().toLowerCase();

const isLinux = platform === 'linux';
const isWindows = platform === 'win32' || platform === 'win64';
if (!process.env.NODE_ENV) process.env.NODE_ENV = 'development';
const mode = process.env.NODE_ENV;
const sessionKey = process.env.SESSION_KEY || '';

const linter = {
  test: /\.(js|jsx|mjs)$/,
  enforce: 'pre',
  use: [
    {
      options: {
        formatter: eslintFormatter,
        eslintPath: require.resolve('eslint'),

      },
      loader: require.resolve('eslint-loader'),
    },
  ],
  include: path.resolve(__dirname, 'src'),
};

const imgLoad = {
  test: /\.(gif|png|jpe?g)$/i,
  loader: require.resolve('url-loader'),
  options: {
    limit: 10000,
    name: 'static/media/[name].[hash:8].[ext]',
  },
};

const jsLoad = {
  test: /\.(js|jsx|mjs)$/,
  loader: require.resolve('babel-loader'),
  options: {
    cacheDirectory: true,
  },
  exclude: /(node_modules)/,
};

const tsLoad = {
  test: /\.tsx?$/,
  use: 'ts-loader',
  exclude: /node_modules/,
};

const sassLoad = {
  test: /\.s?(a|c)ss$/,
  use: [
    mode.includes('dev') ? 'style-loader' : MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
    },
    {
      loader: 'sass-loader',
    },
  ],
};

const fileLoad = {
  exclude: [/\.(js|jsx|mjs)$/, /\.html$/, /\.json$/],
  loader: require.resolve('file-loader'),
  options: {
    name: 'static/media/[name].[hash:8].[ext]',
  },
};

module.exports = {
  mode: mode,
  stats: 'errors-only',
  entry: './src/browser/index.js',
  output: {
    path: path.resolve(__dirname, '..', 'src', 'public'),
    filename: 'static/scripts/bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      linter,
      { oneOf: [imgLoad, jsLoad, tsLoad, sassLoad, fileLoad] },
    ],
  },
  plugins: [
    new PlayerIdPlugin({
      output: path.resolve(
        __dirname, '..', 'src', 'browser', 'services', 'PlayerIDHelper.js'
      ),
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(mode),
      'process.env.FORCE_PROD_API': JSON.stringify(forcedProdAPI),
      'process.env.SESSION_KEY': JSON.stringify(sessionKey),
      'process.env.NERF_THIRD_PARTY': 'false',
      'process.env.BROWSER': 'true',
      'process.env.SPOOF': JSON.stringify(spoof),
    }),
    new MiniCssExtractPlugin({
      filename: 'static/styles/main.css',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    host: '0.0.0.0',
    port: port,
    disableHostCheck: true,
    quiet: true,
    compress: true,
    contentBase: path.resolve(__dirname, '..', 'src', 'public'),
    historyApiFallback: true,
    before: () => {
      console.log(
        colors.bold.white(
          `Server currently listening :\n`
        ) +
        colors.reset.yellow(
          `\nMachine access: http://localhost:${port}\n`
        ) +
        colors.reset.yellow(
          `Network access: http://${ip()}:${port}`
        )
      );

      if (!isLinux && !isWindows) {
        childProcess.execSync('ps cax | grep "Google Chrome"');
        childProcess.execSync(
          `osascript chrome.applescript "${encodeURI(
            `http://localhost:${port}`
          )}"`,
          {
            cwd: path.resolve(__dirname),
            stdio: 'ignore',
          }
        );
      }
    },
  },
};