组件堆栈跟踪中的错误行号 [TS + React]答案

【问题标题】：Wrong line numbers in component stack trace [TS + React]组件堆栈跟踪中的错误行号 [TS + React]
【发布时间】：2020-12-01 13:41:40
【问题描述】：

问题

我正在向我的客户端 React 应用程序添加错误边界。在开发中，我想在浏览器窗口中显示带有堆栈跟踪的错误，类似于 create-react-app 或 nextjs 的错误覆盖。使用 webpack 的 devtool 选项，我能够生成具有正确文件名但行号错误的堆栈跟踪。

// This is what renders in the browser window
Error: You got an error!
    at ProjectPage (webpack-internal:///./src/pages/ProjectPage.tsx:96:11) // <-- 96 is the wrong line

// This is what shows up in the console
Uncaught Error: You got an error!
    at ProjectPage (ProjectPage.tsx?8371:128) // <-- 128 is the correct line

我的尝试

This answer 建议不同的 devtool 设置，但我尝试过的设置都没有提供正确的行号。
This answer 建议更改 retainLines babel 设置 webpack，但我没有使用 babel 来编译我的代码，我正在使用 ts-装载机。此外，babel docs suggest this option is a workaround 供不使用源地图的人使用，这在这里不应该成为问题。
This answer 建议使用外部库来解析堆栈跟踪。我试过了，但它只是将现有跟踪解析为对象，并且行号仍然错误。
React docs 建议使用babel-plugin-transform-react-jsx-source 但同样，我没有使用 babel 转译我的代码。我应该吗？

我不确定这是否是 ts-loader、webpack 或其他一些我不了解源映射的基本步骤的问题。在componentDidCatch 中设置调试器并检查错误会给我错误的行号，但是当它被记录到控制台时它是正确的。控制台似乎有一个额外的步骤来映射正确的行号；这是我需要手动执行的操作吗？

ErrorBoundary.tsx

class ErrorBoundary extends React.Component {
  state = {
    error: null,
  };

  static getDerivedStateFromError(error) {
    return {
      error,
    };
  }

  componentDidCatch(error, errorInfo) {
    // Line numbers are wrong when inspecting in the function, but correct when logged to the console.
    console.log(error, errorInfo);
  }

  render() {
    return this.state.error ?
      <ErrorPage error={this.state.error} /> :
      this.props.children;
  }
}

ErrorPage.tsx

const ErrorPage = ({ error }) => {
  if (__DEV__) {    
    return (
      <Layout title={error.name}>
        <h1>{error.name}: {error.message}</h1>
        <pre>{error.stack}</pre>
      </Layout>
    );
  }

  // Display a nicer page in production.
};

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "esModuleInterop": true,
    "jsx": "react",
    "lib": ["es2015", "dom"],
    "module": "commonjs",
    "sourceMap": true,
    "target": "es6"
  }
}

webpack.config.js

module.exports = (env, argv) => {    
  return {
    mode: isProduction ? 'production' : 'development',
    output: {
      path: path.join(__dirname, env.output_path),
      filename: 'app.bundle.js',
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
    },
    devtool: isProduction ? 'source-map' : 'eval-source-map',
    entry: ['./src/index.tsx'],
    module: {
      rules: [
        {
          test: /\.ts(x?)$/,
          exclude: /node_modules/,
          loader: 'ts-loader',
        },
        ...
      ],
    },
    devServer: {
      contentBase: path.join(__dirname, env.output_path),
      disableHostCheck: true,
      historyApiFallback: true,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Headers': '*',
      },
    },
  };
};

【问题讨论】：

在 webpack 配置中更改源地图类型的实验
@frozen：谢谢，我已经做到了。我没有详尽地尝试每一个，但我确实尝试了所有我看到的建议。你有什么特别推荐的吗？
运气好吗？有同样的问题
@tmm1：没让它工作。我最终使用了 webpack 的错误覆盖插件：npm.im/error-overlay-webpack-plugin

标签： reactjs typescript webpack ts-loader

【解决方案1】：

我最终使用error-overlay-webpack-plugin 来解决我的问题。虽然它没有解决我的问题中的低级问题（为什么堆栈跟踪中的行号不正确？），但它确实以更简单的方式解决了我的元问题（在开发中显示一个不错的堆栈跟踪）大大地。也许其他人也会发现这个解决方案也很有用：

// webpack.config.js

const ErrorOverlayPlugin = require('error-overlay-webpack-plugin');

const plugins = [
  ...
];

if (!isProduction) {
  plugins.push(new ErrorOverlayPlugin());
}

return {
  ...
  plugins,
};

【讨论】：