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

优质文章学习记录

— 6 min read

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

毒舌时刻

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

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

为什么你需要这个

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

反面教材

// 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>; }

毒舌点评

错误处理确实很重要，但我见过太多开发者滥用这个特性，导致代码变得过于复杂。

想象一下，当你为了处理所有可能的错误，写了大量的try-catch块，结果导致代码量增加了几倍，这真的值得吗？

还有那些过度使用错误监控的开发者，为了捕获所有错误，在每个函数中都添加错误处理，结果导致代码变得难以理解和维护。

所以，在进行错误处理时，一定要把握好度。不要为了处理所有可能的错误而牺牲代码的简洁性，要根据实际情况来决定错误处理的策略。

当然，对于大型应用来说，良好的错误处理是必要的。但对于小型应用，过度的错误处理反而会增加开发成本和维护难度。

最后，记住一句话：错误处理的目的是为了提高应用的可靠性和用户体验，而不是为了炫技。如果你的错误处理策略导致应用变得更难维护或用户体验变得更差，那你就失败了。

Read more

从零开发 AR 演讲提词器：基于 Rokid CXR-M SDK 的实战指南

从零开发 AR 演讲提词器：基于 Rokid CXR-M SDK 的实战指南

从零开发 AR 演讲提词器：基于 Rokid CXR-M SDK 的实战指南 站在讲台上，数百双眼睛注视着你。你开始演讲，却发现关键时刻想不起下一句要说什么——这种场景，每个演讲者都不陌生。 传统的解决方案是在讲台上放一张稿子，或者用 PPT 做备注。但低头看稿显得不专业，看 PPT 又要扭头，容易打断演讲节奏。如果能有一个只有自己能看到的"隐形提词器"，演讲就能更加从容自信。 Rokid AR 眼镜恰好提供了这种可能：将提词内容无线传输到眼镜显示屏，演讲者只需自然平视，文字便清晰呈现，而台下观众毫无察觉。本文将完整记录如何利用 Rokid CXR-M SDK 从零开发这款演讲提词器应用。 一、技术方案设计 1.1 为什么选择 AR 眼镜 在确定技术方案前，我们先对比几种提词方案： 方案

Tabular Editor 2.x：数据分析师的终极模型管理神器

Tabular Editor 2.x：数据分析师的终极模型管理神器 【免费下载链接】TabularEditorThis is the code repository and issue tracker for Tabular Editor 2.X (free, open-source version). This repository is being maintained by Daniel Otykier. 项目地址: https://gitcode.com/gh_mirrors/ta/TabularEditor 还在为复杂的Power BI模型管理而头疼吗？想要一个能够快速编辑DAX公式、批量处理度量值、轻松部署模型的工具吗？今天我要向你推荐一款数据分析师的秘密武器——Tabular Editor 2.x！🚀 为什么你需要Tabular Editor？
VLM经典论文阅读：【综述】An Introduction to Vision-Language Modeling

VLM经典论文阅读：【综述】An Introduction to Vision-Language Modeling

VLM经典论文阅读：【综述】An Introduction to Vision-Language Modeling * 【前言】论文简介 🍀 * 1、介绍（Introduction）🐳 * 2、视觉语言模型家族（The Families of VLMs） 🌟 * 2.1 基于Transformer的早期VLM工作（Early work on VLMs based on transformers） * 2.2 基于对比学习的VLM（Contrastive-based VLMs） * 2.2.1 CLIP * 2.3 掩码目标视觉语言模型（VLMs with masking objectives） * 2.3.1 FLAVA * 2.3.