背景今年年初，我进入一个基于React开发的新项目，负责整个前端的开发工作。为了保证整体的质量和用户体验，我们需要在项目上线时对应用进行稳定性和性能监控，确保线上发现异常时能够被第一时间发现和解决。工欲善其事，必先利其器，这时候我们需要一个好轮子。对于前端页面的监控，通常包括页面的访问性能、页面JS错误、资源加载错误，以及后端API的请求情况。UC研发效能团队有一个叫做【岳鹰】的WEB高可用监控产
文章记录项目开发中遇到或者看到的一些难点，方便日后查找 持续更新构建工具相关1.gulp 中配置全局环境变量为了配置debug 和 .min 两份js文件，需要根据命令输入，将文件输出不用的版本解决方案： 通过commander，获取命令行输入的参数，更具参数判断是什么环境，代码如下：var gulp = require('gulp')，
stripDebug = require('gul
转载
2024-09-26 17:37:43
31阅读
前面的话 几乎所有的服务器和代理都会记录下它们所处理的HTTP事务摘要。这么做出于一系列的原因：跟踪使用情况、安全性、计费、错误检测等等。本文将介绍日志记录 记录内容 大多数情况下，日志的记录出于两种原因：査找服务器或代理中存在的问题(比如，哪些请求失败了)，或者是生成Web站点访问方式的统计信息。统计数据对市场营销、计费和容量规划(比如，决定是否需要增加服务器或带宽)都非常有用
一、Sentry简介Sentry 是一套开源的实时异常收集、追踪、监控系统，支持几乎所有的语音和平台。这套系统由对应各种语言的 SDK 和一套庞大的数据后台服务组成，通过 Sentry SDK 的配置，可以上报错误关联的版本信息、发布环境。同时 Sentry SDK 会自动捕捉异常发生前的相关操作，便于后续异常追踪。最后，异常数据上报到数据服务之后，会通过过滤、关键信息提取、归纳展示在数据后台的
转载
2024-04-03 13:19:49
143阅读
日志框架介绍一、简介日志框架 市场上存在非常多的日志框架。JUL（java.util.logging），JCL（Apache Commons Logging），Log4j，Log4j2，Logback、SLF4j、jboss-logging等。 Spring Boot在框架内容部使用JCL，spring-boot-starter-logging采用了 slf4j+logback的形式，Spring
uniapp webview h5 通信 window.postMessage 方式父页面<template>
<view>
<!-- <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html"></web-view&
前端日志与后端日志不同，具有很强的自定义特性，不像后端的接口日志、服务器日志格式比较固定，大部分成熟的后端框架都有非常完善的日志系统，借助一些分析框架，就可以实现日志的监控与分析，这也是运维工作的一部分。什么是ELKELK在服务器运维界应该是运用的非常成熟了，很多成熟的大型项目都使用ELK来作为前端日志监控、分析的工具。那么首先，我们来了解下什么是ELK，ELK实际上是三个工具的集合：E：Elas
原创
2021-05-20 21:16:35
923阅读
1 前言现有的大部分监控方案都是针对服务端的，而针对前端的监控很少，诸如线上页面的白屏时间是多少、静态资源的加载情况如何、接口请求耗时好久、什么时候挂掉了、为什么挂掉，这些都不清楚。同时，在产品推广过程中，经常需要统计页面的使用情况及用户行为，从而可以从运营和产品的角度去了解用户群体，进而迭代升级产品，使其更加贴近用户，为业务的扩展提供更多可能性。因而，我们需要一个前端的页面监控系
Linux 系统中使用 logwatch 监控日志文件 Linux 操作系统和许多应用程序会创建特殊的文件来记录它们的运行事件，这些文件通常被称作“日志”。当要了解操作系统或第三方应用程序的行为或进行故障排查时，这些系统日志或特定的应用程序日志文件是必不可少的的工具。但是，日志文件并没有您们所谓的“清晰”或“容易”这种程度的可读性。手工分析原始的日志文件简直是浪费时间，并且单调乏味。出于这个原因
简介很多个人站长在搭建网站时使用nginx作为服务器，为了了解网站的访问情况，一般有两种手段：使用CNZZ之类的方式，在前端页面插入js，用户访问的时候触发js，记录访问请求。分析nginx的access log，从日志中挖掘有用信息。两种方式各有优缺点：CNZZ使用起来比较简单，各种指标定义清楚。但这种方式只能记录页面的访问请求，像ajax之类的请求是无法记录的，还有爬虫信息也不会记录。acce
随着项目工程化的发展，对于提升产品性能的要求也越来越多。产品即便通过研发自测，测试各种测，到了用户使用过程中，依然还是会出现一些bug；这对这些bug，不是所有用户会进行反馈（难以发现这些问题）甚至抛弃对于产品的使用；而且这些问题的复现性也相对困难。因此，对于bug的及时发现和解决，成为产品优化的一个考虑重心。
一般情况下，捕获错误的方法——1、window.onerror针对整个js文
转载
2024-04-05 22:07:19
61阅读
vnStat 简介vnStat 是一款轻量级的网络流量监控工具，目前各大 Linux/BSD 系统都已内置支持。vnStat 本身只支持命令行的交互方式，而 Web 前端则由第三方工具支持。这里汇总并对比下 vnStat 的几种 Web 前端并为大家推荐最佳的一款。vnStat Web 前端对比vnStat 首页推荐的四个前端有：vnStat SVG frontend: 基于
背景现在的前端项目越来越复杂，在不同的客户端会产生各种在开发人员机器上不会出现的问题。当用户报告一个问题给开发人员的时候，开发人员无法直接定位问题。在此前，听过一次鹅厂的前端人员，他们对QQ里面的网页监控的一个讲座，深有感触。但是鹅厂是自己开发了一系统，从开发到运维到错误分析，是一整套的体系。对于我们的项目，我们不可能选择自己开发，在网上找到一个开源的产品 [ Sentry ]，基本体现了鹅厂的那
console.log格式化这一用法一般都在个人博客或其他官网上有，当F12查看网页元素时，在控制台(console)那里偶尔会发现一些个性化的输出，其实现原理不难看一遍就晓得，具体实现如下：一、console.log格式化打印console.log支持的格式标志有:占位符描述%s字符串%d%i整数%f浮点数%o/%Oobject对象%ccss样式1、%c 表示css样式2、%d 和 %i 表示整
转载
2024-04-22 17:25:16
517阅读
☞ 收集日志的方法平时收集日志的手段，可以归类为两个方面，一个是逻辑中的错误判断，为主动判断；一个是利用语言给我们提供的捷径，暴力式获取错误信息，如 try..catch 和 window.onerror。1. 主动判断我们在一些运算之后，得到一个期望的结果，然而结果不是我们想要的 // test.js
function calc(){
// code
转载
2024-08-12 14:47:05
144阅读
摘要前端一直是距离用户最近的一层，随着产品的日益完善，我们会更加注重用户体验，而前端异常却如鲠在喉，甚是烦人。一、为什么要处理异常？异常是不可控的，会影响最终的呈现结果，但是我们有充分的理由去做这样的事情。增强用户体验；远程定位问题；未雨绸缪，及早发现问题；无法复线问题，尤其是移动端，机型，系统都是问题；完善的前端方案，前端监控系统；对于 JS 而言，我们面对的仅仅只是异常，异常的出现不会直接导致
转载
2024-10-10 16:45:17
80阅读
关于服务端 401未登录的上报目前很多项目都对用户未登录信息做了日志收集，如果没有特殊的业务需求，我们可以过滤掉。if (err.response.status >= 400 && err.response.status < 500) {
// 如果是非401等 4xx code 则logger错误日志
if (IS_SERVER &a
转载
2024-07-15 13:54:44
160阅读
背景 在这越来越发达的网络时代，web应用也是越来越复杂，尤其是前端的开发，也是越来越受重视。 所以在我们前端开发完成后，会有一些列的web应用的上线验证，如自测、QA测试、code review 等，以确保应用能在生产上没有事故。 但是事以愿违，很多时候我们都会接受的客户的一些线上问题，这些问题有时候可能你是自己开发的原因本身存在的问题，这样的问题一般能够在测试环境重现，我们很
转载
2023-08-22 21:45:52
307阅读
本文旨在让那些第一次在vue中使用FullCalendar但是又无从下手的小伙伴能够快速的上手FullCalendar。介绍FullCalendar，当下最受欢迎的全尺寸JavaScript日历FullCalendar的三大特点：强大轻巧：拥有100多种可自定义的设置。作为单独的模块构建，以减小文件大小。开发人员友好：支持React、Vue、Angular三大主流框架开源：所有代码都在GitHub
转载
2024-04-09 14:28:25
346阅读
所谓打点日志，是指用于数据统计的日志，一般前端会有打点的方法，而后端也会有类似需求。按理说，后端的一般的日志也可以做到打点的效果，但是因为一般的日志离散，风格不统一，得到的日志格式不好，不容易切分统计，所以就会想要一个独立的打点日志来实现打点。实现打点日志的方法通过日志模版，增加一种类型的打点日志，则替换模版中的占位符，重新生成一遍日志的配置文件，之后热更新日志配置。使用日志框架API，不借助配置
转载
2024-02-22 15:48:30
159阅读
