前端工程化详解

# 简介

这个模块，将带大家一起从零开始实现一个企业级前端监控系统，我给他起名叫 Beaconify (opens new window)，希望能够为用户提供完整的、全景式的监控和埋点方案。目标是覆盖前端生产环境中大部分监控场景。整体项目分为四部分

  • 监控SDK: 适配多平台，js、vue、react、小程序等场景，提供性能、异常、白屏、卡顿和用户行为回放等场景。
  • 接入后端: 接受监控数据并处理
  • 后台管理系统: 提供可视化查看
  • 后台管理系统后端: 针对后台管理系统需求提供api

WARNING

我知道node.js做监控系统的后台肯定有性能和瓶颈问题，但作为一名前端coder来说，这是一个最好的学习选择。期待其他语言后端大神开发其他语言的版本。

# 为什么不使用Sentry

首先可以肯定的是，Sentry是一个优秀的监控系统，但从整体的角度来讲，有一些需求Sentry还是不太满足。

  • Sentry 主要精力还是放在异常监控上，其他方面的监控能力较弱
  • 公司内部有其他工具需要联动
  • Sentry 使用python开发，前端开发插件有上手成本
  • 开源协议问题
  • 二次开发成本高

# 能学到什么

  1. 企业级项目架构设计的完整历程
  2. 企业级前端监控的实现
  3. 通过rollup.js (opens new window)定制化自己的脚手架
  4. 掌握前端JSSDK的实际开发应用
  5. 自己的npm包从开发到发布到维护的完整链路
  6. Midway.js (opens new window) 完整搭建的后端服务
  7. CI\CD自动化测试及发布
  8. Docker、K8s结合前端项目的使用
  9. 相关大数据的基础知识

# 前置知识

整体架构 →