# 前端错误监控以及日志管理
# 错误监控
对于前端应用来说，Js错误的发生直接影响前端应用的质量。对前端异常的监控是整个前端监控系统中的一个重要环节。前端异常包含很多种情况。比如：
- js编译时异常（开发阶段就能排）
- js运行时异常；
- 加载静态资源异常（路径写错、资源服务器异常、CDN异常、跨域）
- 接口请求异常等。
监控流程：监控错误 -> 搜集错误 -> 存储错误 -> 分析错误 -> 错误报警-> 定位错误 -> 解决错误
运行时捕获错误的方法：参考 (opens new window)
window.onerror:前端js错误监控主要是利用了window.onerror函数来实现，onerror函数会在页面发生js错误时被调用。但是如果在一个块内，发生错误时onerror也会失效，所以只要让其先执行（注意这个前提！）即可捕捉到语法错误。
- 对于跨域的JS资源，window.onerror拿不到详细的信息，需要往资源的请求添加额外的头部。静态资源请求需要加多一个Access-Control-Allow-Origin头部，同时script引入外链的标签需要加多一个crossorigin的属性
try,catch
- 没法捕捉try,catch块，当前代码块有语法错误，JS解释器压根都不会执行当前这个代码块，所以也就没办法被catch住；
- 没法捕捉到全局的错误事件，也即是只有try,catch的块里边运行出错才会被你捕捉到，这里的块你要理解成一个函数块。
console.error
window.onunhandledrejection：当你用到Promise的时候，而你又忘记写reject的捕获方法的时候，系统总是会抛出一个叫
Unhandled Promise rejection. 没有堆栈，没有其他信息，特别是在写fetch请求的时候很容易发生。 所以这个方法可以帮助我们监控此类错误process.uncaughtException nodejs
- 当程序发生了异常
- 且异常未被 try...catch捕获
- 特点：系统错误不会使系统挂掉
使用domain模块捕获异步异常
# 日志管理
在node中我们调试时经常使用console，但是我们想要记录调试信息/日志信息却无从下手，非常不利于我们调试，跟踪，使用的框架 是koa，当时想法是，能够记录常规日志，并且剥离错误日志单独记录到文件，日志文件按文件大小或日期分割，支持日志的自动压缩。
于是就使用到了log4js，下边我简单说一下：level级别
log4js默认的日志级别如下：
ALL < TRACE < DEBUG < INFO < WARN < ERROR < FATAL < MARK < OFF
当指定level为INFO时，只允许输出INFO级别以上的日志，WARN、ERROR都会被记录，但是TRACE和DEBUG不会。
例子：
var log4js = require('log4js');
log4js.configure({
appenders: {
'out': { type: 'console' },
'err': { type: 'stderr' }
},
categories: {
default: { appenders: ['out'], level: 'INFO' },
err: { appenders: ['err'], level: 'ERROR' }
});
var logger = log4js.getLogger(); // 当不传参或找不到对应 category时，默认使用default的配置
var errLogger = log4js.getLogger('err');
// 手动输出
logger.info('This is a message from INFO.');
errLogger.info('This is a message from INFO.');
errLogger.error('This is a message from ERROR.');
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
而控制台的输出大概会像这样：
[2019-03-31T23:17:04.254] [INFO] default - This is a message from INFO.
[2019-03-31T23:17:04.254] [ERROR] err - This is a message from ERROR.
2
我们手动输出的三条日志，但是只打印两条，说明ERROR > INFO。
下边我们说一下log4js的基本配置
log4js.configure()是日志的配置入口。在configure配置项中，最为常用的是appenders和categories属性。了解更多配置项详见API (opens new window)。
appenders可以理解为是对各种日志输出形式的定义，而categories决定了在某种类型输出下调用哪些的appender。appenders和categories都至少需要一个配置，否则将会抛出异常。
appenders (opens new window)定义日志输出形式，
appender中的type决定了选用何种的日志形式，如‘console’、‘stderr’都会将日志输出到node的控制台，而dateFile、file等等则会将日志写入到日志文件。log4js支持多种输出形式，打印到控制台、输出到文件，传输到服务器，也可以以邮件形式发送日志。
直接支持的形式：
categoryFilter、console、dateFile、file、fileSync、logLevelFilter、multiFile、multiprocess、recording、stderr、stdout、tcp、tcp-server
- 支持但需要额外插件的形式：
gelf、hipchat、logFaces-HTTP、logFaces-UDP、loggly、logstashHTTP、logstashUDP、mailgun、rabbitmq、redis、slack、smtp
categories定义了日志输出类别，在何种类别下使用哪些appender，它拥有两个属性，appenders和level。appenders支持传入一个或多个appender，level决定过滤的允许输出的日志级别。log4js.getLogger([category])允许接收一个字符串，表示使用category类型，如果不传参，或者找不到对应的category，将会使用默认配置即default。
# 常用的日志形式
# file（以文件大小划分日志文件）
log4js.configure({
appenders: {
infoLogs: {
type: 'file',
filename: 'logs/info/file.log',
maxLogSize: 10485760, // 10mb,日志文件大小,超过该size则自动创建新的日志文件
backups: 20, // 仅保留最新的20个日志文件
compress: true // 超过maxLogSize,压缩代码
}
},
categories: {
default: { appenders: [ 'infoLogs' ], level: 'info' }
}
});
2
3
4
5
6
7
8
9
10
11
12
13
14
# dateFile（以日期划分日志文件）
og4js.configure({
appenders: {
infoLogs: {
type: 'dateFile',
filename: 'logs/',
backups:5, // 仅保留最新的五个日志文件
pattern: ".yyyy-MM-dd", // 用于确定何时滚动日志的模式
alwaysIncludePattern: true,
compress: true
}
},
categories: {
default: { appenders: [ 'infoLogs' ], level: 'info' }
}
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pattern，默认为.yyyy-MM-dd， 用于确定何时滚动日志的模式，如果.yyyy-MM-dd-hh则以小时为单位滚动日志。格式:.yyyy-MM-dd-hh:mm:ss.log
# console
将日志输出到控制台，需要注意的一点是，大量日志写入控制台可能会使应用占用大量内存，可以考虑使用stdout。
og4js.configure({
appenders: { console: { type: 'console' } },
categories: { default: { appenders: [ 'console' ], level: 'info' } }
});
2
3
4
# logLevelFilter
日志过滤器，当需要在一堆日志中特殊处理某特定级别日志时，会比较有用。官方示例如下：
log4js.configure({
appenders: {
everything: {
type: 'file',
filename: 'all-the-logs.log'
},
emergencies: {
type: 'file',
filename: 'panic-now.log'
},
just-errors: {
type: 'logLevelFilter',
appender: 'emergencies',
level: 'error'
}
},
categories: {
default: { appenders: ['just-errors', 'everything' ], level: 'debug' }
}
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
在此示例中，‘just-errors’会过滤得到ERROR以上级别的日志，并使用emergencies appender，单独将错误日志记录到panic-now.log文件中。
logLevelFilter可以过滤某一区间的日志，当你同时定义了level和maxLevel的话。maxLevel的默认值为FATAL，也就是最高级别。
# layouts
请求默认的输出格式
[2019-04-01T11:28:38.696] [INFO] default - ::1 - - "GET / HTTP/1.1" 304 - "" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
[2019-04-01T11:28:39.169] [INFO] default - ::1 - - "GET /favicon.ico HTTP/1.1" 404 1062 "http://localhost:3000/" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36"
2
layout可以用来自定义日志的输出格式，参见layouts (opens new window)。
# 具体配置方案
要求：记录常规日志，剥离错误日志单独记录，日志文件按文件大小或日期回滚，支持日志的压缩。
官方示例 (opens new window)，根据实际需求，调整配置如下：
var log4js = require('log4js');
...
log4js.configure({
appenders: {
infoLogs: {
type: 'file',
filename: 'logs/info/file.log',
maxLogSize: 10485760, // 10mb,日志文件大小,超过该size则自动创建新的日志文件
backups: 20, // 仅保留最新的20个日志文件
compress: true // 超过maxLogSize,压缩代码
},
errorLogs: {
type: 'file',
filename: 'logs/error/file.log',
maxLogSize: 10485760,
backups: 20,
compress: true
},
justErrors: {
type: 'logLevelFilter', // 过滤指定level的文件
appender: 'errorLogs', // appender
level: 'error' // 过滤得到error以上的日志
},
console: {type: 'console'}
},
categories: {
default: { appenders: ['console', 'justErrors', 'infoLogs'], level: 'info' },
err: { appenders: ['errorLogs'], level: 'error' },
}
});
var logger = log4js.getLogger();
app.use(log4js.connectLogger(logger , { level: 'info' }));
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
推荐的日志管理工具：
log4.js、morgan、winston
我觉得这个东西挺好玩了，有时间看看console对象上的那些东西，更好玩哦 MDN (opens new window)