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

Question

问题
我正在向我的客户端 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 文档 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': '*',
      },
    },
  };
};

Answer 1

我最终使用了 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,
};