灯塔

介绍

fee（灯塔） 是前端监控系统，贝壳找房主要前端监控系统，服务公司上百条产品线。 特点：架构简单、轻量、支持私有化部署。可收集前端设备、系统、环境信息， 可以对前端页面js报错、资源错误、性能指标进行配置报警等， 并且可以通过上报错误信息引导用户快速定位解决问题。

系统功能

用户行为

  • 用户在线时长

在线时长

  • 菜单点击量

菜单点击量

  • 用户增长

用户增长 用户增长

异常监控

  • 页面性能

页面性能 页面性能

  • 错误看板

错误看板

报警

  • 报警配置

报警配置

  • 报警日志

报警日志

环境搭建

下述mysql以及redis环境的搭建，大家可以移步配套 Docker集成环境一键部署（欢迎大家star）。可以帮助大家一键创建相关服务环境，免去繁琐的环境部署与配置给大家带来的不必要的时间开销！

  1. mysql
  2. Node.js
  3. redis

  4. 克隆项目 在克隆项目之前确保你的nodejs、mysql和redis环境是可用的。

    1.  mkdir -p ~/www/ \
    2.  &&  cd ~/www/ \
    3.  &&  git clone git@github.com:LianjiaTech/fee.git \
    4.  &&  cd fee

    在~/www/openfee找到我们克隆的项目

  5. 配置MySQL

  • 在server/src/configs/mysql.js中修改主机地址/数据库端口/数据库用户名/数据库密码/数据库库名
  • 在数据库中创建一个空的名字叫做『platform』的数据库。
    1.   const development = {
    2.     host: '127.0.0.1', // 主机地址
    3.     port: '3306', // 数据库端口
    4.     user: 'root', // 数据库用户名
    5.     password: '00000000', // 数据库密码
    6.     database: 'platform'  // 数据库库名
    7.   }
  1. 配置redis
  • 在server/src/configs/redis.js中修改主机地址或redis端口
    1.   // 开发环境配置
    2.   const development = {
    3.     host: '127.0.0.1', // 主机地址
    4.     port: '6379' // redis端口
    5.   }
  1. 安装依赖，在项目 server 目录下
    1.  npm install
  2. 编译 server，打开一个新的窗口在项目 server 目录下
    1.  npm run watch
  3. 启动server服务，在项目 server 目录下
    1.  npm run dev

  4. 创建数据库

    • a. 在项目 server 目录下执行下列指令，会在当前目录下生成 init.sql 文件
      1. npm run fee Utils:GenerateSQL 1 '2020-01' '2020-07' > init.sql
    • b. 复制 init.sql中的内容（不包括文件中的前两行），完成数据库表的创建。

  5. 初始化样例数据。在项目 server 目录下，执行下列指令

    1. npm run fee Utils:TemplateSQL

    执行成功后，样例数据会被写入数据库中。

  6. 安装 Client 依赖，在项目 client 目录下

    1. npm install

  7. 启动 Client 服务，在项目 client 目录下

    1. npm run dev

  8. 访问本地服务: 127.0.0.1:8080

  • a. 使用默认管理员账户登录
    • 账号：test@qq.com
    • 密码：admin
  • b. 或进行注册、登录，就能看到模板项目数据了。

npm依赖插件说明

  1. dependencies =>
  3. mysql           =>  mysql客户端
  4. ioredis         =>  redis客户端
  5. knex            =>  SQL Query Builder
  6. @adonisjs/ace   =>  命令注册/管理工具
  7. node-schedule   =>  node版crontab, 用于进程调度
  8. log4js          =>  日志记录
  9. lei-stream      =>  流式读取/写入文件. 对node的ReadStream/WriteStream的简单封装
  10. query-string    =>  解析url
  11. ua-parser-js    =>  解析ua
  12. axios           =>  发起http请求
  13. shelljs         =>  执行常见shell命令, 例如, mkdir -p
  14. date-fns@next   =>  替代moment进行日期操作, 目前2.0版本还处于alpha状态, 待正式发布后即可取消@next标记
  15. ini             =>  读取线上环境的ini配置文件
  16. ipip-datx       =>  将ip转换为对应坐标, ipip.net出品
  18. devDependencies =>
  20. node-rdkafka                =>  获取kafka数据, 如果node-kafka无法运行, 考虑本机中是否有librdkafka库 => `sudo apt-get install librdkafka-dev` & 本机是否安装了Python2.7
  21.                             =>  说明: node-rdkafka需要使用gcc进行编译, 但Jinkins上没有相应的编译脚本, 为了能从Jinkins上编译通过, 将`node-rdkfka`放在了dev依赖中.
  22.                             =>  线上发布时, 直接把预编译好的tar文件解压到node_module文件夹里, 跳过gcc编译流程(开发机环境和线上环境一致, 因此使用开发机进行预编译)
  23.                             =>  预编译时需要使用和线上node一致的版本
  24.                             =>  打包命令demo => `tar cfv  pre_package.tar.gz node-rdkafka nan bindings`
  25.                             =>  打包完成后使用 `sz node-rdkafka.tar.gz` 即可将文件下载到本机
  27. @babel/*                    =>  7.0系列, 方便脱离对node环境的依赖, 使用js的最新特性
  28. babel-plugin-root-import    =>  解除对相对路径的依赖(项目中通过webpack.config.js(WebStrom) & jsconfig.json(VSCode)辅助编辑器识别路径)
  29. nodemon                     =>  动态启动/载入项目
  30. standard                    =>  JS Standard代码规范

打点服务Demo搭建

参见打点服务Demo搭建

加入群来和开发人员讨论问题

灯塔 - 图10

作者书籍

项目搭建背景，以及前端监控平台搭建原理，设计思路，一步一步教你做。

灯塔 - 图11

购书链接

License

MIT

Copyright(c) 2017 Lianjia, Inc. All Rights Reserved