Error DX improvements

[ClarkXia]

Summary | 概述

No response

Motivation | 背景

The framework currently utilizes webpack-dev-server's default error overlay to display when errors occur. However, this default mechanism is often insufficient for diagnosing more complex issues, such as React hydration errors.
To enhance the development experience, the framework should implement an error diagnosis system that can identify specific types of errors and provide users with targeted suggestions for resolution.

Usage example | 使用示例

No response

Detailed design | 方案设计

Implement a custom, well-designed error overlay for the framework, potentially taking cues from solutions like react-error-overlay. Upon encountering an error, the framework should automatically perform an initial diagnosis, displaying both the error code and actionable suggestions for troubleshooting.
For complex issues, providing direct references to relevant documentation could greatly assist users in resolving their problems more efficiently.

Additional context | 额外信息

No response