研发C端产品我遇到的线上事故

清疚 2023-07-11 05:37 15阅读 0赞

###### *最新更新时间：2020年03月03日23:44:03* ######

#### [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] ####

#### 概述 ####

> 文章主题背景：从业前端开发至今(2016-2020)已有4年时间，有幸在 `新东方`团队参与了用户量过百万的C端产品，经历了从0到1的研发过程，期间参与了技术架构设计、第一次上线面向用户、技术团队管理、项目架构管理、多团队多岗位配合沟通、多人协同开发中代码管理和需求分配、代码审核和分支管理、技术方案风险预判、产品迭代持续发展的可预见瓶颈规避等，这是一次千载难逢的机会，也是职业生涯中少有的机遇，路途忐忑，一路走来沉淀了自己的技术实力，检验了自己对技术的认知和掌握程度，历练了人际交往中的高效和友好沟通能力。

> 本文内容：C端产品的最大特征，用户量大，这样就会爆发很多问题，本文对实际C端用户遇到的问题进行整理和分析。

#### 前端 ####

###### HTTP状态码414 ######

*  问题出现日期

> 2019年12月12日

*  用户访问webview出现如下界面：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]
 *  问题出现的原因和背景：

> APP向webview传参采用refer形式，参数动态拼接，无上限控制，业务数据逐渐过多造成URL过长，触发HTTP请求414错误

*  问题解决方案

> refer参数在webview中通过接口获取

###### 线上环境小程序上传图片至腾讯云失败 ######

*  问题出现日期

> 2020年3月4日

*  用户上传图片后无法回显，也没有报任何错误

> 方案背景，用户通过前端将图片上传至腾讯云，上传成功后会降存腾讯云的储路径发送给后端服务器

*  问题出现的原因：

>  *  第一个原因，没有考虑到上传图片至腾讯云失败的场景，从代码层面没有做异常处理，而是无论失败与否都将存储路径发送给后端
>  *  第二个原因，没有在小程序后台配置服务器域名，微信小程序的服务器域名有6项，如下表格所示
>  *  第三个原因，测试环境和预发环境都没有问题，但线上环境就不行，因为研发团队和测试团队都是开发者身份，微信服务器域名每做非白名单拦截

*  微信小程序-服务器域名

<table> 
 <thead> 
  <tr> 
   <th>服务器配置</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>request合法域名</td> 
   <td>普通 HTTPS 请求（wx.request）</td> 
  </tr> 
  <tr> 
   <td>socket合法域名</td> 
   <td>WebSocket 通信（wx.connectSocket）</td> 
  </tr> 
  <tr> 
   <td>uploadFile合法域名</td> 
   <td>上传文件（wx.uploadFile）</td> 
  </tr> 
  <tr> 
   <td>downloadFile合法域名</td> 
   <td>下载文件（wx.downloadFile)</td> 
  </tr> 
  <tr> 
   <td>udp合法域名</td> 
   <td>UDP 通信（wx.createUDPSocket)</td> 
  </tr> 
 </tbody> 
</table>

*  问题解决方案

>  *  上传方法cos.postObject，失败的回调函数中做捕获
>  *  cos.postObject 使用 wx.uploadFile 方法，将腾讯存储桶分配的域名`https://seal-test.cos.ap-beijing.myqcloud.com`配置到`uploadFile合法域名`

this.cos.postObject({ 
          Bucket: this.cosData.bucketName,//存储桶
          Region: this.cosData.region,//地域信息
          Key: filename,
          FilePath: tmpFilePath,
          onProgress: function (info) { }
        }, function (err, data) { 
          //如果向腾讯云上传图片失败 不再向自己服务器存储图片路径
          if (err){ 
            console.log(err);//uploadFile:fail url not in domain list
            return
          }
          //向自己服务器存储图片路径 data.Location filename
          sendFilePathToServer(data.Location);
        });

###### JSON解析失败 ######

*  控制台报错：SyntaxError: Unexpected end of JSON input
 *  问题出现的原因和背景：

> 在微信小程序中通过路由跳转，传参可以采用URL中拼接参数的形式进行传递，如果A页面中的参数中包含特殊字符，解析的时候会报错，如下：

//page A
    let params = { "a":"学前&幼儿园","type":2}
    wx.navigateTo({ url: `/pages/B/index?params=${ JSON.stringify(params)}`})
    //page B
    onLoad: function (options) { 
      //options
      //params:"{"a":"学前"
      //幼儿园","type":2}:"undefined"
      JSON.parse(options.params)//SyntaxError: Unexpected end of JSON input
    }

*  问题解决方案

> 对参数进行编码和解码

//page A
    let params = { "a":"学前&幼儿园","type":2}
    wx.navigateTo({ url: `/pages/B/index?params=${ encodeURIComponent(JSON.stringify(params))}`})
    //page B
    onLoad: function (options) { 
      JSON.parse(decodeURIComponent(options.params))
    }

*  JSON.parse() 方法无法解析的字符：`？ & \n \r`

> 字符串中的换行符`\n`和回车符`\r`处理过程中，先进行转译，如下：

let jsonString = "abc\ndef\rghi";
    let jsonObj=JSON.parse(jsonString.replace(/\n/g,"\\n").replace(/\r/g,"\\r"));

*  扩展：encodeURI() 和 encodeURIComponent()

> 对整个URL进行编码使用`encodeURI()`，解码使用`decodeURI()`

> 对URL中问号后面的查询字符串进行编码使用`encodeURIComponent()`，解码使用`decodeURIComponent()`

let str="my test.php?name=wsb&car=bmw";
    encodeURI(str);//my%20test.php?name=wsb&car=bmw
    decodeURIComponent(str);//my%20test.php%3Fname%3Dwsb%26car%3Dbmw

#### 后端 ####

#### 运维 ####

#### 参考资料 ####

*  无

> 感谢阅读，欢迎评论^-^

## [`打赏我吧^-^`][-] ##

[-_-]: https://blog.csdn.net/wanshaobo888/article/details/79179440
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200304002552831.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbnNoYW9ibzg4OA==,size_16,color_FFFFFF,t_70
[-]: https://blog.csdn.net/wanshaobo888/article/details/86249460