引言：为什么需要自定义错误类型

在现代前端开发中，错误处理不再仅仅是简单的try-catch块，而是需要构建一套完整的异常处理体系。ES6引入的Error子类扩展功能为我们提供了强大的工具，让我们能根据业务需求创建特定类型的错误，使代码更加健壮且易于维护。

一、ES6 Error基础：理解JavaScript错误机制

JavaScript中的错误处理机制基于Error对象，它是所有错误的基类。ES6之前，我们只能使用内置的几种错误类型：

javascript throw new Error("普通错误"); throw new SyntaxError("语法错误"); throw new TypeError("类型错误");

然而，这些内置类型往往无法满足复杂业务场景的需求。ES6的class语法为我们提供了扩展Error类的能力，让我们可以创建领域特定的错误类型。

二、创建自定义Error子类：从基础到进阶

基础实现：最简单的自定义错误

javascript class BusinessError extends Error { constructor(message) { super(message); this.name = "BusinessError"; } }

这个简单的实现已经具备基本功能，但我们可以做得更好。

进阶实现：添加错误代码和上下文信息

javascript
class CustomError extends Error {
constructor(code, message, context = {}) {
super(message);
this.name = this.constructor.name;
this.code = code;
this.context = context;
this.timestamp = new Date().toISOString();

// 保持正确的堆栈跟踪
if (Error.captureStackTrace) {
  Error.captureStackTrace(this, this.constructor);
}

}

toJSON() {
return {
name: this.name,
code: this.code,
message: this.message,
context: this.context,
stack: this.stack,
timestamp: this.timestamp
};
}
}

业务错误示例：电商场景

javascript
class ProductNotFoundError extends CustomError {
constructor(productId) {
super('PRODUCTNOTFOUND', Product with ID ${productId} not found, {
productId,
suggestion: 'Check the product ID or try searching instead'
});
}
}

class InsufficientStockError extends CustomError {
constructor(productId, requested, available) {
super('INSUFFICIENT_STOCK',
Only ${available} items available, but ${requested} requested, {
productId,
requested,
available
});
}
}

三、最佳实践：打造专业的错误处理体系

1. 错误分类体系

建立清晰的错误层次结构：

BaseError ├── NetworkError │ ├── TimeoutError │ └── ServerError ├── BusinessError │ ├── ValidationError │ ├── AuthenticationError │ └── AuthorizationError └── SystemError ├── DatabaseError └── ConfigurationError

2. 错误处理中间件（Express示例）

javascript
function errorMiddleware(err, req, res, next) {
// 已知的自定义错误
if (err instanceof CustomError) {
return res.status(err.statusCode || 400).json({
error: err.toJSON()
});
}

// 未知错误
console.error('Unexpected error:', err);
res.status(500).json({
error: {
name: 'InternalServerError',
message: 'An unexpected error occurred',
timestamp: new Date().toISOString()
}
});
}

3. 错误边界（React示例）

javascript
class ErrorBoundary extends React.Component {
state = { error: null };

static getDerivedStateFromError(error) {
return { error };
}

componentDidCatch(error, errorInfo) {
// 可以在这里记录错误到监控系统
logErrorToService(error, errorInfo);
}

render() {
if (this.state.error) {
if (this.state.error instanceof AuthError) {
return ;
}
return ;
}
return this.props.children;
}
}

四、高级技巧：让错误处理更加强大

1. 错误代码国际化

javascript class I18nError extends CustomError { constructor(code, params = {}) { const message = i18n.t(`errors.${code}`, params); super(code, message, params); this.i18nParams = params; } }

2. 错误恢复策略

为错误添加恢复方法：

javascript
class PaymentError extends CustomError {
constructor(code, message, paymentMethod) {
super(code, message, { paymentMethod });
}

async retry() {
if (this.code === 'PAYMENT_TIMEOUT') {
return await this.context.paymentMethod.retry();
}
throw new Error('This error cannot be retried');
}
}

3. 错误监控与上报

javascript
class MonitoredError extends CustomError {
constructor(code, message, context) {
super(code, message, context);
this.reportToMonitoring();
}

reportToMonitoring() {
const errorData = this.toJSON();
errorData.severity = this.determineSeverity();
monitoringService.report(errorData);
}

determineSeverity() {
if (this.code.startsWith('CRIT')) return 'critical'; if (this.code.startsWith('WARN')) return 'warning';
return 'error';
}
}

五、实战经验：自定义错误在大型项目中的应用

在大型前端项目中，良好的错误处理可以显著提升开发效率和用户体验。以下是一些实际经验：

1. 错误文档化：为每个自定义错误编写文档，说明何时抛出、如何处理
2. 错误代码规范：制定错误代码命名规范，如MODULE_ACTION_REASON格式
3. 测试覆盖率：确保所有自定义错误都有对应的测试用例
4. 错误监控看板：在监控系统中为不同错误类型设置不同的警报阈值
5. 用户友好提示：根据错误类型显示适当的用户界面反馈

结语：构建健壮的前端应用

ES6的自定义错误类型为我们提供了强大的工具，但真正的价值在于如何将这些工具融入我们的开发流程和架构设计。通过建立系统的错误处理策略，我们不仅能更快地定位和解决问题，还能为用户提供更加稳定可靠的使用体验。

记住，优秀的错误处理不是关于防止所有错误（这是不可能的），而是关于如何优雅地处理不可避免的错误，并为快速恢复创造条件。自定义错误类型正是实现这一目标的关键技术之一。