FrontJS 最早是用于蒲公英旗下项目管理平台 Tracup 中的一个性能工具，也就是我们一个月前发布的 frontend-tracker，发布后在一些社区内也有一些良好的反应。当我们尝试在蒲公英上使用这款工具的时候也出现了一些问题，比如，蒲公英每天能产生千万级别的访问信息，这使得原有的统计分析性能变得不是很理想，这对于一款统计分析为主的产品来说是致命的。我们及时调整了从于数据单元到分析单元的结
一、错误类型任何一个框架，对于错误的处理都是一种必备的能力在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。主要的错误来源包括：后端接口错误代码中本身逻辑错误二、如何处理后端接口错误通过axios的interceptor实现网络请求的response先进行一层拦截apiClient.interceptors.response.u
转载
2024-10-18 12:26:36
66阅读
在前端代码开发阶段，会有各种各样的bug，通常在上线之前我们会清理掉所有的bug，通过测试之后才上线，但是线上环境也不能保证不会出问题，有些问题可能出现了之后，用户也不会反馈，问题不容易复现，导致不好定位修复，如果有办法在发生异常的时候，自动监控，然后把异常通过接口上报到服务端，这样异常信息就能保留下来，就可以快速定位，修复问题 异常分类javascript代码异常（语法错误，执行报错，
转载
2024-07-24 05:50:57
53阅读
报错信息： [Vue warn]: Error compiling template：Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects ...
转载
2021-08-23 23:30:00
1047阅读
2评论
背景 在开发Vue项目时，使用浏览器调试可以比较清晰的看到报的什么错、在哪报错，或者使用console.log()打印出报错信息，以便快速定位到报错源头并解决，但是如果项目上线了又怎么查看呢。对于上线项目来说，一般都是会有代码混淆以及禁用console.log()，这个时候再使用浏览器调试就有点不太方便了。另一种场景，如果要做一个前端报错监控平台，那这些报错信息又应该如何收集呢。本文就重点介绍四种
转载
2024-05-05 17:39:34
971阅读
Web承载的业务越来越复杂，用户对于Web的体验要求也越来越高，Web性能的优劣对业务收益也有着非常直接的影响。 本文主要介绍阿里UC百亿级PV前端监控平台， 岳鹰全景监控平台 的实践历程 - 概述，阅读时长 10 分钟。为什么要打造前端监控系统？ 前端的开发环境比较复杂，页面在不同浏览器、微信等APP都可能展现不同，用户的网络网速、手机性能等，也会影响页面访问速度。在移动端可能更为明显，移动端用
转载
2024-05-17 13:29:55
143阅读
背景：市面上的监控系统有很多，大多收费，对于小型前端项目来说，必然是痛点。另一点主要原因是，功能虽然通用，却未必能够满足我们自己的需求, 所以我们自给自足也许是个不错的办法。 这是搭建前端监控系统的第二章，主要是介绍如何统计js报错，跟着我一步步做，你也能搭建出一个属于自己的前端监控系统。 目前已经在运行的线上Demo ： 前端监控系统 
文章目录前端错误监控的简单设计与实现前端埋点错误类型异常上报的数据格式异常上报防抖处理缓存异常上报数据来限制上报频率异常上报可定制化配置前端异常监控代码后端限流异步发送邮件发送邮件阻塞问题总结参考 前端错误监控的简单设计与实现在之前的博文中讲了在前端React的错误监控系统要如何设计《React 错误处理和日志记录的思考与设计》这篇博文主要讲一下根据如下的业务场景并结合《React 错误处理和日
转载
2024-05-22 13:02:16
64阅读
一、事件相关内容1、事件处理 1、使用v-on:xxx或@xxx绑定事件，其中xxx是事件名。 2、事件的回调需要配置在methods对象中，最终会在vm上。 3、methods中配置的函数，不要用箭头函数！否则this就不是vm了。 4、methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象。 5、@click="demo" 和 @click="demo($
Vue的5种处理Vue异常的方法相信大家对Vue的不陌生。在使用Vue的时候也会遇到报错，也会使用浏览器的F12 来查看报错信息。但是你知道Vue是如何进行异常抛出的吗？vue 是如何处理异常的呢？接下来和大家介绍介绍，Vue是如何处理者几种常见的报错的。先很大家说说常见的报错，再和大家介绍如何处理Vue 中异常处理包含以下几个方面的技巧：errorHandlerwarnHandlerrender
前言在做完一个项目后，之后的维护尤为重要。这时，如果项目配置了错误日志记录，这样能大大减少维护难度。虽然不一定能捕获到全部的错误，但是一般的错误还是可以监测到的。这样就不用测试人员去一遍一遍复现bug了。一、准备工作（1）规定错误码像是请求码（404、500）一样，我觉得错误都应该规定好对应的错误码。个人喜好。// 错误代码
const errCode = new Map([
// 本地系统错
基于webpack的配置调试使用Vue-cli命令行工具初始化基于wabpack模板的项目的命令语法：npm install -g @vue/cli # 全局安装vue-cli,版本vue3.x
vue init webpack [my-project] [app-name] # 使用vue-cli初始化一个完整的webpack项目。
cd my-project
转载
2024-05-16 20:32:16
120阅读
监视属性-watch方法说明1.通过通过vm 对象的$watch()或watch 配置来监视指定的属性2.当属性变化时, 回调函数自动调用, 在函数内部进行计算监视属性watch：1.当被监视的属性变化时, 回调函数自动调用, 进行相关操作 2.监视的属性必须存在，才能进行监视！！ 3.监视的两种写法： (1).new Vue时传入watch配置<!DOCTYPE html>
<
转载
2024-03-26 14:03:59
68阅读
1 前言现有的大部分监控方案都是针对服务端的，而针对前端的监控很少，诸如线上页面的白屏时间是多少、静态资源的加载情况如何、接口请求耗时好久、什么时候挂掉了、为什么挂掉，这些都不清楚。同时，在产品推广过程中，经常需要统计页面的使用情况及用户行为，从而可以从运营和产品的角度去了解用户群体，进而迭代升级产品，使其更加贴近用户，为业务的扩展提供更多可能性。因而，我们需要一个前端的页面监控系
目标： 能够说出什么是前后端交互模式 能够说出Promise的相关概念和用法 能够使用fetch进行接口调用 能够使用axios进行接口调用 能够使用async/await方式调用接口 能够基于后台接口实现案例目录： 前后端交互模式 Promise用法 接口调用-fetch用法 接口调用-axios用法 接口调用async/await用法 基于接口的
转载
2024-04-30 20:09:30
105阅读
使用的库vue-cli (vue+webpack脚手架)vue-router(路由跳转)vuex(状态管理)axios(数据请求)mock.js(模拟后台数据)vue-touch(手势判断)fastclick(解决移动端浏览器 300 毫秒点击延迟问题)vue-lazyload(图片懒加载)swiper(轮播)设计布局:HTML5CSS3Lessrem(阿里用的那套rem算法)Flex(弹
1.javascript中的七种错误类型SyntaxError（语法错误） ReferenceError（引用错误） RangeError（范围错误） TypeError（类型错误） URLError（URL错误） EvalError（eval错误） Error（基类型） 详情参考：跳转地址2.can’t not find ‘xxModule’ - 找不到某些依赖或者模块这种情况一般报错信息可以看
转载
2024-03-17 10:56:48
55阅读
简单快速了解Vue.js的开发流程不会涉及知识点的具体代码，点到为止。了解Vue.js的开发流程，并进一步理解如何通过Vue.js来构建一个中大型的前端项目，同时做好相应的部署与优化工作。Vue.js简介 从上图的介绍中我们不难发现Vue.js是一款轻量级的以数据驱动的前端JS框架，其和jQuery最大的不同点在于jQu
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YJ6SPNTm-1585505076954)(file:///C:/Users/%E6%96%B9%E7%82%AF%E4%B8%B0/AppData/Roaming/Tencent/QQ/Temp/D%28G@%5B8HQGJ%280XS1J0D7@S.png)]一、VUE实例 导入调试版本VUE导入生产版本VUE也
js基础基本数据类型: string, boolean, number, undefined, symbol, null引用数据类型: array, function, Date, RegExp, object首页白屏的原因及优化方案当前很多无线页面都使用前端模板进行数据渲染，那么在糟糕的网速情况下，一进去页面，看到的不是白屏就是 loading，这成为白屏问题。此问题发生的原因基本可以归结为网速
转载
2024-07-11 18:25:30
195阅读
