🐛 [BUG] Layout 错误边界问题

lynn1286 commented 10 months ago

🐛 bug 描述

📷 复现步骤 | Recurrence steps

配置 ErrorBoundary 后，在页面不报错的场景下，渲染的依旧是错误边界组件。

🏞 期望结果 | Expected results

💻 复现代码 | Recurrence code

© 版本信息

Ant Design Pro 版本: [e.g. 4.0.0]
umi 版本
浏览器环境
开发环境 [e.g. mac OS]

🚑 其他信息

lynn1286 commented 10 months ago

复现视频：

https://github.com/ant-design/ant-design-pro/assets/40122311/427f38bb-83eb-49b1-af7c-1a17686f0e0d

chenshuai2144 commented 10 months ago

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

根据描述和截图，可以看出这个问题是关于使用 Ant Design Pro 的 Layout 组件时出现的错误边界问题。下面是一个解决方案：

确认错误边界组件是否已正确配置。错误边界组件是用来处理子组件抛出的错误的组件。在 Ant Design Pro 中，可以使用 ErrorBoundary 组件作为错误边界组件。请确保 ErrorBoundary 组件已正确配置，如文档所示。
确认页面是否存在其他报错。根据描述和截图，可以看到在页面不报错的情况下，依然渲染的是错误边界组件。这可能是由于页面存在其他报错导致的。请检查页面中的其他组件是否存在报错，并尝试解决这些报错。
确认错误边界组件是否正确处理子组件的错误。在 Ant Design Pro 的错误边界组件中，可以使用 componentDidCatch 方法来处理子组件抛出的错误。请确保 componentDidCatch 方法已正确实现，并能够正确处理子组件的错误。
确认是否需要更新 Ant Design Pro 版本。根据描述中提供的信息，可以看到使用的是 Ant Design Pro 1.0.0 版本。在这个版本中可能存在一些已知的问题和 bug。请考虑升级 Ant Design Pro 到最新版本，以获取最新的修复和改进。

总结：解决这个问题需要确认错误边界组件的配置和实现是否正确，并检查页面中的其他报错。如果问题仍然存在，可以尝试升级 Ant Design Pro 版本。

chenshuai2144 commented 10 months ago

他还是个组件，不是组件实例。不然你没法捕获错误

import { Result } from 'antd';
import type { ErrorInfo } from 'react';
import React from 'react';

// eslint-disable-next-line @typescript-eslint/ban-types
class ErrorBoundary extends React.Component<
  { children?: React.ReactNode },
  { hasError: boolean; errorInfo: string }
> {
  state = { hasError: false, errorInfo: '' };

  static getDerivedStateFromError(error: Error) {
    return { hasError: true, errorInfo: error.message };
  }

  componentDidCatch(error: any, errorInfo: ErrorInfo) {
    // You can also log the error to an error reporting service
    // eslint-disable-next-line no-console
    console.log(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return (
        <Result
          status="error"
          title="Something went wrong."
          extra={this.state.errorInfo}
        />
      );
    }
    return this.props.children;
  }
}
const layout= ()=>{
   ErrorBoundary : ErrorBoundary 
}

GoldenLavine commented 6 months ago

antdesignpro 基本上都是函数组件，我也遇到了上述问题，在函数组件中如何处理，有详细点的过程么

521guyu commented 3 months ago

复现视频：

iShot_2024-01-08_17.46.03.mp4

您最后怎么解决的？

ant-design / ant-design-pro