组件堆栈跟踪[TS + React]

问题描述

问题

我正在向我的客户端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-loader。另外，不使用源地图的人可以使用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,disableHostCheck: true,historyApiFallback: true,headers: {
        'Access-Control-Allow-Origin': '*','Access-Control-Allow-Headers': '*',};
};

解决方法

我最终使用error-overlay-webpack-plugin解决了我的问题。尽管它不能解决我的问题中的低级问题（为什么堆栈跟踪中的行号不正确？），却可以更简单地解决我的元问题（在dev中显示一个不错的堆栈跟踪）。道路。也许其他人也会发现此解决方案也很有用：

// webpack.config.js

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

const plugins = [
  ...
];

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

return {
  ...
  plugins,};