前端监控系统

概述
在开发项目的过程中,正式环境出现了浏览器crash,这种情况在开发过程中无法复现,是一个需要长期追踪的问题,因此项目中引入了前端监控系统。

资源加载出错的捕获方案
<img src="image.gif" onerror="myFunction()">

document.getElementById("myImg").addEventListener("error", myFunction);

function myFunction() {
document.getElementById("demo").innerHTML = "无法加载图片。";
}
1
2
3
4
5
6
7
运行时出错的捕获方案
//方案一
try{
let a = 0;
console.log(a)
}cache(e){
//错误信息发送给后端,保存到数据库
sendMonitorErrorInfo(JSON.stringfy(e));
}
//方案二:以react项目为例,监控某个页面的异常
componentWillMount() {
//运行时监控系统
window.onerror = function(msg, url, row, column, error) {
//console.log(‘完整信息无法发送给后端‘,error)
sendMonitorErrorInfo(msg, url, row, column, error.toString()).then( res => {
//console.log(res);
}).catch((e) => {
//console.log(e);
})
}
}
//方案三:MDN推荐的形式
componentWillMount() {
//运行时监控系统
window.onerror = function (msg, url, lineNo, columnNo, error) {
var string = msg.toLowerCase();
var substring = "script error";
if (string.indexOf(substring) > -1){
alert(‘Script Error: See Browser Console for Detail‘);
} else {
var message = [
‘Message: ‘ + msg,
‘URL: ‘ + url,
‘Line: ‘ + lineNo,
‘Column: ‘ + columnNo,
‘Error object: ‘ + JSON.stringify(error)
].join(‘ - ‘);
alert(message);
}
return false;
};
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
window.onerror方法触发的两种场景:

代码报错
throw new Error(‘toggle window.onerror’);
window.onerror做全局监控的跨域问题
假设在www.wanshaob.com/static/a.js中做全局监控,不同域的www.hehe.com/static/b.js上报错误信息给主域名www.wanshaob.com,此时会被拦截
//通过onerror函数收集不同域的js文件的错误,需要做两个处理:
//1、设置存放js文件的服务器允许跨域,/usr/local/webserver/nginx/conf/nginx.conf的配置文件中配置以下参数:
http {
server {
location / {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods ‘GET, POST, OPTIONS‘;
add_header Access-Control-Allow-Headers ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization‘;
}
}
}
//配置文件nginx.conf的完整信息
http {
include mime.types;
default_type application/octet-stream;
server {
listen 80;
server_name wanshaobo.cn;
access_log logs/1.log combined;
error_log logs/2.log warn;

location / {
root /root/html/dist;
index index.html;
try_files $uri /index.html;

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods ‘GET, POST, OPTIONS‘;
add_header Access-Control-Allow-Headers ‘DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization‘;

if ($request_method = ‘OPTIONS‘) {
return 204;
}
}

proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8001/;
error_page 500 502 503 504 /50.html;
}

}
//2、引用相关的js文件时加上crossorigin属性
<script type="text/javascript" src="http://www.hehe.com/static/b.js" crossorigin></script>

---------------------

原文地址:https://www.cnblogs.com/hyhy904/p/10983054.html

时间: 2024-10-07 22:06:49

前端监控系统的相关文章

搭建前端监控系统(二)JS错误日志收集篇

===================代码展示================    监控系统地址: Demo地址                          页面探针代码: GitHub地址             分析后台地址: GitHub地址                        展示平台地址: GitHub地址                        ===================代码展示================ 对于前端应用来说,Js错误的发生直接

从零开始搭建前端监控系统(三)——实现控制iframe前进后退

前言 本系列文章旨在讲解如何从零开始搭建前端监控系统. 项目已经开源 项目地址: https://github.com/bombayjs/bombayjs (web sdk) https://github.com/bombayjs/bombayjs-server (服务端,用于提供api)(未完) https://github.com/bombayjs/bombayjs-admin (后台管理系统,可视化数据等)(未完) 您的支持是我们不断前进的动力. 喜欢请start!!! 喜欢请start!

京东前端:PhantomJS 和NodeJS在网站前端监控平台的最佳实践

1. 为什么需要一个前端监控系统 通常在一个大型的 Web 项目中有很多监控系统,比如后端的服务 API 监控,接口存活.调用.延迟等监控,这些一般都用来监控后台接口数据层面的信息.而且对于大型网站系统来说,从后端服务到前台展示会有很多层:内网 VIP.CDN 等. 但是这些监控并不能准确地反应用户看到的前端页面状态,比如:页面第三方系统数据调用失败,模块加载异常,数据不正确,空白开天窗等. 相关厂商内容 Native动态化最新技术解析 不可错过的智能时代的大前端 性能优化最佳实践经验谈 百度技

[转载]前端数据之美 -- 七天打造前端性能监控系统

开始行动 本文中的性能主要指 web 页面加载性能,对性能还不了解?不用担心,接下来的“每一天”跟我一起进入前端性能的世界. Day 1 为什么要监控性能? “If you cannot measure it, you cannot improve it” ———— William Thomson 这是一个最基本的问题,为什么要关注和监控前端性能?对于公司来说,性能在一定程度上与利益直接相关.国外有很多这方面的调研数据: 性能 收益 Google 延迟 400ms 搜索量下降 0.59% Bin

前端性能监控系统ShowSlow

作者:zhanhailiang 日期:2014-11-14 1. 简介 ShowSlow是开源的前端性能监控系统,提供了以下功能: 前端性能指标数据收集功能:ShowSlow原生提供了数据收集工具DOM Monster!,但也支持通过YSlow,PageSpeed等第三方工具将性能数据上报给服务端完成收集(其服务器端提供了针对多达8种不同工具上报的数据收集器dommonster,dynatrace,events,har,metric,pagespeed,webpagetest,yslow): 前

7 天打造前端性能监控系统

引言 前阵子在w3ctech的走进名企 - 百度前端 FEX 专场上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统,既然说出去了也不能食言.从前一篇文章前端数据之美相信大家对前端数据有了一定的了解,下面就针对其中的性能数据及其监控进行详细阐述. 开始行动 本文中的性能主要指 web 页面加载性能,对性能还不了解?不用担心,接下来的“每一天”跟我一起进入前端性能的世界. Day 1 为什么要监控性能? “If you cannot measure it, you cannot im

7 天打造前端性能监控系统(转)

引言 前阵子在w3ctech的走进名企 - 百度前端 FEX 专场上曾“夸下海口”说听完讲座后七天就可以打造自己的前端性能监控系统,既然说出去了也不能食言.从前一篇文章前端数据之美相信大家对前端数据有了一定的了解,下面就针对其中的性能数据及其监控进行详细阐述. 开始行动 本文中的性能主要指 web 页面加载性能,对性能还不了解?不用担心,接下来的“每一天”跟我一起进入前端性能的世界. Day 1 为什么要监控性能? “If you cannot measure it, you cannot im

基于Android平台的i-jetty网站智能农业监控系统

基于android平台i-jetty网站的智能农业监控系统 摘要:传统的监控系统,一般是基于PC的有线通信传输,其有很多不足之处,如功耗较高.布线成本高.难度大,适应性差,可扩展性不强,增加新的通信线路需要再次布线施工,而且维护起来也比较麻烦,一旦线路出问题,需要繁琐的检查.而嵌入式Web监控系统是基于物联网技术,其无线通信技术具有成本低廉.适应性强.扩展性强.信息安全.使用维护简单等优点. 智能农业中,种植大棚是通过大棚内安装温湿度以及光照传感器,来对农作物的环境参数进行实时采集,由Web监控

zabbix(一):zabbix自动化监控系统搭建详解

一.监控系统机制 1.监控工具工作机制 监控是通过传感器采集数据,在经过数据的存储加工后,进行展示.一般采集的数据为时间序列数据,即随时间变化而动态变化的数据:当采集到的数据超出阈值将会报警.监控功能的实现可基于专用agent.ssh.SNMP协议.IPMI(专业级监控接口IntelligentPlatform Management Interface,指挥平台管理接口) 2.SNMP协议 Simple Network Management Protocol,简单网络管理协议.由一组网络管理的标