前端记录日志生成文件保存到本地

本文主要是介绍前端记录日志生成文件保存到本地，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、前言

项目上线后业务人员反馈说是打印数据不准确，通过websocket连接打印机服务去进行打印，会出现条码漏打的情况；通过后端日志和打印机日志均没有找到问题原因，猜测是websocket连接断开导致的问题。

也想通过前端日志去排查问题，本人据理力争说控制台有日志输出；奈何现场人员不会看控制台信息，无奈只能研究如何去生成前端日志。

二、日志思路

首先需要了解前端如何去生成日志，最终保存到用户电脑中。为此需要明确几点：

日志的生成方法；
日志信息如何展示；
保存方法与保存路径；
哪些信息需要保存到日志中；

2.1 日志生成的方法

日志信息需要定义一个变量，这个根据具体需求；如果是单一功能需要日志操作信息，则只需要定义局部变量；如果是整个项目都需要日志操作信息，则需要定义全局变量。

本次示例日志变量挂载到window上，这样可以直接获取及更改。

// 判断是否有日志变量
if (window.historryRecordLogs) {// 初始化日志变量window.historryRecordLogs = [];
}
// 根据项目需求去跟更改日志信息类型，建立一个消息队列；
// 需要记录的信息放进日志队列里面去
window.historryRecordLogs.push({// 如果需要前台展示效果可以根据类型展示不同样式type: "日志类型",	message: "具体日志信息",userName: "操作人",dateTime: "操作时间",
});

2.2 整理生成txt文件下载

最终我们需要得到这样一个日志文件，就需要前端生成一个文件，手动或被动去生成一个日志文件。

实现步骤：

整理日志信息，汇总输出文字；
JS通过Blob方法生成一个Blob文件；
在生成一个临时a标签，来模拟手动下载；

简单示例：

// 导出下载日志文件
const exportFileTxt = () => {// 判断是否有日志变量if (window.historryRecordLogs && window.historryRecordLogs.length) {// 整理日志信息const dataTxt = window.historryRecordLogs.reduce((cur, next) => cur +=`操作人：${next.userName},日志信息：<${next.message}> 操作时间：${next.dataTime}\n`, "");// 生成一个Blob文件const urlObject = window.URL || window.webkitURL || window;const blobFile = new Blob([dataTxt]);// 生成一个a标签模拟下载const aDom = document.createElement("a")aDom.href = urlObject.createObjectURL(blobFile);// 定义文件名称aDom.download = `${moment(new Date())}_logs`;aDom.click();}
};

2.3 保存路径

保存路径是当前浏览器的默认下载路径，无法手动指定下载文件路径；

2.3.1 下载方式：

可以设置用户退出登录后默认下载；
放在头部导航栏，有需求的情况下再点击下载；

2.3.2 注意事项

如果采用默认下载的情况需要结合具体情况；
当用户直接关闭浏览器时无法自动下载；
直接关闭标签页也无法下载（这个可以监听关闭当前标签页的事件）；

window.addEventListener('beforeunload', function (e) {// 取消关闭标签页的默认行为e.preventDefault();// 自定义确认消息e.returnValue = '您有未保存的更改，确定要离开吗？';
});

2.4 整理哪些信息存储日志

前端接口的报错信息；
敏感数据的操作流程；
websocket连接状态详细日志记录；

三、详细记录

3.1 前端接口报错信息记录

// 封装一个请求方法，在catch阶段进行错误捕获
const request = async (url, options) => {try {const response = await fetch(url, options);if (!response.ok) {throw new Error(response.statusText);}return await response.json();} catch (error) {window.historryRecordLogs.push({type: "error",message: error.message,userName: "操作人",dateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')});throw error;}
};

3.2 敏感数据的操作流程

// 假设有一个敏感操作的函数
function sensitiveOperation() {try {// 操作逻辑} catch (e) {window.historryRecordLogs.push({type: "sensitiveOperation",message: e.message || '未知错误',userName: "操作人",dateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')});}
}

3.3 websocket连接状态详细日志记录

const ws = new WebSocket("ws://example.com");ws.onopen = () => {window.historryRecordLogs.push({type: "websocket",message: "WebSocket连接已打开",userName: "操作人",dateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')});
};ws.onclose = (event) => {window.historryRecordLogs.push({type: "websocket",message: `WebSocket连接已关闭，代码：${event.code}，原因：${event.reason}`,userName: "操作人",dateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')});
};ws.onerror = (error) => {window.historryRecordLogs.push({type: "websocket",message: `WebSocket错误：${error.message}`,userName: "操作人",dateTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')});
};