前端埋点监控方案

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
简介: 推荐一款比较好的前端埋点监控的方案——[webfunny]

推荐

推荐一款比较好的前端埋点监控的方案——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 进行授权。

其他操作系统,请自行搜索授权方式。【注意】如果不授权,可能无法自动创建每天的数据库表。
相关文章
|
6月前
|
Web App开发 缓存 前端开发
前端性能优化方案有哪些?
前端性能优化方案有哪些?
147 1
|
5天前
|
前端开发 数据可视化 搜索推荐
深入剖析极态云优雅的前端框架设计方案(上)
最近在体验极态云,这款低代码软件开发产品,发现其前端框架设计方案很优雅很强大! 在接下来的学习过程中,我将持续输出自己对极态云前端框架设计方案的深入理解,包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容,希望能为大家提供有价值的参考。
|
20天前
|
缓存 前端开发 UED
前端 8 种图片加载优化方案梳理
本文首发于微信公众号“前端徐徐”,详细探讨了现代网页设计中图片加载速度优化的重要性及方法。内容涵盖图片格式选择(如JPEG、PNG、WebP等)、图片压缩技术、响应式图片、延迟加载、CDN使用、缓存控制、图像裁剪与缩放、Base64编码等前端图片优化策略,旨在帮助开发者提升网页性能和用户体验。
108 0
|
2月前
|
Web App开发 前端开发 JavaScript
Web前端项目的跨平台桌面客户端打包方案之——CEF框架
Chromium Embedded Framework (CEF) 是一个基于 Google Chromium 项目的开源 Web 浏览器控件,旨在为第三方应用提供嵌入式浏览器支持。CEF 隔离了底层 Chromium 和 Blink 的复杂性,提供了稳定的产品级 API。它支持 Windows、Linux 和 Mac 平台,不仅限于 C/C++ 接口,还支持多种语言。CEF 功能强大,性能优异,广泛应用于桌面端开发,如 QQ、微信、网易云音乐等。CEF 开源且采用 BSD 授权,商业友好,装机量已超 1 亿。此外,GitHub 项目 CefDetector 可帮助检测电脑中使用 CEF
267 3
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
36 2
|
2月前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
82 0
|
3月前
|
XML 监控 前端开发
WebTracing:如何使用一款SDK实现前端全链路监控
WebTracing:如何使用一款SDK实现前端全链路监控
172 1
|
4月前
|
缓存 前端开发 JavaScript
前端常见的性能优化方案?
【7月更文挑战第14天】前端性能优化包括代码压缩、资源合并、图片优化、缓存策略和DOM操作改进。例如,压缩CSS、JS,懒加载图片,使用CDN,事件委托,启用HTTP/2,及利用性能工具进行评估和优化。目标是加快加载速度,提升用户体验和服务器效率。
73 2
|
4月前
|
缓存 前端开发 JavaScript
前端性能优化都有那些方案 ?
【7月更文挑战第11天】 前端性能优化包括资源合并压缩、懒加载、CDN使用、代码优化、缓存利用和图片优化等策略。例如,减少HTTP请求、压缩CSS/JS、事件委托、利用浏览器及服务器缓存、选择合适图片格式等,旨在提升网页速度和用户体验。服务工作者、异步加载和响应式设计也是关键。持续学习新技术以适应不断变化的优化需求。
67 1
|
3月前
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理