当前位置：首页 > news >正文

前端错误处理最佳实践：别让你的应用崩溃了！

news 2026/8/11 4:36:43

前端错误处理最佳实践：别让你的应用崩溃了！

毒舌时刻

错误处理？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便加个try-catch就能解决所有错误？别做梦了！到时候你会发现，错误处理的代码比业务代码还多，维护起来比业务代码还麻烦。

你以为console.error就能记录所有错误？别天真了！console.error只会在控制台打印错误，用户根本看不到，也无法帮助你分析错误原因。还有那些所谓的错误监控工具，看起来高大上，用起来却各种问题。

为什么你需要这个

提高用户体验：良好的错误处理可以避免应用崩溃，提高用户体验。
减少生产环境问题：及时捕获和处理错误可以减少生产环境中的问题。
便于调试：良好的错误处理可以帮助你更快地定位和解决问题。
提高代码可靠性：错误处理可以提高代码的可靠性，减少意外情况的发生。
监控和分析：错误处理可以帮助你监控和分析应用的运行状态，发现潜在问题。

反面教材

// 1. 忽略错误 function fetchData() { fetch('/api/data') .then(response => response.json()) .then(data => console.log(data)); } // 2. 过度使用try-catch function processData(data) { try { if (data) { try { const processedData = data.map(item => { try { return item.value * 2; } catch (error) { console.error('Error processing item:', error); return 0; } }); return processedData; } catch (error) { console.error('Error mapping data:', error); return []; } } else { return []; } } catch (error) { console.error('Error processing data:', error); return []; } } // 3. 错误信息不明确 function calculateTotal(price, quantity) { if (typeof price !== 'number') { throw new Error('Invalid input'); } return price * quantity; } // 4. 缺少全局错误处理 window.addEventListener('error', (event) => { console.error('Global error:', event.error); }); // 5. 不记录错误 function login(username, password) { if (!username || !password) { throw new Error('Username and password are required'); } // 登录逻辑 }

问题：

忽略错误，导致应用崩溃
过度使用try-catch，导致代码变得臃肿
错误信息不明确，难以定位问题
缺少全局错误处理，无法捕获所有错误
不记录错误，无法分析错误原因

正确的做法

错误处理策略

// 1. 基本错误处理 async function fetchData() { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); return data; } catch (error) { console.error('Error fetching data:', error); throw error; } } // 2. 自定义错误类 class ApiError extends Error { constructor(message, status) { super(message); this.name = 'ApiError'; this.status = status; } } async function fetchUserData(id) { try { const response = await fetch(`/api/users/${id}`); if (!response.ok) { throw new ApiError(`Failed to fetch user: ${response.status}`, response.status); } const data = await response.json(); return data; } catch (error) { if (error instanceof ApiError) { console.error('API error:', error.message); } else { console.error('Unexpected error:', error); } throw error; } } // 3. 错误边界（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('Error caught by boundary:', error, errorInfo); } render() { if (this.state.hasError) { return <div>Something went wrong. Please try again later.</div>; } return this.props.children; } } // 4. 全局错误处理 window.addEventListener('error', (event) => { console.error('Global error:', event.error); // 发送错误到监控服务 sendErrorToMonitoring(event.error); }); window.addEventListener('unhandledrejection', (event) => { console.error('Unhandled promise rejection:', event.reason); // 发送错误到监控服务 sendErrorToMonitoring(event.reason); });

错误监控

// 1. 使用Sentry // 安装 // npm install @sentry/react // 初始化 import * as Sentry from '@sentry/react'; import { BrowserTracing } from '@sentry/tracing'; Sentry.init({ dsn: 'YOUR_DSN', integrations: [new BrowserTracing()], tracesSampleRate: 1.0, }); // 捕获错误 try { // 可能会出错的代码 } catch (error) { Sentry.captureException(error); } // 2. 自定义错误监控 function sendErrorToMonitoring(error) { // 收集错误信息 const errorData = { message: error.message, stack: error.stack, url: window.location.href, userAgent: navigator.userAgent, timestamp: new Date().toISOString() }; // 发送到监控服务 fetch('/api/error-monitoring', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(errorData) }); } // 3. 错误日志 function logError(error, context = {}) { console.error('Error:', error); console.error('Context:', context); // 发送到服务器 sendErrorToMonitoring({ ...error, context }); }

用户友好的错误提示

// 1. 错误提示组件 function ErrorMessage({ error, onRetry }) { return ( <div className="error-message"> <h3>Oops! Something went wrong.</h3> <p>{error.message}</p> {onRetry && <button onClick={onRetry}>Try Again</button>} </div> ); } // 2. 表单错误处理 function LoginForm() { const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const handleSubmit = async (e) => { e.preventDefault(); setError(null); setLoading(true); try { // 登录逻辑 } catch (error) { setError(error); } finally { setLoading(false); } }; return ( <form onSubmit={handleSubmit}> {error && <ErrorMessage error={error} />} {/* 表单字段 */} <button type="submit" disabled={loading}> {loading ? 'Loading...' : 'Login'} </button> </form> ); } // 3. 异步操作错误处理 function DataFetcher() { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchData() { try { const response = await fetch('/api/data'); if (!response.ok) { throw new Error('Failed to fetch data'); } const data = await response.json(); setData(data); } catch (error) { setError(error); } finally { setLoading(false); } } fetchData(); }, []); if (loading) return <div>Loading...</div>; if (error) return <ErrorMessage error={error} onRetry={() => window.location.reload()} />; return <div>{/* 渲染数据 */}</div>; }

最佳实践

// 1. 分层错误处理 // 底层：捕获并转换错误 async function apiCall(url, options) { try { const response = await fetch(url, options); if (!response.ok) { throw new ApiError(`API error: ${response.status}`, response.status); } return await response.json(); } catch (error) { if (error instanceof ApiError) { throw error; } else { throw new ApiError('Network error', 0); } } } // 中层：处理业务逻辑错误 async function getUserData(id) { try { return await apiCall(`/api/users/${id}`); } catch (error) { if (error.status === 404) { throw new Error('User not found'); } else { throw error; } } } // 上层：处理UI错误 function UserProfile({ userId }) { const [user, setUser] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function loadUser() { try { const userData = await getUserData(userId); setUser(userData); } catch (error) { setError(error); } finally { setLoading(false); } } loadUser(); }, [userId]); if (loading) return <div>Loading...</div>; if (error) return <ErrorMessage error={error} />; return <div>{/* 渲染用户信息 */}</div>; } // 2. 错误恢复策略 function AutoRetryComponent({ fetchData, maxRetries = 3 }) { const [data, setData] = useState(null); const [error, setError] = useState(null); const [loading, setLoading] = useState(true); const [retryCount, setRetryCount] = useState(0); useEffect(() => { async function loadData() { try { const result = await fetchData(); setData(result); } catch (error) { if (retryCount < maxRetries) { setRetryCount(prev => prev + 1); // 延迟重试 setTimeout(loadData, 1000 * (retryCount + 1)); } else { setError(error); } } finally { setLoading(false); } } loadData(); }, [fetchData, maxRetries, retryCount]); if (loading) return <div>Loading...</div>; if (error) return <ErrorMessage error={error} />; return <div>{/* 渲染数据 */}</div>; }