umi错误处理机制：优雅的错误捕获与用户提示
【免费下载链接】umi A framework in react community ✨ 
项目地址: https://gitcode.com/GitHub_Trending/um/umi
在现代前端开发中，优雅的错误处理机制是构建健壮应用的关键。umi作为React社区的主流框架，提供了一套完整的错误处理解决方案，帮助开发者实现从代码层面到用户界面的全方位错误管理。
错误处理的重要性
在复杂的Web应用中，错误不可避免。良好的错误处理机制能够：
- 提升用户体验：友好的错误提示而非白屏崩溃
- 便于调试：清晰的错误信息和堆栈跟踪
- 增强应用稳定性：防止局部错误影响整体功能
- 监控和分析：收集错误数据用于优化改进
umi的错误处理架构
umi的错误处理体系采用分层设计，从底层到表层提供全方位的错误管理：
React Error Boundary集成
umi深度集成React Error Boundary，提供组件级别的错误隔离：
// 自定义错误边界组件
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, error: null };
}
static getDerivedStateFromError(error) {
return { hasError: true, error };
}
componentDidCatch(error, errorInfo) {
// 错误上报逻辑
console.error('Component Error:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return (
<div className="error-boundary">
<h2>Something went wrong</h2>
<details>
{this.state.error?.toString()}
</details>
</div>
);
}
return this.props.children;
}
}
终端错误输出机制
umi提供了强大的终端错误输出功能，通过terminal对象实现多级错误提示：
import { terminal } from 'umi';
// 不同级别的错误输出
terminal.log('普通信息消息');
terminal.info('重要信息提示');
terminal.warn('警告信息');
terminal.error('错误信息提示');
// 结构化错误输出
terminal.error({
message: 'API请求失败',
code: 'NETWORK_ERROR',
details: { url: '/api/data', status: 404 }
});
网络请求错误处理
umi内置的请求库提供了完善的错误处理机制：
// 请求配置中的错误处理
export const request = {
errorConfig: {
errorHandler: (error: any, opts: any) => {
if (opts?.skipErrorHandler) return;
if (error.response) {
// 服务器返回错误
const { status, data } = error.response;
switch (status) {
case 400:
message.error('请求参数错误');
break;
case 401:
message.error('未授权，请重新登录');
break;
case 403:
message.error('禁止访问');
break;
case 404:
message.error('资源不存在');
break;
case 500:
message.error('服务器内部错误');
break;
default:
message.error('网络请求失败');
}
} else if (error.request) {
// 请求未收到响应
message.error('网络异常，请检查网络连接');
} else {
// 其他错误
message.error('请求配置错误');
}
}
}
};
构建时错误处理
umi在构建阶段通过多种方式捕获和处理错误：
TypeScript类型检查
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"noUnusedLocals": true,
"noUnusedParameters": true
}
}
ESLint代码规范
module.exports = {
rules: {
'no-console': 'warn',
'no-debugger': 'error',
'no-unused-vars': 'error'
}
};
错误监控与上报
umi支持集成各种错误监控服务：
// Sentry集成示例
import * as Sentry from '@sentry/react';
export function setupErrorMonitoring() {
Sentry.init({
dsn: 'your-sentry-dsn',
environment: process.env.NODE_ENV,
release: process.env.APP_VERSION,
integrations: [new Sentry.BrowserTracing()],
tracesSampleRate: 1.0,
});
}
// 自定义错误上报
export function reportError(error: Error, context?: any) {
if (process.env.NODE_ENV === 'production') {
// 生产环境上报
Sentry.captureException(error, { extra: context });
} else {
// 开发环境console输出
console.error('Error occurred:', error, context);
}
}
用户友好的错误界面
umi推荐使用友好的错误展示界面：
// 错误页面组件
const ErrorPage: React.FC<{ error: Error }> = ({ error }) => {
return (
<div style={{ padding: 24, textAlign: 'center' }}>
<h1>😵 页面遇到了一些问题</h1>
<p>我们正在努力修复中，请稍后再试</p>
{process.env.NODE_ENV === 'development' && (
<details style={{ marginTop: 20, textAlign: 'left' }}>
<summary>错误详情（仅开发环境可见）</summary>
<pre style={{ color: 'red', overflow: 'auto' }}>
{error.stack}
</pre>
</details>
)}
<button
style={{ marginTop: 20 }}
onClick={() => window.location.reload()}
>
重新加载页面
</button>
</div>
);
};
错误处理最佳实践
1. 分层错误处理策略
| 层级 | 处理方式 | 示例 |
|---|---|---|
| 组件级 | Error Boundary | 组件崩溃隔离 |
| 页面级 | 路由错误处理 | 404页面 |
| 应用级 | 全局错误监控 | Sentry集成 |
| 网络级 | 请求拦截器 | HTTP状态码处理 |
2. 错误分类处理
const ErrorTypes = {
NETWORK: 'network', // 网络错误
VALIDATION: 'validation', // 验证错误
BUSINESS: 'business', // 业务逻辑错误
SYSTEM: 'system', // 系统错误
UNKNOWN: 'unknown' // 未知错误
};
function handleError(error, type = ErrorTypes.UNKNOWN) {
switch (type) {
case ErrorTypes.NETWORK:
// 网络错误处理
break;
case ErrorTypes.VALIDATION:
// 验证错误处理
break;
case ErrorTypes.BUSINESS:
// 业务错误处理
break;
default:
// 默认错误处理
}
}
3. 开发与生产环境差异化处理
// 环境相关的错误处理配置
const errorConfig = {
development: {
showDetails: true, // 显示详细错误信息
consoleLog: true, // 控制台输出
reportToServer: false // 不上报服务器
},
production: {
showDetails: false, // 隐藏详细错误信息
consoleLog: false, // 控制台静默
reportToServer: true // 上报到监控服务
}
};
实战：完整的错误处理方案
下面是一个完整的umi应用错误处理配置示例：
// app.ts
import { history } from 'umi';
import { message, Modal } from 'antd';
import { request } from 'umi';
// 运行时配置
export async function getInitialState() {
return { user: null };
}
export const layout = {
logout: () => {
localStorage.removeItem('token');
history.push('/login');
},
};
// 请求配置
export const request: RequestConfig = {
timeout: 10000,
errorConfig: {
errorHandler: (error: any, opts: any) => {
if (opts?.skipErrorHandler) return;
const { response } = error;
if (response && response.status) {
const errorText = codeMessage[response.status] || response.statusText;
const { status, url } = response;
message.error(`请求错误 ${status}: ${url} - ${errorText}`);
} else if (!response) {
message.error('网络异常，无法连接到服务器');
}
},
},
requestInterceptors: [
(url: string, options: any) => {
const token = localStorage.getItem('token');
if (token) {
options.headers.Authorization = `Bearer ${token}`;
}
return { url, options };
},
],
responseInterceptors: [
(response: any) => {
const { data } = response;
if (data?.success === false) {
message.error(data.message || '操作失败');
throw new Error(data.message);
}
return response;
},
],
};
// 错误边界组件
export function rootContainer(container: any) {
return React.createElement(ErrorBoundary, null, container);
}
总结
umi的错误处理机制提供了从构建时到运行时、从开发到生产的全方位解决方案。通过合理的错误分层、友好的用户提示和完善的监控上报，开发者可以构建出更加健壮和用户友好的React应用。
记住良好的错误处理不仅是技术问题，更是用户体验的重要组成部分。在umi的生态体系中，充分利用其提供的错误处理能力，可以让你的应用在面对各种异常情况时都能保持优雅和稳定。
【免费下载链接】umi A framework in react community ✨ 项目地址: https://gitcode.com/GitHub_Trending/um/umi
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
