前端埋点监控方案

本文涉及的产品
云数据库 RDS MySQL,集群系列 2核4GB
推荐场景:
搭建个人博客
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
RDS MySQL Serverless 高可用系列,价值2615元额度,1个月
简介: 推荐一款比较好的前端埋点监控的方案——[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 进行授权。

其他操作系统,请自行搜索授权方式。【注意】如果不授权,可能无法自动创建每天的数据库表。
相关文章
|
5月前
|
Web App开发 缓存 前端开发
前端性能优化方案有哪些?
前端性能优化方案有哪些?
136 1
|
26天前
|
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
101 3
|
25天前
|
编解码 前端开发 JavaScript
前端移动端适配方案
【9月更文挑战第8天】前端移动端适配方案
44 0
|
2月前
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
26 2
|
2月前
|
XML 监控 前端开发
WebTracing:如何使用一款SDK实现前端全链路监控
WebTracing:如何使用一款SDK实现前端全链路监控
118 1
|
3月前
|
缓存 前端开发 JavaScript
前端常见的性能优化方案?
【7月更文挑战第14天】前端性能优化包括代码压缩、资源合并、图片优化、缓存策略和DOM操作改进。例如,压缩CSS、JS,懒加载图片,使用CDN,事件委托,启用HTTP/2,及利用性能工具进行评估和优化。目标是加快加载速度,提升用户体验和服务器效率。
68 2
|
3月前
|
缓存 前端开发 JavaScript
前端性能优化都有那些方案 ?
【7月更文挑战第11天】 前端性能优化包括资源合并压缩、懒加载、CDN使用、代码优化、缓存利用和图片优化等策略。例如,减少HTTP请求、压缩CSS/JS、事件委托、利用浏览器及服务器缓存、选择合适图片格式等,旨在提升网页速度和用户体验。服务工作者、异步加载和响应式设计也是关键。持续学习新技术以适应不断变化的优化需求。
54 1
|
2月前
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
|
3月前
|
存储 前端开发 JavaScript
前端菜单及按钮权限拦截,实现方案及思路
此实现方案基于vue框架,并需要依赖vue项目相关的库,router、store等等;前端同学要与后端同学协商,常规是让后端返回一个树结构的菜单数据,并且将所有的涉及权限控制的页面path给到后端,如果是按钮,需要把所有的按钮 code 码统一下,这是前期工作,很重要。
|
4月前
|
缓存 监控 前端开发
前端性能监控:从Lighthouse到Real User Monitoring
**前端性能监控关乎用户体验。Lighthouse是自动化审计工具,评估网页性能、最佳实践、可访问性等,通过CLI或Chrome DevTools使用。RUM则实时监控用户与网站互动,收集性能数据。两者结合,从开发到生产环境,全面优化前端性能,包括资源加载、代码优化、网络性能和用户体验。使用Lighthouse和RUM数据,结合CI/CD,持续改进并设定性能预算,采用SSR、Service Worker、Code Splitting等高级策略,确保高性能和用户满意度。**
69 2
下一篇
无影云桌面