组件堆栈跟踪中的行号错误 [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

我尝试过的

• 这个答案建议不同的devtool设置，但我尝试过的设置都没有提供正确的行号。
• 这个答案建议更改retainLineswebpack 中的 babel 设置，但我没有使用 babel 来转译我的代码，我正在使用 ts-loader。另外，babel 文档建议这个选项对于不使用源映射的人来说是一个解决方法，这在这里不应该是一个问题。
• 这个答案建议使用外部库来解析堆栈跟踪。我尝试过，但它只是将现有跟踪解析为对象，并且行号仍然是错误的。
• React文档建议使用babel-plugin-transform-react-jsx-source，但同样，我没有使用 babel 来转译我的代码。我可以做？

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

错误边界.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;
  }
}

错误页.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来解决我的问题。虽然它没有解决我的问题中的低级问题（为什么堆栈跟踪中的行号不正确？），但它确实以更简单的方式解决了我的元问题（在开发中显示漂亮的堆栈跟踪）方式。也许其他人也会发现这个解决方案很有用：

// webpack.config.js

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

const plugins = [
  ...
];

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

return {
  ...
  plugins,
};