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

懒羊羊我小弟

于 2024-06-21 18:28:49 发布

阅读量1.1k

点赞数 6

分类专栏： JavaScript 文章标签：前端状态模式 javascript

本文链接：https://blog.youkuaiyun.com/IO14122/article/details/139867788

版权

JavaScript 专栏收录该内容

24 篇文章

订阅专栏

一、前言

项目上线后业务人员反馈说是打印数据不准确，通过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')
    });
};