前言
开发web应用程序过程中的一种常见的做法,就是集中保存错误日志,以便查找重要错误的原因.
就像数据库和服务器都会定期写入日志一样,在复杂的web应用程序中,我们同样推荐你把JavaScript错误也回写到服务器,换句话再说,我们也可以将这些错误写入到保存服务器端错误的地方,只不过标明他们来自前端.从而把前端的错误集中起来,可以及大地方便前端开发者分析代码.具体操作
主要思想
后端需要提供一个接收错误信息的接口,把接收到的错误信息存放在一个日志文件中,比如 font-msg.log.
前端在比较可能会出现错误的地方用try{}catch(err){} 语句来捕获,然后通过一些可以发送请求的方法,把收集到的报错信息发送到这个后端提供的日志接口. 这样就得到了前端的报错日志了,开发者可以经常去查看,分析自己代码中的不足,优化改善代码. 代码示例
前端代码示例
前端代码中,我们使用了Image对象来发送请求,这样做非常灵活,主要原因如下:
- 所有浏览器都支持Image对象;
- 可以避免跨域限制,img的src属性可以实现跨域访问.
- 在记录错误的过程中出问题的概率比较低.
收集前端日志实例页面 日志收集学习
补充:
评论里有朋友建议使用window.onerror事件,我在这里引用一下JavaScript高级程序设计(第三版)的书中对这个事件的解释:任何没有通过try-catch处理的错误都会触发window对象的error事件,在任何web浏览器中,onerror事件处理程序都不会创建event对象,但它可以接收三个参数: 错误信息,错误所在的URL和行号.多数情况下,只有错误信息有用,因为URL只给出了文档的位置,而行号所指的代码既可能出自内部JavaScript代码,也可能出自外部文件. 只要发生错误,无论是不是浏览器生成的,都会触发error事件
window.onerror = function (message, url, line) { alert(message); return false;} 通过返回false,这个函数实际就充当了整个文档的try-catch语句,可以捕获所有无代码处理的运行错误.但是浏览器在使用这个事件处理错误的方式有明显不同,在IE中,即使发生onerror事件,代码仍然会正常执行,所有变量和数据都将得到保留,因此能在onerror事件处理程序中访问它们,但在firefox中,常规代码会停止执行,事件发生之前的所有变量和数据都将被销毁,因此几乎就无法判断错误了,且另外window.onerror事件不能捕获promise的异常错误信息. 所以我在这里使用的是try...catch...,但是我觉得具体的使用方法可以根据自己的业务需求来确定,我这里只是做一个示例,实际的实现途径还有很多,但是万法同宗.
后端代码示例
这里我使用node写了一个日志采集的接口,并将采集到的信息写入日志文件.
app.js(主入口文件):
const Koa = require("koa");const app = new Koa();const router = require('./router');const axios = require('axios')app.use(router.routes());app.use(router.allowedMethods());app.on("error", function (err, ctx) { console.log(err)})app.listen(4000, function (ctx) { console.log("i am listening"); }) router/index.js(路由入口文件):
const koaRouter = require("koa-router");const router = new koaRouter();const log4js = require("log4js");var config = { "replaceConsole": true, "appenders": { "stdout": { "type": "stdout" }, "req": { "type": "dateFile", "filename": "logs/reqlog/", "pattern": "req-yyyy-MM-dd.log", "alwaysIncludePattern": true }, "err": { "type": "dateFile", "filename": "logs/errlog/", "pattern": "err-yyyy-MM-dd.log", "alwaysIncludePattern": true }, "oth": { "type": "dateFile", "filename": "logs/othlog/", "pattern": "oth-yyyy-MM-dd.log", "alwaysIncludePattern": true } }, "categories": { "default": { "appenders": ["stdout", "req"], "level": "debug" }, "err": { "appenders": ["stdout", "err"], "level": "error" }, "oth": { "appenders": ["stdout", "oth"], "level": "info" } }}log4js.configure(config);const reqLogger = log4js.getLogger();const errLogger = log4js.getLogger('err');const infoLogger = log4js.getLogger('oth');router.get("/postMessage", async(ctx, next) => { console.log(ctx.query); infoLogger.info(ctx.query.sev + "--" + ctx.query.msg); ctx.body = { msg: "i get it", code: 200 }; return next();})module.exports = router; 收集到的日志信息截图:
更详细的代码:
推荐阅读:
不知道你们是怎样前端报错信息的呢?如果你们有更好的采集方法,欢迎email(2510909248@qq.com)或者私信给我,爱分享的你最可爱^_^^_^
如果我的文章中有不足之处,欢迎批评指正~~