错误处理是编程的基本方面，确保应用程序能够优雅地处理意外情况。在JavaScript中，虽然try-catch常被使用，但还有更高级的技术可以增强错误处理。
本文探讨了这些高级方法，提供实用的解决方案，改进您的错误管理策略，使应用程序更具弹性。
什么是错误处理？
错误处理的目的
错误处理 预见、检测和响应程序执行过程中出现的问题。适当的错误处理可以改善用户体验，保持应用程序稳定性，并确保可靠性。
JavaScript中的错误类型
- 语法错误。这些是代码语法错误，如缺少括号或关键字使用不正确。
- 运行时错误。发生在执行过程中，比如访问未定义对象的属性。
- 逻辑错误。这些错误不会导致程序崩溃，但会导致不正确的结果，通常是由于错误的逻辑或意外的副作用。
为什么try-catch不足以应对
try-catch的限制
- 作用域限制。只处理其块内的同步代码，并且不会影响异步操作，除非专门处理。
- 静默失败。过度使用或不正确使用可能导致错误被悄悄忽略，可能引发意外行为。
- 错误传播。不支持原生地在应用程序的不同层传播错误。
何时使用try-catch
- 同步代码。用于处理同步操作（如JSON解析）中的错误。
- 关键部分。用于保护可能产生严重后果的关键代码部分。
自定义错误类：增强错误信息
创建自定义错误类
自定义错误类扩展内置的Error类以提供额外信息：
JavaScript
class ValidationError extends Error {
constructor(message, field) {
super(message);
this.name = 'ValidationError';
this.field = field;
this.stack = (new Error()).stack; // Capture the stack trace
}
}
自定义错误的优势
- 清晰度。提供特定的错误消息。
- 细粒度处理。允许单独处理特定的错误类型。
- 错误元数据。包含有关错误的额外上下文。
自定义错误的用例
- 验证失败。与用户输入验证相关的错误。
- 领域特定错误。针对特定应用程序领域（如身份验证或支付处理）定制的错误。
集中化错误处理
Node.js中的全局错误处理
使用中间件集中处理错误：
JavaScript
app.use((err, req, res, next) => {
console.error('Global error handler:', err);
res.status(500).json({ message: 'An error occurred' });
});
前端应用程序中的集中化错误处理
使用错误边界在React中实现集中式错误处理：
JavaScript
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
return { hasError: true };
}
componentDidCatch(error, errorInfo) {
console.error('Error caught by ErrorBoundary:', error, errorInfo);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}
集中式错误处理的优势
- 一致性。确保统一的错误管理方法。
- 更容易维护。集中更新减少遗漏变更的风险。
- 更好的日志记录和监控。便于与监控工具集成。
传播错误
同步代码中的错误传播
使用throw来传播错误：
JavaScript
function processData(data) {
try {
validateData(data);
saveData(data);
} catch (error) {
console.error('Failed to process data:', error);
throw error;
}
}
异步代码中的错误处理
使用Promise或async/await来处理错误：
JavaScript
async function fetchData(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
console.error('Failed to fetch data:', error);
throw error;
}
}
何时传播错误
- 关键错误。传播影响整个应用程序的错误。
- 业务逻辑。允许更高级别的组件处理业务逻辑错误。
处理异步代码中的错误
使用async/await进行错误处理
使用try-catch来管理异步函数中的错误：
JavaScript
async function fetchUserData(userId) {
try {
const response = await fetch(`/api/users/${userId}`);
if (!response.ok) {
throw new Error('Failed to fetch user data');
}
return await response.json();
} catch (error) {
console.error('Error fetching user data:', error);
return null;
}
}
使用Promise.all进行错误处理
处理多个Promise和错误：
JavaScript
async function fetchMultipleData(urls) {
try {
const responses = await Promise.all(urls.map
(url => fetch(url)));
return await Promise.all(responses.map(response => {
if (!response.ok) {
throw new Error(`Failed to fetch ${response.url}`);
}
return response.json();
}));
} catch (error) {
console.error('Error fetching multiple data:', error);
return [];
}
}
异步错误处理中的常见陷阱
- 未捕获的Promise。始终使用
await、.then()或.catch()来处理Promise。 - 悄无声息的失败。确保错误不被悄悄地吞噬。
- 竞争条件。在处理并发异步操作时要小心。
错误日志记录
客户端错误日志记录
捕获全局错误：
JavaScript
window.onerror = function(message, source, lineno, colno, error) {
console.error('Global error captured:', message, source, lineno, colno, error);
sendErrorToService({ message, source, lineno, colno, error });
};
服务器端错误日志记录
使用像Winston这样的工具进行服务器端日志记录：
JavaScript
const winston = require('winston');
const logger = winston.createLogger({
level: 'error',
format: winston.format.json(),
transports: [new winston.transports.File({ filename: 'error.log' })]
});
app.use((err, req, res, next) => {
logger.error(err.stack);
res.status(500).send('An error occurred');
});
监控和警报
通过PagerDuty或Slack等服务设置实时监控和警报：
JavaScript
function notifyError(error) {
// Send error details to monitoring service
}
错误日志记录的最佳实践
- 包含上下文信息。记录额外的上下文信息，如请求数据和用户信息。
- 避免过度记录。记录必要的信息以防止性能问题。
- 定期分析日志。定期审查日志以检测和解决重复问题。
优雅降级和备用方案
优雅降级
设计应用程序以在功能降级时继续运行：
JavaScript
function renderProfilePicture(user) {
try {
if (!user.profilePicture) {
throw new Error('Profile picture not available');
}
return `<img data-fr-src="${user.profilePicture}" alt="Profile Picture">`;
} catch (error) {
console.error('Error rendering profile picture:', error.message);
return '<img src="/default-profile.png" alt="Default Profile Picture">';
}
}
备用机制
主要操作失败时提供备用方案：
JavaScript
async function fetchDataWithFallback(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
return await response.json();
} catch (error) {
console.error('Error fetching data:', error);
return { message: 'Default data' }; // Fallback data
}
}
实施优雅降级
- UI备用方案。在功能失败时提供替代UI元素。
- 数据备用方案。当实时数据不可用时使用缓存或默认值。
- 重试机制。为瞬态错误实施重试逻辑。
平衡优雅降级
平衡提供备用方案与让用户了解问题：
JavaScript
function showErrorNotification(message) {
// Notify users about the issue
}
测试错误处理
单元测试错误处理
验证各个功能中的错误处理：
JavaScript
const { validateUserInput } = require('./validation');
test('throws error for invalid username', () => {
expect(() => {
validateUserInput({ username: 'ab' });
}).toThrow('Username must be at least 3 characters long.');
});
集成测试
测试跨不同应用层的错误处理：
JavaScript
test('fetches data with fallback on error', async () => {
fetch.mockReject(new Error('Network error'));
const data = await fetchDataWithFallback('https://api.example.com/data');
expect(data).toEqual({ message: 'Default data' });
});
端到端测试
模拟真实场景以测试错误处理：
JavaScript
describe('ErrorBoundary', () => {
it('displays error message on error', () => {
cy.mount(<ErrorBoundary><MyComponent /></ErrorBoundary>);
cy.get(MyComponent).then(component => {
component.simulateError(new Error('Test error'));
});
cy.contains('Something went wrong.').should('be.visible');
});
});
错误处理测试的最佳实践
- 覆盖边缘情况。确保测试涵盖各种错误场景。
- 测试备用方案。验证备用机制按预期运行。
- 自动化测试。使用CI/CD流水线自动化并确保强大的错误处理。
真实场景
场景 1：支付处理系统
处理支付处理过程中的错误：
- 自定义错误类。使用类似
CardValidationError、PaymentGatewayError的类。 - 重试逻辑。针对网络相关问题实施重试。
- 集中式日志记录。监控支付错误并及时解决问题。
场景 2：数据密集型应用
管理数据处理中的错误：
- 优雅降级。提供部分数据或备用视图。
- 回退数据。使用缓存或默认值。
- 错误日志记录。记录详细上下文以便进行故障排除。
场景3：用户认证和授权
处理认证和授权错误：
- 自定义错误类。创建类似
AuthenticationError、AuthorizationError的类。 - 集中处理。记录和监控与认证相关的问题。
- 优雅降级。提供备用登录选项和有意义的错误消息。
结论
在JavaScript中实现高级错误处理需要超越简单的try-catch，拥抱自定义错误、集中处理、传播和健壮测试。实施这些技术让您能够构建具有弹性的应用程序，即使出现问题，也能提供无缝的用户体验。
进一步阅读
- 《JavaScript: The Good Parts》作者：Douglas Crockford
- 《You Don’t Know JS: Async & Performance》作者：Kyle Simpson
- MDN Web文档：错误处理
Source:
https://dzone.com/articles/advanced-error-handling-in-javascript-custom-error