Angular错误拦截器展示报错出现[object Object]问题求助

问题根因 #

• 现有逻辑中，捕获到带error.error.errors的400错误时，直接将拍平后的数组抛出，未在拦截器内完成标准化展示，外层未做序列化处理就会显示[object Object]
• 未兼容后端不同的错误返回结构：包括错误项为对象、error.error本身就是字符串/数组、error.error.errors为嵌套对象等场景
• 抛出数组类型的错误不符合常规错误处理规范，外层消费侧极易出现解析异常

修复方案 #

1. 新增错误信息标准化工具方法 #

在拦截器类内新增私有方法，支持将任意结构的错误内容转换为一维字符串数组：

private normalizeErrorMessages(error: any): string[] {
  const messages: string[] = [];
  // 处理字符串类型错误
  if (typeof error === 'string') {
    messages.push(error);
    return messages;
  }
  // 处理数组类型错误
  if (Array.isArray(error)) {
    error.forEach(item => messages.push(...this.normalizeErrorMessages(item)));
    return messages;
  }
  // 处理对象类型错误
  if (typeof error === 'object' && error !== null) {
    // 优先读取通用错误字段
    if (error.message) {
      messages.push(error.message);
      return messages;
    }
    // 遍历对象属性处理嵌套错误
    Object.values(error).forEach(val => messages.push(...this.normalizeErrorMessages(val)));
  }
  // 兜底逻辑
  if (messages.length === 0) {
    messages.push('请求参数异常，请检查输入内容');
  }
  return messages;
}

2. 改造400错误分支逻辑 #

替换原有收集错误抛出的逻辑，直接标准化后通过toastr展示所有错误：

case 400:
  const errorMessages = error.error?.errors 
    ? this.normalizeErrorMessages(error.error.errors)
    : this.normalizeErrorMessages(error.error || error.statusText || '请求错误');
  // 逐条展示错误
  errorMessages.forEach(msg => this.toastr.error(msg, '请求错误'));
  break;

3. 优化错误抛出逻辑（可选） #

如果需要将错误继续抛给外层业务逻辑，不要直接抛原始对象/数组，统一抛出Error实例，避免外层逻辑异常：

// 替换原有的return throwError(error);
return throwError(() => new Error(errorMessages.join('；') || '未知请求错误'));

内容的提问来源于stack exchange，提问作者AnonyXplorer