欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

99%的程序都没有考虑的网络异常-腾讯云技术社区

程序员文章站 2022-04-13 15:29:48
绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中。如果没有做好异常的兼容和兜底处理,会极大的影响用户体验,严重的还会带来...

绝大多数程序只考虑了接口正常工作的场景,而用户在使用我们的产品时遇到的各类异常,全都丢在看似 ok 的 try catch 中。如果没有做好异常的兼容和兜底处理,会极大的影响用户体验,严重的还会带来安全和资损风险。

接口异常,通常可以分为以下三类:

cgi 逻辑出错。如调用方入参缺失类业务逻辑报错; 服务不稳定。如服务器不稳定导致 nginx 各类 500、502,cgi 路径调整导致的 404 用户网络环境差。如,网络不稳定、网速慢、运营商劫持等

那么,我们在写代码时,如何快速的模拟这些接口异常,做好程序的兼容处理呢?

今天向大家介绍网络调试神器 whistle 的网络异常调试方法,如果你还没用过 whistle,请参考《8102 年的程序员不需要 hosts 和 fiddler》。

假设我们有以下前端页面 index.html,放置在自己的本地路径:

<script> fetch(`/mockr=${math.random()}`) .then(response => { return response.json() }) .then(v => { document.getelementbyid('success').innerhtml = v.data; }).catch(err => { document.getelementbyid('fail').innerhtml = err.message; }) </script>

接下来,打开 whistle rules 配置面板 https://127.0.0.1:8899/#rules ,配置模拟的 demo page 和 mock cgi:

*/mock file://({"code":0,"data":"success"}) # 配置 mock cgi 为模拟的 json 数据
example.com file:///users/kaiye/projects/markdown/20181213/ # 配置任意域名到本地 demo 目录,这里注意替换成自己的路径

打开 https://example.com ,正常逻辑下页面展示出了绿色的 success ,现在我们开始加入一些网络异常。

1、业务逻辑异常处理

例如 cgi 没有返回 data 字段,而是返回了一个错误码 code 和对应的 message,针对这种业务逻辑异常我们只需在第二个 then 中做好 code 值的判断即可(注意,这里的 code、message、data 只是示例,实际业务 cgi 中的 json 结构体的字段名很可能不同):

fetch(`/mockr=${math.random()}`)
  .then(response => response.json())
  .then((v) => {
    // 业务逻辑异常处理
    if (v.code !== 0) {
      return promise.reject(new error(`error_logic_code:${v.code}`));
    }
    document.getelementbyid('success').innerhtml = v.data;
  })
  .catch((err) => {
    document.getelementbyid('fail').innerhtml = err.message;
  });

相应的 whistle 配置如下:

*/mock file://({"code":12345,"message":"some_logic_error"}) # 模拟业务逻辑异常

2、服务器异常处理

如果服务器直接抛出了 502 错误码,我们希望代码能给用户提示的同时,再做一个异常上报。

fetch(`/mockr=${math.random()}`)
  .then((response) => {
    // 服务器异常处理
    if (response.ok) {
      return response.json();
    }
    return promise.reject(new error(`error_status_code:${response.status}`));
  })
  .then((v) => {
    // 业务逻辑异常处理
    if (v.code !== 0) {
      return promise.reject(new error(`error_logic_code:${v.code}`));
    }
    document.getelementbyid('success').innerhtml = v.data;
  })
  .catch((err) => {
    const [type, value] = err.message.split(':');
    // 异常类型上报
    console.log(type, value);
    document.getelementbyid('fail').innerhtml = err.message;
  });

通过 whistle 的模拟配置如下:

*/mock statuscode://502 # 模拟 http 状态码异常

3、接口被劫持注入

如果 cgi 被运营商劫持注入,可能导致接口返回一个不合法的 json 结构,最前面的 response.json() 会抛异常,我们可以提前 catch 住:

fetch(`/mockr=${math.random()}`).then((response) => {
  // 服务器异常处理
  if (response.ok) {
    return (
      response
        .json()
        // 接口数据解码异常处理
        .catch(err => promise.reject(new error('error_decode_json')))
    );
  }
  return promise.reject(new error(`error_status_code:${response.status}`));
});

whistle 模拟配置如下:

*/mock file://(

hijacking

{"code":0,"data":"success"}) # 模拟接口被劫持注入 1

借助 htmlappend 和 values 配置,可以模拟更复杂的注入示例:

*/mock file://({"code":0,"data":"success"}) htmlappend://{hijacking.html} # 模拟接口被劫持注入 2

<script>
alert('hijacking')
</script>

4、用户网络不稳定

如果我们要模拟请求发出 10 秒后断网或网络不通的情况,可以通过 whistle 这样配置:

*/mock reqdelay://10000 enable://abort # 模拟 10 秒超时后网络不通

让用户苦苦等待 10 秒,再报错的体验太糟糕。我们可以封装一个能配置超时时间的请求发送函数,同时把上面提到的错误异常都一起配置进来。

<script> function myfetch(url, configoptions) { const options = object.assign( { timeout: 3000 }, configoptions ) const { timeout } = options return new promise((resolve, reject) => { // 超时异常处理 const timer = settimeout(() => { reject(new error(`error_timeout:${timeout}`)) }, timeout) fetch(url, options) .then(data => { cleartimeout(timer) resolve(data) }) .catch(err => { cleartimeout(timer) reject(err) }) }) .then(response => { // 服务器异常处理 if (response.ok) { return ( response .json() // 接口数据解码异常处理 .catch(err => promise.reject(new error('error_decode_json'))) ) } else { return promise.reject( new error(`error_status_code:${response.status}`) ) } }) .then(v => { // 业务逻辑异常处理 if (v.code !== 0) { return promise.reject(new error(`error_logic_code:${v.code}`)) } else { return v.data } }) .catch(err => { const [type, value] = err.message.split(':') // 异常类型上报 console.log(type, value) return promise.reject(err) }) } myfetch(`/mockr=${math.random()}`) .then(data => { document.getelementbyid('success').innerhtml = data }) .catch(err => { document.getelementbyid('fail').innerhtml = err.message }) </script>

这样,自定义的 myfetch 只需关注业务具体逻辑,针对不同的 catch error 做对应的处理。

除以上提到的协议命令字外,whistle 还支持 resspeed 用于模拟低网速传输(单位:kb/s),tpl 协议则可以根据请求传入参数来动态模拟不同的数据。在 frames 面板,还可以对 websocket/socket 请求进行暂停、延迟等网络异常的模拟。

小程序 fetch api 实现

最后,留一道思考题。

近来微信小非常火,小程序原生提供的 wx.request api 能用于发送 https 请求,请在它的基础之上进行封装,支持 promise 调用和 timeout 超时时间定义(小程序默认的请求超时定义在 app.json 中,不够灵活),并针对以上提到的 http 状态码异常、接口劫持注入、慢网络、无网络状态等各种网络异常进行兼容处理。