- 博客(16)
- 资源 (5)
- 收藏
- 关注
RSS订阅转载 页面性能监控中”资源加载”指标的深度解析：为什么静态资源加载时间和页面资源加载时间对不上？
本文解释了前端性能监控中资源加载时间统计差异的原因。当页面详情显示资源加载耗时3500ms，但下方资源列表仅显示20ms时，这并非bug，而是由于两套不同的采集机制导致的正常现象。顶部的"资源加载"时间来自Navigation Timing API，反映浏览器层面的整体加载时间；而资源列表数据来自PerformanceObserver，只记录部分资源。差异主要源于：1）浏览器Performance缓冲区限制导致早期资源丢失；2）SDK过滤了未知类型资源；3）XHR/Fetch请求被主动排
2026-05-27 21:25:07
25
原创 小公司ClickHouse集群版完整部署指南（实战版）
据我多年做全链路分析系统的经验来看，大部分公司数据体量，用单机版基本足够了。像Clickhouse这种OLAP 实时分析型数据库，在大量数据插入和查询方面都特别猛，一次插入几万条数据跟玩似的。但是更新和删除的时候都比较拉胯了，不过正常情况下，也没人专门更新或者删除一条日志啊，所以中小公司用单机版加个备份脚本就可以了。但是集群有集群的好处，它容错率高啊，在高可用场景下很有必要，今天我们就来介绍一个低成本的clickhouse集群。我们也做了一套。
2026-05-21 21:51:50
377
原创 如何建立精细化运营体系
本文介绍了建立高效精细化运营体系的四个核心步骤：1）设定可量化的北极星指标并拆解为KPI；2）整合多源数据，通过用户分层和画像实现精准洞察；3）基于用户生命周期设计自动化运营流程；4）建立复盘优化闭环，通过A/B测试持续迭代。文章特别指出，借助webfunny等一体化埋点系统可实现全链路数据采集与分析，支持多种埋点方式，确保数据安全的同时满足定制化需求，为精细化运营提供技术支撑。该体系强调从目标设定到执行优化的完整闭环，助力企业实现数字化转型。
2026-01-04 17:37:11
246
原创 前端监控系统 SourceMap 自动化解析方案：从手动上传到全自动化解析
本文提出了一种自动化SourceMap解析方案，通过集成Webpack/Vite插件实现构建时自动上传SourceMap文件，解决了传统手动上传方式的繁琐问题。系统采用ClickHouse存储Base64+Gzip压缩的SourceMap文件（压缩率约70%），按项目和版本组织管理，支持分布式部署和降级方案。详细介绍了文件服务设计、数据库表结构、压缩策略及Webpack插件实现，包括自动版本生成功能。该方案实现了错误代码与源文件的精准对齐，在错误分析和用户细查场景中显著提升了定位效率，相比传统方案更加省时省
2026-01-04 16:58:58
970
原创 Webfunny打造埋点系统：从概念到实践
《埋点系统入门与进阶指南》摘要：埋点系统是产品决策的关键基础设施，通过结构化记录用户行为数据，解决"功能使用率"、"用户流失点"等核心问题。文章系统介绍了埋点的本质（带上下文的结构化日志）、三种实现方式（代码埋点、可视化埋点、无埋点）及其适用场景，并剖析完整埋点系统的五大模块架构（采集层到可视化层）。建议团队从核心业务问题出发，采用渐进式建设路径，强调规范化管理与技术选型平衡。最终指出优秀的埋点体系需要技术方案与协作机制并重，避免盲目追求"全埋点"
2025-11-27 14:50:17
754
原创 Webfunny 高可用架构演进之路：从单机到集群的实战经验
本文记录了Webfunny前端监控系统架构的演进过程。最初采用Node.js+MySQL单机架构，但随着数据量从日均100万增长到1亿+，面临性能瓶颈。首先通过MySQL分表策略优化，后改用ClickHouse解决海量数据存储和查询问题。当日志量达3000万时出现TCP连接数瓶颈，引入K8s实现动态扩容。最终采用ClickHouse主从集群模式，支持每天10亿级日志处理。文章分享了从单机到分布式架构的技术选型思路，为应对业务增长提供了实践经验。
2025-11-26 09:30:00
1263
原创 前端监控系统的必要性与核心功能解析
摘要： 现代前端应用日益复杂，兼容性、性能、线上Bug等问题频发，传统排查方式效率低下。完善的前端监控系统能实时捕捉错误（JS/资源/接口）、多维度分析性能（FCP/LCP等）、记录用户行为，并通过Dashboard可视化数据，结合告警机制快速定位问题。市场方案分为SaaS、开源和私有化部署三类，选型需考虑团队规模和数据安全性。Webfunny作为私有化方案，支持多平台监控，具备轻量SDK、精准SourceMap映射、用户细查等功能，30分钟即可部署，适合中大型企业。前端监控能显著提升问题定位速度（缩短80
2025-11-20 12:27:00
1018
原创 前端埋点系统之鉴权登录页面如何做热力图（三）
对于无需登录的网页，热力数据可以直接覆盖，但在需要登录的网页上，由于自动跳转到登录页，热力图数据会失效。文章提出了三种解决方案：1）保持域名相同，共享cookie中的token数据；2）手动设置cookie，通过配置X-Frame-Options请求头允许嵌套；3）通过上传截图方式，利用截图工具或html2canvas库进行网页截屏。每种方案都有其优缺点，用户可根据实际情况选择合适的方法。文章最后总结了手动截图和canvas截图的优缺点，并鼓励读者根据需求做出选择。
2025-05-16 16:41:22
1039
原创 前端埋点系统之如何实现网页热力占比图（二）
本文介绍了热力图的另一种展示形式——热力占比图，并详细讲解了其实现步骤。首先，通过监听网页点击事件采集热力数据，记录用户的点击位置和相关信息。接着，根据采集到的热力值生成浮框，展示点击百分比及详细数据，如点击次数、人数和比例等。最后，提供了查看热力数据详情的功能，帮助分析师深入分析用户行为。热力占比图通过百分比形式展示用户点击情况，数据更加具体，便于业务分析。
2025-05-16 16:37:30
445
原创 前端埋点系统之如何用heatmap.js画网页热力图（一）
在数字化时代，理解用户行为对企业至关重要。热力图作为埋点系统的一部分，能够直观展示用户与网页的互动，如点击量、鼠标停留时长和页面元素曝光时长。实现热力图效果可以利用开源工具如heatmap.js，通过监听用户的点击和移动事件来采集数据，并将这些数据以热力图的形式覆盖在网页上。此外，虽然heatmap.js本身不提供热力值提示，但可以通过添加鼠标移动事件和自定义代码来显示热力值，从而优化用户体验。这种方法不仅提升了数据分析的直观性，也为企业提供了更深入的用户行为洞察。
2025-05-16 16:34:34
1236
原创 我们切换Clickhouse数据库后，硬盘就爆了
如大家所知，Clickhouse数据有几大优点，很适合处理海量的数据，如：查询效率高、clickhouse号称10亿数据，毫秒级查询返回结果；数据压缩率高、它采用了列式存储，对数据压缩有天然优势，节省硬盘资源；集群化、clickhouse天生支持集群化，同时有分区和分片设计，已经涵盖了我们按天分表的设计；
2024-10-26 15:04:03
1305
原创 前端白屏检测方案
白屏是最严重的生产事故之一，如果大量发生，将直接导致业务瘫痪。页面白屏，复现难度高，因为导致白屏出现的原因非常多。本文将带你了解如何检测页面白屏，如何定位白屏出现的原因以及如何解决白屏问题。
2024-06-06 00:52:13
3277
原创 什么是热力图？埋点系统热力图分析
在当今数字化时代，理解用户行为成为了企业成功的关键之一。随着互联网的发展，用户与网站、应用和产品的互动变得愈发复杂而多样化。在这样的背景下，埋点系统成为了洞察用户行为的重要工具之一。而其中的热力图分析，更是为我们提供了一扇窥探用户行为的窗户。
2024-05-21 23:56:35
3287
原创 React + Antd + Wepack 项目体积优化记录（一期）
Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。最近，开始有一些小伙伴向我们反馈，webfunny页面加载速度比较慢，且偶尔会出现页面崩溃的情况。刚开始我是不大相信的，因为在我的电脑上访问，感觉都是很正常的，直到我把浏览器文件的压缩对比打开后，才发现：经过这么长时间的功能迭代，前端项目打包的体积已经变得如此臃肿了！！！非常惭愧，是我们疏忽了！接下来我们将对Webfunny进行两期的体积优化，争取能够给大家一个更好的使用体验。
2024-05-21 23:44:13
1065
原创 怎样实现微信公众号扫码关注完成登录（超详细流程）
Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。今天，我们来详细介绍一下关注微信公众号后，并完成登录的详细流程。微信登录广为人知了，涉及到订阅号，公众号，小程序等，他们各自登录流程有和区别，很多同学可能不甚清楚。我也是经过一番调研和倒腾才搞明白了是怎么回事，特此记录，以供大家了解和学习。可以完成微信登录主要涉及两个平台，一个微信公众平台，一个是微信开放平台，他们俩服务的对象是不同的。微信开放平台主要面对移动应用/网站应用开发者，为其提供微信登录、分享、支付等相关权限和服务。
2024-05-20 17:26:45
5011
1
原创 React数字滚动组件 numbers-scroll
初始状态中，数字都在显示框下方等待。虽然个人觉得通过tranform来控制显示位置会更好些，但是目前采用的是方式二，控制margin-top的值来展示数字的位置，效果还算可以了，有兴趣的同学可以改造成transform。数字滚动组件，也可以叫数字轮播组件，这个名字一听就是非常普通常见的组件，第一反应就是想找找网上大佬的东西顶礼膜拜一下，这一搜，还真是没找到趁手的╮(╯▽╰)╭。初始状态中，每个数字展示的窗口下边都有0-9这10个数字在等待中，传入具体数字后，每个窗口就可以开始移动数字的位置了。
2023-03-10 14:56:32
1106
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人