- 博客(53)
- 收藏
- 关注
RSS订阅原创 前端埋点系统之如何用heatmap.js画网页热力图
Hello，大家好。在当今数字化时代，理解用户行为成为了企业成功的关键之一。随着互联网的发展，用户与网站、应用和产品的互动变得愈发复杂而多样化。在这样的背景下，埋点系统成为了洞察用户行为的重要工具之一。而其中的热力图分析，则更加直观的帮助我们分析用户的喜好。之前我们介绍了什么是热力图，以及它如何成为理解用户行为的有力工具。今天我们从技术的角度来看，如何实现热力图效果呢？热力图是埋点系统必不可少的一项能力，可以来看看。
2024-11-03 18:18:37
1600
原创 IDEA集成AI的DevAssist插件使用指南
DevAssit是一款高效的智能开发辅助插件平台，它基于强大的大语言模型，为开发者提供了一系列AI智能代码辅助功能。DevAssist通过上下文感知的智能分析，帮助开发者在编码过程中快速解决问题，提高代码质量，促进团队协作。这些功能不仅包含代码补全，同时还能为用户提供了代码问答（代码重构、用例编写、代码解释）等辅助功能。它还支持多语言和跨平台使用，确保了广泛的适用性和一致的用户体验。同时DevAssist致力于通过个性数据私有话数据，为开发者提供一个全面、高效且安全的编程环境。4.1.平台用户欢迎界面。
2024-10-27 18:55:24
986
原创 Clickhouse硬盘爆了！该如何进行排查和优化设置？
Hello大家好，在我们使用了clickhouse进行数据存储后，多多少少遇到一些棘手的问题，在此分享一下，希望对有同样情况的同学有所帮助。我们平台使用clickhouse改造后，系统流畅度得到大幅提升，大家有兴趣可以来体验一下效果，如大家所知，Clickhouse数据有几大优点，很适合处理海量的数据，如：查询效率高、clickhouse号称10亿数据，毫秒级查询返回结果；数据压缩率高、它采用了列式存储，对数据压缩有天然优势，节省硬盘资源；
2024-10-27 18:49:00
1054
原创 linux日常使用命令总结
命令是一个更加强大的文件复制工具，它支持增量复制，即只复制文件中变化的部分，从而节省了大量的时间和带宽。下面是使用 cp 命令复制文件的一些基本用法和示例。命令主要用于创建和提取存档文件，但它也可以用来复制文件。复制文件的优点是可以一次性复制多个文件，并且可以保留文件属性。在 Linux 中，复制文件是一个常见的操作，通常使用。命令之外，还有一些其他工具可以用来复制文件，例如。：仅在源文件比目标文件新或目标文件不存在时复制。：交互模式，在覆盖现有文件之前询问用户。：详细模式，显示复制的详细信息。
2024-09-08 16:42:45
1391
1
原创 三步教你打造精准埋点方案，提升数据分析效率
事件：相当于webfunny埋点系统的“点位”，用来定义用户行为（用户在使用网站、App或小程序的过程中触发的行为）或系统事件作为埋点对象，如“点击购买按钮”、“页面加载完成”等。属性：相当于webfunny埋点系统的“字段”，可以通过属性为事件补充相关的信息，以提供更丰富的上下文信息，如事件发生的时间、用户ID、设备信息等。
2024-09-08 15:59:08
1723
原创 前端布局利器：Flex布局
曾经的我们使用传统布局方式，我们深刻的体会着1px除不尽，三等分，居中，塌陷等等让我们升血压的问题。传统的布局方式：布局繁琐，需要使用大量的HTML和CSS代码来实现简单的布局。灵活性差，难以实现复杂的布局效果。难以维护，由于使用了大量的HTML和CSS代码，导致布局难以维护和修改。移动端适应性差，在移动设备上可能无法很好地展示。布局的传统解决方案，基于盒状模型，依赖display属性+ position属性+ float属性。
2024-09-02 15:00:00
1975
原创 前端Flex布局常见的几个问题
在Flex布局中，如果元素的大小超过了父容器的大小，那么该元素会自动溢出。要处理溢出的情况，你可以使用CSS的overflow属性来指定溢出时的处理方式。要改变Flex元素的顺序，你可以使用CSS的order属性。要创建灵活的网格布局，你可以将多个Flex容器组合在一起，并使用CSS的grid布局方式。在Flex布局中，元素的大小是根据其内容的自然大小来确定的。如果要改变元素的大小，你可以使用CSS的。要改变Flex元素之间的间隔，你可以使用CSS的。要处理Flex元素的对齐，你可以使用CSS的。
2024-09-02 12:00:00
1154
原创 ClickHousez中如何定时清理过期数据库？
要在ClickHouse中自动删除过期的数据库，你可以使用ClickHouse的SQL命令结合外部脚本（如Shell脚本）和计划任务（如cron）来实现。下面是一个示例，展示如何创建一个Shell脚本来检查数据库的创建时间，并根据设定的时间阈值来删除过期的数据库。步骤 1: 创建 Shell 脚本首先，创建一个Shell脚本，用于检查ClickHouse中的数据库，并根据创建时间来删除过期的数据库。示例脚本。
2024-09-01 17:58:57
1779
原创 如何快速搭建一套属于自己的埋点系统？
今天给大家分享下埋点系统如何进行创建使用？毕竟埋点创建好上报后，是需要直观的展现出来数据，所以今天来介绍一下如何快速搭建属于自己的一套埋点系统，比如怎么建点位、卡片、进行数据分析等。在开始介绍前先介绍下，让新同学快速了解这个产品是一个轻量级、易使用，埋点分析一体化的产品，用户可以根据自己的需求，创建不同的埋点，选择不同的图形在数据看板中来展示分析数据，我们支持单个数据的展示，有适用于体现数据的变化趋势，也有适用于体现总量和比率，还支持多个数据进行重叠展示等等。
2024-08-11 20:14:29
1099
原创 webfunny埋点系统创建数据分析
之前给大家分享过如何哟个webfunny快速搭建属于自己的埋点系统，j利用点位字段创建好卡片进行数据展示，今天给大家演示下埋点系统进行数据分析卡片创建完成后的DEMO，比较直观帮助大家了解不过DEMO只是演示，具体的业务分析还需要根据实际情况进行字段点位创建，创建完成后根据要看的业务数据分析目标在进行具体看数。
2024-08-11 20:12:48
381
原创 clickhouse使用clickhouse-backup来本地和远程备份文件
【代码】clickhouse使用clickhouse-backup来本地和远程备份文件。
2024-08-04 19:11:49
429
原创 webfunny埋点系统如何进行部署？
hello 大家webfunny埋点系统做了不少功能更新，平常给大家分享比较多的是****，最近有不少技术同学来了解webfunny埋点系统，今天主要给大家分享下webfunny埋点系统部署，分为本地部署和线上部署。还没有试用和部署过webfunny埋点系统的同学，可以跟着下面部署引导，在上进行demo试用部署实操。
2024-08-04 19:02:47
1022
原创 Webfunny白屏检测方案（附操作介绍）
页面白屏，绝对是让前端开发者最为胆寒的事情，特别是随着 SPA 项目的盛行，前端白屏的情况变得更为复杂且棘手起来。2、判断17这个采样点是否在该容器集合中，就是判断这17个位置下有没有dom元素，如果都没有，则说明白屏了，同时开启轮询检测，来确保白屏检测结果的正确性，直到页面的正常渲染。依据平均值，可以通过DOM数量来辅助判断白屏和业务白屏的方式，提升白屏判断的准确性。复现难度高，面对这样的问题，内心很虚，因为导致白屏出现的原因非常多，这不是一个明确的错误，如果没有好用的监控工具，真不知道该从何入手。
2024-07-13 20:32:29
821
原创 ClickHouse备份方案
对于大规模生产环境，通常推荐使用clickhouse-backup工具进行自动化备份管理，因为它提供了更全面的功能和更好的灵活性。这个工具由Altinity维护，支持全量备份、增量备份、恢复、备份加密、备份验证等功能。这是一种在线备份的方式，不会影响表的正常使用，但需要手动管理备份文件，并且更适合小规模或特定场景下的备份需求。这种方式提供了在线备份的能力，适合小规模数据或部分数据的备份。命令创建增量备份，仅备份自上次备份以来变化的数据。**全量备份：**使用。**增量备份：**使用。
2024-06-23 17:38:59
601
原创 Webfunny【用户细查】七项功能升级更新：大幅提升用户排查效率！
为了提升用户细查的使用体验，我们在查询时间范围、查询时间颗粒度、筛选条件、布局和呈现方式等地方做了大量的改动和优化；同时，增加了用户历史足迹、白屏检测能力、用户使用体验评估、丰富了基础信息内容，极大的提高了排查问题的效率。
2024-06-23 17:34:18
525
原创 Nginx代理配置（专业版）
注意：监控系统只是运行代码，是否支持https，需要运维同学在你们的服务器上配置https证书，配置好证书，就可以支持https了。常见问题：很多同学配置好了https证书，但是上报接口用的还是http。webfunny的探针是根据监控项目的网址来判断的，你的。以上是webfunny<Nginx代理配置>操作介绍, ps： 如果你是前端工程师的相关技术同学，欢迎试用体验**写在前面提醒：使用代理，如果可以，请尽量支持双协议，http、https均要支持哈。，上报接口也会切换到https。
2024-05-26 12:15:26
1005
原创 如何优化解决React + Antd + Wepack 项目体积大问题！！
Hello，大家下午好，今天想给大家分享一期webfunny优化的功能。主要是最近陆续有一些小伙伴向我们反馈，webfunny页面加载速度比较慢，且偶尔会出现页面崩溃的情况。刚开始我是不大相信的，因为在我的电脑上访问，运行都是很正常的，直到我把浏览器文件的压缩对比打开后，才发现：经过这么长时间的功能迭代，前端项目打包的体积已经变得如此臃肿了！！！非常惭愧，是我们疏忽了这点！接下来我们将对，争取能够给大家一个更好的使用体验。如果你也想知道线上应用的响应时长，也可以监控一下试试，看看效果。
2024-05-26 12:10:30
996
原创 如何快速实现微信公众号扫码关注完成登录（附：超详细操作流程）
Hello，大家好，欢迎使用Webfunny前端监控和埋点平台。今天，我们来详细介绍一下关注微信公众号后，并完成登录的详细流程。微信登录广为人知了，涉及到订阅号，公众号，小程序等，他们各自登录流程有和区别，很多同学可能不甚清楚。我也是经过一番调研和倒腾才搞明白了是怎么回事，特此记录，以供大家了解和学习。微信公众平台用于管理、开放微信公众号（包括订阅号、服务号、企业号），简单的说就是微信公众号的后台运营、管理系统。
2024-05-19 12:53:07
8688
1
原创 【监控探针】H5监控探针，npm安装方法，4步轻松搞定
企业版、H5探针、npm包（@webfunny/monitor）hello，小伙伴们，为了方便大家引入探针，我们提供了npm包供大家下载。
2024-05-19 12:34:51
713
原创 手把手教你搭建Gitlab服务器，避免踩坑！
停止Gitlab在进行卸载之前，需要先停止GitLab服务以确保其正在运行。你可以使用以下命令停止GitLab服务：卸载Gitlab如果你是使用 Debian/Ubuntu 通过 apt 安装的 GitLab，则可以使用以下命令卸载：其他安装方式可以参考这个文档进行卸载。好了，以上就是gitlab安装的完整教程了，我相信你也能很轻松部署一套gitlab服务器的。PS： 如果你是前端工程师同学，欢迎试用体验【webfunny前端监控系统】。欢迎试用体验【webfunny前端监控系统】
2024-04-23 20:30:00
1631
原创 Webfunny埋点系统如何统计留存率
Hello，大家好，有小伙伴想要咨询该如何统计，今天我们就来讲一讲吧。首先，我们以次日留存率来作为示例讲解说明，3日，7日留存率也是同理的。示例场景：用户第一天前来注册，第二天又回来登录的用户为目标用户，计算用户的次日留存率。
2024-04-23 14:00:00
370
原创 Docker容器化部署（企业版）
大家好，webfunny前端监控埋点系统，已经正式发布了目录：https://hub.docker.com/r/webfunny/webfunny_monitor_cluster/tags部署前提是你的服务器已经安装了Docker环境，没有安装docker环境的可以参考这篇安装文档。
2024-04-21 17:09:04
1018
原创 【埋点探针】UniApp-SDK安装
给大家分享**webfunny埋点系统**最新功能更新——【埋点探针】UniApp-SDK安装，按照下面步骤开始操作吧。
2024-04-21 16:57:46
515
原创 【埋点探针】微信小程序SDK安装
点位上报完成后，可以在点位测试里验证是否上报成功了。选择点位后，如果能搜索出结果，则说明点位上报成功了。在项目根目录下，创建sdk文件，webfunny.event.js。点位上报十分方便，只需要将下边的点位信息复制下来，放入代码中即可。埋点SDK引入后，则可以开始上报点位信息了。如果你是前端工程师同学，对埋点系统想要实操，选择Wechat，复制sdk代码。
2024-04-21 16:52:00
832
原创 Webfunny前端监控如何接入飞书单点登录（SSO）
Hello，大家好，欢迎使用****。今天我们将介绍一下如何接入飞书的登录系统。友情提示：如果飞书侧已经配置好了，可以直接跳到第六步阅读。
2024-04-21 16:09:20
1355
原创 Webfunny大版本改造（mysql迁移至clickhouse)
前段时间，都在忙着改造webfunny的clickhouse版。改造的内容非常之多，工作量非常之大，以至于有些技术小伙伴提的优化建议、在那段时间暂时被搁置，除非是比较严重的bug。好在经过几个月的加班加点改造到上线，目前版本使用下来效果还是可以的，也没有浪费我们投入这么多时间，现在也在着力优化小伙伴们之前提的建议，。
2024-04-21 15:48:36
932
原创 如何搞定前端异常监控？
用户在使用应用时，可能会遇到预期之外的结果。不同的异常情况带来的后果也会有所不同，有些可能只会让用户感到不满意，而有些则可能导致产品无法正常使用，从而使用户失去对产品的信任。
2024-04-06 20:06:10
902
原创 如何定位和解决：前端经常出现Script error
Hello，大家好。。Script error.这个错误非常的高傲和神秘，为什么呢？因为它出现的时候，不会给你提供任何有关它的线索。正常我们写的前端代码报错的时候，浏览器通常抛出错误代码的行列号，以及它的堆栈代码，这样我们就可以快速定位到错误的位置。而这个错误发生的时候，连根毛的线索都没有提供，有毛的线索吗 ，一根都没有。那么它凭什么这么嚣张呢？
2024-04-06 19:18:28
5945
原创 教你怎么区分并应用埋点：前端-埋点的定义、分类及用途介绍
数据埋点是一种重要的数据采集方法，其主要目的是记录和收集终端用户的操作行为。其基本原理是在App/H5/PC等终端上部署采集的SDK代码，当用户的行为满足特定条件（如进入某个页面、点击某个按钮）时，会自动触发记录和存储操作。随后，这些数据会被收集并传输给终端提供商，或用于后端采集用户使用服务过程中的请求数据。
2024-03-24 15:52:34
1875
原创 webfunny用户行为深度解析：埋点系统热力图全面分析
热力图是以特殊高亮的形式显示用户页面点击位置或用户所在页面位置的图示，是一种非常好用的工具，一图抵千言，借助热图，可以直观地观察到用户的总体的偏好。热力图本质上是一个数值矩阵，图上每一个色块都是一个数值，通过离散数值、权重算法与分析模型等技术手段，将用户行为频度以色块的形式展现出来。通过可视化的效果呈现，帮助产品经理（分析师）深入分析用户对内容及功能的访问情况、操作习惯、行为偏好等。下图热力效果的经典案例，谷歌首页点击热力图的效果，所见即所得，红色是黄金地段。
2024-03-24 15:29:18
1362
原创 webpack之url-loader快速转换Base64
众所周知可以全局配置url-loader，对一些静态资源的超过设定目标转换成base64,直接打包的时候打在js文件中，能更快的响应。然在某些特定的环境，需要单独的对一些超过之前设定的目标大小，但是又不想改变全局设定，如何让特殊的某个或某几个文件也能变成base64............
2022-07-24 22:49:48
936
原创 Webfunny系统更新至3.0.84：优化了小程序，Uni-app探针的配置等
Webfunny 前端异常监控服务Webfunny提供专业的前端异常监控服务，我们的插件可以提供全方位的异常监控，可以帮助开发者第一时间定位各种前端异常，针对前端使⽤场景专⻔研发，适应更多⾼并发场景。并且，Webfunny 可以部署在任何地⽅，监控数据可以回流，监控⽇志存储在本地数据库，⽆⻛险；不限制创建应⽤个数和应⽤流量，可⾃定义⽇志存储时间 ，Webfunny 帮助开发者快速复现 BUG，提高 bug 修复效率。Webfunny前端监控系统更新版本：3.0.53- 3.0.84最新版本：3.0
2022-05-12 21:38:25
356
原创 问卷调查设计-SurveyJS的使用教程
最近在帮忙设计一款关于APP上可以进行问卷调查的任务，于是网上搜索的相关知识，找到了survey.io这个前端组件，用起来感觉很不错，推荐给大家使用。一、优点： SurveyJS完全可定制的调查、表格和测验，无缝集成到您的应用程序中。SurveyJS 超越了基于云的调查• 在您的应用程序中嵌入调查• 将调查创建者添加到您的应用程序• 实施您自己的数据存储二、SurveyJS的使用去SurveyJS官网注册创建自己的账号，用来实时保存自己编辑的文件，地址：https://surveyjs..
2022-05-10 21:40:33
1608
2
原创 Webfunny系统更新至3.0.84：优化了小程序，Uni-app探针的配置能力等
Webfunny 前端异常监控服务Webfunny提供专业的前端异常监控服务，我们的插件可以提供全方位的异常监控，可以帮助开发者第一时间定位各种前端异常，针对前端使⽤场景专⻔研发，适应更多⾼并发场景。并且，Webfunny 可以部署在任何地⽅，监控数据可以回流，监控⽇志存储在本地数据库，⽆⻛险；不限制创建应⽤个数和应⽤流量，可⾃定义⽇志存储时间 ，Webfunny 帮助开发者快速复现 BUG，提高 bug 修复效率，欢迎大家免费试用~更新版本：3.0.53- 3.0.84最新版本：3.0.84更
2022-05-10 19:49:10
214
原创 浅谈react-router-dom V6的配置使用
最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，也不算啥新东西）…V6的版本相对于V5,做了很多的优化，有书写方面的、路由的嵌套、路由配置化、鉴权方面等等，下面就简单的介绍下如何使用一、关于书写方面路由注册的时候由的Switch改为了Routes//V5版本 import {Route, Switch} from 'react-router-dom
2022-05-09 11:30:00
721
原创 react-router-dom V6的配置使用
最近在搭建PC项目的React框架，涉及到React Router，开发同学有时就需要去尝试点新的东西，在开发过程中才不会枯燥的，基于这个理念推动，就在搭建的时候用V6的版本开始了（虽然只是个新版本，也不算啥新东西）…V6的版本相对于V5,做了很多的优化，有书写方面的、路由的嵌套、路由配置化、鉴权方面等等，下面就简单的介绍下如何使用一、关于书写方面路由注册的时候由的Switch改为了Routes//V5版本 import {Route, Switch} from 'react-router-do
2022-05-08 17:27:03
1595
1
原创 浅谈：React Hooks 异步操作
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性，Hook 不会影响你对React概念得理解。恰恰相反，Hook 为已知的 React 概念提供了更直接的 API：props， state，context，refs 以及生命周期。稍后我们将看到，Hook 还提供了一种更强大的方式来组合他们。从而使得函数式组件从无状态的变化为有状态的。React 的类型包 @types/react 中也同步把 React.SFC (St
2022-05-08 15:48:54
2659
原创 使用vue-cli快速搭建 vue3.0项目
1.介绍Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：通过 @vue/cli 实现的交互式的项目脚手架。通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。/cli-service)，该依赖：可升级；一个运行时依赖 (@vue基于 webpack 构建，并带有合理的默认配置；可以通过项目内的配置文件进行配置；可以通过插件进行扩展。一个丰富的官方插件集合，集成了前端生态中最好的工具。一套完全图形
2022-04-28 23:37:45
1096
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人