工作流程相关

公司的工作流

1. 产品邀请参与需求会
   1. 确认方案，如何做，好不好做
      1. 不好做或不好实现：商讨替代方案
   2. 给出初步 ddl 或者 老板定死 ddl
   3. 给出原型图，审核原型图
      1. 看能不能跑通，存不存在漏洞和有忽略的地方
2. 开发内部需求会
   1. 确认技术选型
   2. 安排人员分配模块
   3. 排时间计划表
3. 拿出最终 ddl 给产品确认
4. 开始开发
   1. 后端：给出 api 接口的 URL 路径，请求参数、返回数据结构
   2. 前端：画页面，写 mock 数据
      1. mock:
         1. yapi
         2. apifox
            1. 理念：API First
   3. 后端：实现接口
   4. 前后端联调
      1. 前端：把mock域名，更换成开发域名即可联调
5. 测试
   1. 开发完一个完整模块，就测试一个模块
   2. 禅道提bug
   3. 修复
6. 预生产
   1. 测试
7. 发布

前端监控怎么做

1. 监听 Vue.config.errorHandler
2. 监听error事件
3. 监听unhandledrejection事件，捕获promise的报错
4. 开源框架：Sentry - 实时错误监控的项目

import Vue from 'vue'
import * as api from '@/api/index'

Vue.config.errorHandler = (err) => {
  console.error(err)
  const {
    message, // 异常信息
    name, // 异常名称
    script, // 异常脚本url
    line, // 异常行号
    column, // 异常列号
    stack // 异常堆栈信息
  } = err
  // 错误上报到收集报错的平台
  captureError({
    name, errorMessage: message, scriptURI: script, lineNo: line, columnNo: column, error: stack
  })
}

window.addEventListener('error', function (errorMessage, scriptURI, lineNo, columnNo, error) {
  captureError({
    errorMessage, scriptURI, lineNo, columnNo, error
  })
})

window.addEventListener('unhandledrejection', function (errorMessage, scriptURI, lineNo, columnNo, error) {
  captureError({
    errorMessage, scriptURI, lineNo, columnNo, error
  })
})

function captureError (err) {
  const type = err.name || 'noType'
  const message = err.errorMessage || 'noMessage'
  const stack = err.error ? JSON.stringify(err.error) : 'noStack'
  api.postH5({
    key: 'qqRedPacketMallError',
    eventId: type,
    eventName: message,
    eventContent: stack
  })
}

由于这边对错误上报需要比较及时，所以没有做合并上报，需要的同学可以了解一下 navigator.sendBeacon

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

TODO

0到1搭建前端监控平台 - 柯基与佩奇 - 博客园

juejin.cn