如何解决组件堆栈跟踪[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,};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。