快速定位问题——后端数据错误时前端明眼提示？

Question

问题背景：定位一个问题时，找来找去，才发现是后端没有给到应有的数据所致；

目标：针对这种情况，作为前端应该在代码层面控制好到一眼就能发现问题点；

代码示例描述：

const datas = {
    typeId:[***]
}

const fn = () => {
    //一些逻辑处理，拿到后端返回的某个typeId
    const typeId = '****';
    
    //用该typeId去存储的datas数据里那对应数据
    const data = datas[typeId]
    
    //才发现是typeId是空的，导致页面某部分区域是空了。
}

针对上述问题，因为关键ID拿不到，导致前端区域空白。但是真实业务逻辑里，真的会有typeId存在时，拿到的data经过处理后还是空的场景。

所以排查时，会先去检查配置都对否，最后去断点代码一点点往回找才知道这样的问题。

对于这个，前端如何提示比较好，能一样就找到问题点，就算是后端调试页面也可以发现。就免去前端没必要的排查工作。

目前想到的方法：

//在关键处，console.error
if (!typeId) return console.error('typeId不存在');

//或者下面，但它会让这个页面挂掉了，错误倒是很明显
throw new Error('typeId不存在')

你们，在前端开发中，针对这类问题有没有更好方案呢？

Answer 1

没有其他的办法吧,掉后台出现错误,第一反应是去network 里面的response, 然后对数据返回做各种错误情况的处理,如果数据是null 的话,做相应的处理,格式不正确,也做相应的处理

Answer 2

把所有 AJAX 接口都多封装一层，不要在业务代码里就用 axios 之类的就直接调用了。

这样做有几个好处：

• 便于观察数据模型。这个很好理解，能很直观的看出某个接口接收哪些参数、返回哪些字段。
• 便于数据格式化。比如某个接口需要返回一个 Number 类型的值，但后端不小心返回成了这个数转换后的 String 类型了（PHP 之类的弱类型后端语言如果不注意会经常犯这种错误），你后面用这个值再去做加法之类的运算、不就变成字符串拼接了吗？你可以说在业务代码里每一处用到的地方先强转成 Number，但一旦用到的地方多了怎么办？如果用统一的封装层来做这些数据格式化之类的工作，业务层上就可以不用去关心数据类型到底对不对的问题了（再配合 TS 之类的强类型工具，爽到飞起）。
• 便于数据结构管理。比如某个接口原先返回的是 { errcode: 0 }，突然有一天协议改了，要变成 { err_code: 0 }。你业务代码里用到这个字段的怎么办？挨个手动改？如果有 TS 还好说，纯 JS 项目呢？这个时候如果有统一的封装层，只需要在封装层处理一下，res.errcode = res.err_code，老的业务层代码就可以原封不动了。（这里仅做举例说明，实际的需求变化基本不可能是这么简单且二哔的）

这个统一的封装层里，当然你也可以做一些非空的逻辑判断来帮助定位开发问题。