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

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

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

概述

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

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

前端

HTTP状态码414

• 问题出现日期

2019年12月12日

• 用户访问webview出现如下界面：
  
• 问题出现的原因和背景：

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

• 问题解决方案

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

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

• 问题出现日期

2020年3月4日

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

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

• 问题出现的原因：

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

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

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

• 问题解决方案

• 上传方法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

后端

运维

参考资料

• 无

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

打赏我吧^-^