最近做了一个C端H5项目，嵌在一个App里，上线前都测得好好的，上线后就暴露出各种问题。于是记录这些经验，希望以后启动新项目时能够顺利一些。
启动阶段
【技术选型】
- 选择你熟悉的框架/方案
- 选择团队成员都熟悉的框架
【SPA路由模式】
- 一开始就要考虑好 hash mode or history mode
- 浏览器的 http referer 中不会记录 url 中的 hash
- 提前调查第三方监控 / 统计工具能否支持 hash
- 路由模式一定要提前想清楚，后期再改可能要牵动各依赖方
上线要求
【数据埋点】
- 新项目第一版上线时一定要做好埋点统计，否则后期迭代优化时没有指标对比
- 综合考虑第三方统计产品，必要时特殊业务场景需要单独开发埋点落库的接口
- 埋点功能分类
- 页面统计：PV，UV，停留时长，用户留存
- 按钮统计：某个按钮的点击次数 / 点击率
- 页面内区块的统计：如某对话框展示了多久才被用户关闭
- 转化统计：一个流程中各步骤的 PV 漏斗 / 转化率
【前端监控】
- 接口监控：接口成功率，接口状态码
- js 监控：exception 信息，是否支持 js map
- 性能监控：domReady 与 onload 时间
排错技巧
【console工具】
- 留好 vconsole / eruda 之类的开关
- 测试环境可默认加载 console 工具脚本
- 生产环境可通过 url 末尾加 debug 参数作为后门
- 脚本越早加载越好，最好在项目入口文件执行之前
- 在项目 js 逻辑的关键节点打出一些必要的 log
- 比如鉴权失败，没有获取到 token
- 需要调用 hybrid 的地方可打出返回值
- 保证在 js bridge 脚本注入且执行完成后，才调用 hybrid 方法
【抓包工具】
- anyproxy / charles：提前装好工具
- https 抓包：提前装好证书
【真机调试】
- 安卓手机开启「开发者选项 - USB 调试」，使用
chrome://inspect - 苹果手机使用 xcode simulator，在 safari 中开启「偏好 - 高级 - 显示“开发”菜单」
面对时好时坏的功能
- 接口侧：多机房发布是否有遗漏，负载均衡是否正常
- 前端侧
- 先确定是否跟机型有关，如果是兼容性问题配合前端监控来看
- 跟机型无关，再排查出错的随机性，是否与脚本并行加载的执行顺序有关
- 是否依赖外部，如 hybrid 方法，外部是否稳定，配合 console log 来看
【参考资料】