“灯塔”——一个让人爱不释手的前端监测工具

 引言

"灯塔"(fee)作为一个前端监控系统,通常具备捕获浏览器端错误、性能监控、用户行为跟踪等功能。它的主要目的是帮助开发者了解他们的网站或应用在用户端的表现,以及时发现并解决问题。下面是关于这种系统的一些关键特性和组件:

  1. 错误监控与分析

    • 捕获前端JavaScript错误,包括异常堆栈跟踪。

    • 支持源代码映射(Source Map)来定位压缩代码中的错误。

  2. 性能监控

    • 测量页面加载时间、交互响应时间等性能指标。

    • 分析资源加载时间,帮助识别性能瓶颈。

  3. 用户行为跟踪

    • 记录用户的点击、页面访问、滚动等行为。

    • 可能包括热图分析,以可视化用户行为。

  4. 数据报告和可视化

    • 提供实时监控仪表盘,展示关键性能指标(KPIs)和错误日志。

    • 支持数据过滤、排序和深入分析功能。

  5. 集成与兼容性

    • 可以轻松集成到现有的前端项目中。

    • 支持多种浏览器和设备。

 特点

  • 架构简单、轻量、支持私有化部署

  • 可收集前端设备、系统、环境信息

  • 可以对前端页面 js 报错、资源错误、性能指标进行配置报警等, 并且可以通过上报错误信息引导用户快速定位解决问题

系统功能
 

异常监控

报警

环境搭建

下述mysql以及redis环境的搭建,大家可以期待一下,后期会更新配套的 Docker集成环境一键部署教程。可以帮助大家一键创建相关服务环境,免去繁琐的环境部署与配置给大家带来的不必要的时间开销!

首先请确保您的电脑已经安装下面三个工具,并且环境已经配置完成。

  1. mysql:https://www.mysql.com/

  2. Node.js:https://nodejs.cn/

  3. redis:https://redis.io/

  4. 克隆项目 在克隆项目之前确保你的nodejsmysqlredis环境是可用的。

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

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

5.配置MySQL

  • server/src/configs/mysql.js中修改主机地址/数据库端口/数据库用户名/数据库密码/数据库库名

    在数据库中创建一个空的名字叫做『platform』的数据库。

    const development = {host: '127.0.0.1', // 主机地址port: '3306', // 数据库端口user: 'root', // 数据库用户名password: '00000000', // 数据库密码database: 'platform'  // 数据库库名
    }

    6. 配置redis

  • server/src/configs/redis.js中修改主机地址或redis端口

    const development = {host: '127.0.0.1', // 主机地址port: '6379' // redis端口
    }

7​.安装依赖,在项目 server 目录下

npm install
8.编译 server,打开一个新的窗口在项目 server 目录下
npm run watch

图片

图片


如果对这文章内容感兴趣的,可以关注下方公众号!在公众号中扣“灯塔”即可获得源码和教程!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/549043.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ODIN靶机渗透vulnhub

使用kali的netdiscover -r 192.168.2.0或arp-scan -l命令来查看当前局域网里正在运行的主机ip地址 这里的这个192.168.2.46就是靶机的ip地址 然后使用nmap工具进行扫描,发现开放了一个80端口,http协议,然后进行探测http 这里我使用的工具是…

嵌入式学习之Linux系统编程篇笔记——系统编程初探

配套视频学习链接:https://www.bilibili.com/video/BV1zV411e7Cy?p2&vd_sourced488bc722b90657aaa06a1e8647eddfc 目录 Linux系统编程的基本认识 什么是Linux系统编程? 什么是系统编程 系统编程的作用 怎么学习Linux系统编程? Linux系统编程基本程序框…

YOLOv9改进策略:注意力机制 | 用于微小目标检测的上下文增强和特征细化网络ContextAggregation,助力小目标检测,暴力涨点

💡💡💡本文改进内容:用于微小目标检测的上下文增强和特征细化网络ContextAggregation,助力小目标检测 yolov9-c-ContextAggregation summary: 971 layers, 51002153 parameters, 51002121 gradients, 238.9 GFLOPs 改…

系统渐渐沦为“屎山”,这就是真相!

分享是最有效的学习方式。 博客:https://blog.ktdaddy.com/ 背景 小猫维护现有的系统也有一段时间了,踩坑也不少,事故不少。感兴趣的小伙伴可以了解一下,往期的小猫踩坑记合集。 这天,小猫找到了商城系统的第一任开发…

HTML5语义化元素

在HTML5之前,网站的分布层级有哪些呢? nav,header,main,footer 这样做有一个弊端 我们往往过多的使用div,通过ID或class来区分元素 对于浏览器来说这些元素不够语义化 对于我来说搜索引擎来说,不…

CentOS 7 编译安装 Nginx

CentOS 7 编译安装 Nginx 背景下载 Nginx 源码包安装依赖包编译添加环境变量添加守护查考文献 背景 一开始使用 docker 搭建了一个 web 服务器,但是由于 docker 不太方便的部署 TLS 证书,故使用 Nginx 做反向代理,实现 https 连接。 下载 N…

【Chapter1】操作系统概述,计算机操作系统教程,第四版,左万利,王英

文章目录 一、操作系统的基本概念1.1操作系统的层次结构1.2操作系统的运行视图1.3操作系统的概念(定义)1.4操作系统的功能和目标1.4.1操作系统的功能和目标——作为系统资源的管理者1.4.2操作系统的功能和目标——向上层提供方便易用的服务1.4.2.1GUI:图形化用户接口…

Excel之数据透视表

数据透视:逻辑理解与制作步骤 一、创建数据透视表 1、创建数据透视表:每列必须有表头 (1)选择要创建数据透视表的数据------插入----选择数据透视表 (2)选择现有工作表然后点击目标表选择合适的位置插入…

FRM模型十八:Merton模型

文章目录 莫顿模型介绍(Merton)假设表达式信用利差及违约距离 代码实现 莫顿模型介绍(Merton) 莫顿模型是评估信用风险的一大重要理论。莫顿模型认为,债券是否违约这一行为归根到底是一种选择。当违约的好处>不违约…

Spring-3

目录 Spring AOP和AspectJ AOP 在Spring AOP 中,关注点和横切关注的区别 Spring 框架中的单例 Bean 是线程安全的吗 Spring 是怎么解决循环依赖的? 事务隔离级别 事务的传播级别 Spring 事务实现方式 Spring框架的事务管理有哪些优点 事务注解的…

GitLab/Github从头开始配置秘钥

1、下载git安装包 CNPM Binaries Mirrorhttps://registry.npmmirror.com/binary.html?pathgit-for-windows/ 拉到页面最底部选择 点进文件夹下载32位或者64位的版本,我的是64位就选择64的版本进行安装 2、傻瓜式安装 3、在相应的文件夹右键选择 UserName为你的用…

SSA优化最近邻分类预测(matlab代码)

SSA-最近邻分类预测matlab代码 麻雀搜索算法(Sparrow Search Algorithm, SSA)是一种新型的群智能优化算法,在2020年提出,主要是受麻雀的觅食行为和反捕食行为的启发。 数据为Excel分类数据集数据。 数据集划分为训练集、验证集、测试集,比例为8&#…