无论是初创的小公司，还是互联网大厂。只要是能赚钱的业务，那它的前端项目必定是需要监控的。你们的项目直接果奔？不需要任何监控？那没事了。但是，有木有一种可能，你们一路果奔的前端项目，在不久的将来，出现了本不该出现的 bug，关键这个 bug 还不是你们内部自己发现的，而是客户发现的。这个时候你就需要一款强大的前端监控了。

一.基础软件的数据采集 历史，业务数据：数据库DB，日志LOG用户行为数据：数据埋点1.定义埋点是数据采集的重要方式，通过在页面上植入代码，监控用户行为（如页面加载，按钮点击等）用户一旦触发了该事件，就会根据埋点信息将相关数据上传到数据服务器 是数据采集领域（尤其是用户行为数据采集领域）的术语，指的是针对特定用户行为或事件进行捕获，处理和发送的相关技术及其实施过程。比如用户某个icon点击次数，观看某个视频的时长等 埋点的技术实质是先监听软件应

目录 前言 需求背景 解决什么问题 行业通用方案 定制化 ​系统架构与融合 基本构成 系统关联融合 高效运维 小结 数据收集与分析 数据收集 数据录入 数据分析 问题发现与解决 自动化集成测试 数据聚合 数据库 结语 前言 这篇文章将会分成四节（需求背景、系统架构与融合、数据收集与分析、问题发现与解决）分享介绍我们是如何打造前端监控系统的。 一、需求背景 1.1 解决什么问题 客户端常常会遇到如下一些问题： 白屏 无响应

修改.gitignore文件为什么不生效 大家在用git做版本控制的时候，是不是会经常遇到这种情况：明明在.gitignore文件中已经标明忽略的文件目录下的文件，当我想git push的时候还会出现在push的目录中，原因是，这个文件或者目录已经被你提交（git commit）过，而git本身会有缓存，所以即使你在.gitignore文件中加入忽略的文件名或者目录，也是没有效果的，需要清理git本地缓存，命令如下： 清理缓存： git&nbs

使用sequelize的时候，经常会遇到莫名其妙的会抛出一个错误，results.map is not a function 没有堆栈很难排查，今天刚好解决了这个坑，原因是sequelize执行sql时要指定对应的类型，例如： 错误示例： const sql = "DROP Table myTableName"; await Sequelize.query(sql, { type: Sequelize.QueryTypes.SELECT})

Hello，大家好。GitHub在国内的网络不稳定，时常出现既拉不下来代码，也推不上去，有时候会不会有想要砸键盘的冲动呢？可能是由于一些复杂的因素导致的，github在国内的网络环境十分不乐观，刚开始以为是网络运营商的问题，换了几家，最后发现都是如此，只是程度不同而已。如果用一些魔法后，访问速度就杠杠的，所以，无奈啊。 有两种办法可以解决，第一种办法，选择gitee，码云作为国内比较知名的代码管理仓库，对于个人用户，基本可以满足，但是协作开发有

  Hello，大家好。今天我们来讲一下前端出现频率非常高的一种错误：Script error。 Script error.这个错误非常的高傲和神秘，为什么呢？因为它出现的时候，不会给你提供任何有关它的线索。正常我们写的前端代码报错的时候，浏览器通常抛出错误代码的行列号，以及它的堆栈代码，这样我们就可以快速定位到错误的位置。而这个错误发生的时候，连根毛的线索都没有提供，有毛的线索吗 ，一根都没有。那么它凭什么这么嚣张呢？ 一、Scri

Hello，大家好，欢迎使用Webfunny前端监控、前端埋点系统。 最近一段时间，我们整个团队都在忙着改造webfunny的clickhouse版，改造的内容非常之多，工作量非常之大，大家都忙得焦头烂额的。所以很多小伙伴提的优化建议，在这段时间都搁置了，除非是比较严重的bug，基本上都延后了，我能感受到大家着急的心情。其实，我比你们更着急，只是这块“骨头”太大，我们真的是啃了好久，到目前为止，基础版本至少已经接近尾声了。趁着喘息之机，我来记录

曾经的我们使用传统布局方式，我们深刻的体会着1px除不尽，三等分，居中，塌陷等等让我们升血压的问题。传统的布局方式：布局繁琐，需要使用大量的HTML和CSS代码来实现简单的布局。灵活性差，难以实现复杂的布局效果。难以维护，由于使用了大量的HTML和CSS代码，导致布局难以维护和修改。移动端适应性差，在移动设备上可能无法很好地展示。今天我们就来说说前端布局神器：Flex布局。 布局的传统解决方案，基于盒状模型，依赖 display&nb

1. 如何设置Flex布局的排列方向？ 要设置Flex布局的排列方向，你可以使用CSS的flex-direction属性。该属性有四个值可以选择：row（默认值，水平排列）、row-reverse（反向水平排列）、column（垂直排列）和column-reverse（反向垂直排列）。例如，要将元素改为垂直排列，你可以为父元素添加以下样式： .container { flex-direction: column; } 2. 如何改变Flex元素