一段难忘的H5经历

最近做了一个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 来看

【参考资料】