Angular对接Spring Boot时获取错误响应及undefined问题排查

核心根因 #

• RxJS 新版本已弃用 subscribe(nextCallback, errorCallback) 的双参数写法，部分版本下该写法会导致错误回调的入参接收异常，无法拿到正确的错误对象。
• 你直接将错误断言为HttpErrorResponse类型，但如果实际触发的是非HTTP标准错误（比如CORS跨域拦截、FileReader读取异常、api层提前吞掉错误返回普通对象），错误对象上不存在status属性，打印自然返回undefined。
• 额外注意：你当前代码中documents.base64 = "reader.result.slice(28).toString()"写死了字符串，没有真正拿到reader的读取结果，属于功能bug，需要去掉外层引号。

修正后代码 #

uploadFile(files: FileList | null): void {
    const documents = this.documentArray;
    if (files) {
      const file = files.item(0);
      const reader = new FileReader();
      // 新增FileReader错误捕获，避免读取异常漏处理
      reader.onerror = (readErr) => {
        console.error('文件读取失败：', readErr);
      }
      reader.readAsDataURL(file);
      reader.onload = () => {
        documents.filename = file.name;
        // 去掉外层引号，拿到真实的base64内容
        documents.base64 = reader.result.slice(28).toString();
        documents.documentType = this.form.controls.dokumentType.value;
        this.api.saveDocument({body: documents}).subscribe({
          next: (res) => {
            console.log("Here is your data: ", res) 
          },
          error: (error) => {
            // 先打印完整错误对象确认结构，再按需取字段
            console.error("完整错误信息：", error);
            // 加类型判断避免属性不存在报错
            if (error instanceof HttpErrorResponse) {
              console.error("错误状态码：", error.status);
              console.error("错误详情：", error.message);
            }
          }
        })
      };
    }
}

额外调试建议 #

• 如果修改后仍然拿不到错误信息，检查api.saveDocument方法的封装逻辑，确认是否在内部做了错误拦截，没有把原始错误抛到subscribe层。
• 打开浏览器控制台的网络 tab，确认请求是否真的返回了错误响应，避免是请求压根没发出去、被浏览器跨域拦截导致无错误结构返回。

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