项目介绍
1.前端质量/报错监控系统整体思路实现逻辑
2.开发一个webpack plugin插件收集使用者的sourcemap到云端
3.使用者初始化报错系统的sdk,然后运行,报错时收集错误上报云端
4.云端根据收集到的报错信息及之前拿到的sourcemap进行解析,确认报错位置
下面是一个比较完整的流程图,我demo项目中还没有这么完善,但是有了一个整体的构架,主要目的是用于学习
代码仓库:https://github.com/adminadmin1234/deep-study-webpack/tree/master/plugin-uploadSourceMap
学习收获:
1.webpack的打包知识及plugin的开发
2.能学到nodejs+express相关的知识
3.整体理解错误监控系统的理论,及部分实战
4.项目简单易上手,但是包含的知识点很多,利用我提供的demo巩固实践操作,巩固理论
开发环境
1.window||mac
2.nodejs v14.17.6
安装依赖
npm install
运行项目
1.运行服务端:
// 在plugin-uploadSourceMap\serve目录下
node .\index.js
打印:服务器运行在3030
2.收集项目sourceMap
// 在根目录
npm run build
打印:source map 上传完成
3.开启服务运行线上项目
// 在根目录
npm run dev
然后在浏览器打开:http://localhost:8080/
再看看第一步运行的服务端会有错误打印:
回到源码看看是不是真的
确实没有错,麻雀虽小,五脏俱全!