这里记录工作中遇到的技术点，以及自己对生活的一些思考，周三或周五发布。
封面图
通常情况下我们不会遇到前端性能监控的需求，但是当我们的关键项目真的有这个需求的时候应该怎么做呢？
我们通常会接入第三方的监控API，但是如何实现这种监控，也是我们需要思考的问题，只有从全局出发，思考前端监控的实现方案，我们才能从这个思考的过程中有所收获。
上图是我对前端性能监控的一些思考，当然，这个图表示的只是一个思考的过程，具体的实施，需要我找时间去画另一张图，实施图，可能就包括的比较详细一些，数据格式的定义，数据上报的实现方式，页面监控的实现方案等等。
监控什么
前端监控通常情况下监控的内容可以分为三类：
第一，js错误。
js错误又分大概四种：一是uncaught error,这种错误通常情况下发生在我们的开发过程中。理论上不需要我们进行上报。二是js runtime error, 这种错误会触发window.onerror事件，我们可以通过监听onerror事件，获取到相关的信息进行上报。三是资源错误，比如图片加载失败等，它也会触发error事件。四是unhandledregection错误，这种错误由promise触发，我们可以监听onunhandledrejection方法获取相关信息进行上报。
第二，用户行为。
用户行为大体上可以理解为，谁，在什么时间，做了哪些操作。比如，用户，登录了什么应用，应用的版本是什么，应用所在的平台信息，页面的访问情况，停留时长等。
第三，应用的性能。
应用的性能指的是，比如页面加载时长，接口请求时长，资源大小等等。
以哪种方式进行监控
监控方式，其实指的就是我们平常说的埋点方式。通常情况分为自动埋点，和手动埋点。
自动埋点的实现方式稍微复杂一些，需要我们去hack很多内容。比如需要重写XHR对象，或者以一种更优雅的方式实现fetch等。
而手动埋点则是我们直接在业务代码中需要监控的地方，直接调用接口上报所需的数据即可。
简单高效，但是繁琐。
自动监控，自动上报数据时。我们需要考虑以哪种方式进行上报比较好一些，比如开启定时任务，或者开启任务队列。每隔一分钟上报一次数据，或者每10条，20条数据上报一次。以免上报逻辑对应用本身产生不好的影响。
数据格式如何定义
根据我们需要上报的信息，我们可以先把需要上报的数据格式先简单定义一下。
对于JS错误，我们需要知道错误信息，发生错误的代码，代码行号以及列号。
代码语言：javascript复制 interface JsErrorInfo {
msg:string,
source:string,
lineno:number,
colno:number,
...
}
对于用户行为，我们需要知道当前用户是谁，用户使用的什么平台，登陆的什么应用，当前应用是哪个版本，用户进行什么样的操作，用户所在的页面地址，甚至当前页面的路由模式，以及是页面是否带有参数。
代码语言：javascript复制interface UserActionInfo {
userId:string,
platform:string,
appType:string,
appld:string,
appVersion:string,
userAction:string, // click
timeStamp:number, // time
visitedUrl:string,
visitedUrlMode:string,
visitedParams:any,
...
}
对于页面性能，我们需要了解一些基本的性能指标及监听方式。
代码语言：javascript复制
interface PerfInfo {
currentUrl:string,
source:string,
requestUrl:string,
loadtime:string,
size:size,
...
}
API如何定义？
当我们从整体上有一个思路之后，我们就可以思考如何对外提供一套api。API如何定义呢？
通常情况下都会提供一个构造函数，然后通过init方法进行初始化。
例如：
代码语言：javascript复制import {Vue} from 'vue
let myApp = new Vue(config)
亦或是通过定义方法来实例化新的对象：
代码语言：javascript复制import {createApp} from 'vue
let myApp = createApp(config)
有了这个思考的流程之后，我们只需要思考我们的构造函数需要哪些方法，然后不断的去完善即可。比如：上报信息方法，监听错误信息，计算页面加载时间，生成任务队列...
最后
最近的事情太多了，这一篇只是一个思考的过程，后面会有一个简单的实现过程，接口如何定义，如何计算相关指标等等。
未完待续...
如果喜欢。
