前端监控SDK（一）: 开篇

只想写个小玩意
235 阅读2分钟

前言

在日常开发项目中，我们可能想要了解项目的使用情况。比如项目的访问量 pv , uv ，以及用户在使用过程中有没有报错，性能如何？

想要获得项目的这些指标，我们可以使用一些第三方的服务如：

  • 阿里云 arms
  • 百度统计
  • Sentry

这些服务都有相应的免费和付费版本，可以根据实际情况来决定要使用哪个服务。我之前在一个小项目中接入了 阿里云 arms ，用户量大概200左右，免费额度够用。

页面相关的 pv,uv 以及性能数据和报错数据都能通过界面来查看： image.png

第三方服务使用起来比较省心、快捷，但是如果你对他们的某些功能不满意或者有相关的定制化需求，也可以自己从0到1实现一套监控系统。

社区有很多优秀文章介绍相关的实现方式：

GitHub 上也有很多监控 JS SDK 的实现和教程，可以作为参考

出于对相关技术细节的好奇，我也从0到1实现了一个前端监控 JS SDK ：github.com/wangkaiwd/m…

感谢社区里各位大佬的分享，我从这些文章、代码和产品中学到了很多相关技术的实现思路和细节，减少了我苦思冥想和试错的时间，感兴趣的小伙伴也希望能多为这些优秀创作者点赞。

功能概览

整体的功能设计如下：

image.png

代码结构

代码整体使用 pnpm + lerna 的 monorepo 风格进行管理

image.png

  • packages ： 在不同环境下的源码
  • playground : 不同环境下的示例，方便开发和调试

本地启动和调试

通过如下命令启动项目代码：

# 启动 js demo
pnpm demo:js
# 启动 react demo
pnpm demo:react

playground 中的示例项目通过 vite 来搭建，配合 tsconfig.json 中的 paths 字段结合 vite-tsconfig-paths 插件直接引入包源码，而不是使用每个包打包后的代码，方便开发和调试

image.png

发布

命令如下：

pnpm release

项目中利用了 lerna 的 version 和 publish 特性，支持 monorepo 的发布，并根具改动生成 CHANGELOG

相应的配置在 lerna.json 中，command 可以配置 lerna 命令对应的参数：

{
	"version": "independent", // 每个包的版本进行独立发布
	"npmClient": "pnpm", // 指定包管理器
	"command": {
		"version": {
			"conventionalCommits": true, // 生成 changlog.md
			"createRelease": "github", // 生成 github release
			"message": "chore(release): publish" // 发包时改动文件提交的 message
		}
	},
	"packages": [
		"packages/*"
	]
}

之后我会对前端监控相关的技术细节进行详细解释，敬请期待

avatar
文章
阅读
粉丝