前端埋点监控方案

推荐

推荐一款比较好的前端埋点监控的方案——webfunny。之前公司要求做埋点监控时调研并试用的产品。值得一试，下面是使用的教程，简单易懂

第一步：初始化项目

1.在项目根目录下执行初始化命令和安装命令$：npm run init && npm install

建议切换淘宝镜像：' npm config set registry http://registry.npm.taobao.org/ '

默认没有bin目录，执行' npm run init '命令生成bin目录

2.确认是否安装了pm2，如果没有安装pm2，请执行安装命令$：npm install pm2 -g

第二步：配置数据库MySql链接

1. 安装 Mysql 数据库（Mysql安装教程）

2. 创建数据库
数据库名称：webfunny_db。
字符集设置：[Default Character set]：utf8、 [Default Collation]：utf8_bin

3. 数据库连接配置
进入webfunny_event/bin/mysqlConfig.js文件中（如果没有数据库，可以联系我，使用测试数据库哦）

module.exports = {
  write: {
    ip: 'xxx.xxx.xxx.xxx',         // 远程ip地址
    port: '3306',                  // 端口号
    dataBaseName: 'webfunny_db',   // 数据库名
    userName: 'root',              // 用户名
    password: '123456'             // 密码
  }
}

第三步：本地部署运行

1) 此时此刻，本地配置已经完成了，尝试运行命令$: npm run prd
如果提示报错：Script already launched，说明程序已经运行了，请使用$: npm run restart

2) 打开浏览器，访问地址：http://localhost:8014/webfunny_event/register.html?type=1 (初始化管理员账号，并登录)

3) 创建新项目后，可以看到探针部署教程，完成部署。

第四步：生产环境部署

1. IP地址或者域名配置（方式一）
进入webfunny_monitor/bin/domain.js文件中（注意，对应的端口号要保持一致）

IP地址配置方式：
module.exports = {
  localServerDomain: 'xxx.xxx.xxx.xxx:8015',    // 日志上报域名
  localAssetsDomain: 'xxx.xxx.xxx.xxx:8014',    // 日志上报域名
  
  localServerPort: '8015',                      // 日志上报端口号
  localAssetsPort: '8014',                      // 前端页面端口号
}

2. 代理域名配置，去掉端口号（方式二）
使用代理域名的用户，请一定要理解清楚Nginx代理的方法

代理域名配置方式（端口号还是需要配置的）：
module.exports = {
  localServerDomain: 'www.baidu.com',      // 日志上报域名
  localAssetsDomain: 'www.baidu.com',      // 可视化服务域名
  
  localServerPort: '8015',                 // 日志上报端口号
  localAssetsPort: '8014',                 // 前端页面端口号
}

第五步：添加执行权限

正常情况下 createTable.sh 这两个脚本没有执行权限，需要用户手动授权。
linux、mac系统，需要在项目根目录下执行命令$：chmod 755 createTable.sh 进行授权。

其他操作系统，请自行搜索授权方式。【注意】如果不授权，可能无法自动创建每天的数据库表。