当前位置: 首页 > news >正文

前端代码规范 - 日志打印规范

在前端开发中,随着项目迭代升级,日志打印逐渐风格不一,合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题,提高开发效率。本文将介绍如何在前端项目中制定日志输出规范。

1. 日志等级

首先,我们需要定义不同的日志等级,以便根据消息的重要性进行分类。通常,日志等级从低到高可以分为以下几类:

  • DEBUG: 详细的开发时信息,用于调试应用。
  • INFO: 重要事件的简要信息,如系统启动、配置等。
  • WARN: 系统能正常运行,但有潜在错误的情况。
  • ERROR: 由于严重的问题,某些功能无法正常运行。
  • FATAL: 非常严重的问题,可能导致系统崩溃。

2. 日志内容

日志内容应该包含足够的信息,以便于开发者理解发生了什么。一个完整的日志消息通常包括:

  • 时间戳:精确到毫秒的事件发生时间。
  • 日志等级:当前日志消息的等级。
  • 消息内容:描述事件的详细信息。
  • 错误堆栈:如果是错误,提供错误堆栈信息。

3. 日志格式

日志的格式应该统一,以便于阅读和解析。一个常见的日志格式如下:

[时间戳] [日志等级] [消息内容] [错误堆栈]

例如:

[2024-05-01T12:00:00.000Z] [ERROR] Failed to load user data. {stack}

4. 日志输出

在前端项目中,我们通常使用console对象进行日志输出。不同的日志等级可以使用不同的console方法:

  • console.debug用于DEBUG级别。
  • console.info用于INFO级别。
  • console.warn用于WARN级别。
  • console.error用于ERROR和FATAL级别。

5. 日志封装

为了更好地控制日志输出,我们可以封装一个日志工具,来统一管理日志输出。以下是一个简单的日志工具实现:

class Logger {static log(level, message, error) {const timestamp = new Date().toISOString();const stack = error ? error.stack : '';const formattedMessage = `[${timestamp}] [${level}] ${message} ${stack}`;switch (level) {case 'DEBUG':console.debug(formattedMessage);break;case 'INFO':console.info(formattedMessage);break;case 'WARN':console.warn(formattedMessage);break;case 'ERROR':case 'FATAL':console.error(formattedMessage);break;default:console.log(formattedMessage);}}static debug(message) {this.log('DEBUG', message);}static info(message) {this.log('INFO', message);}static warn(message) {this.log('WARN', message);}static error(message, error) {this.log('ERROR', message, error);}static fatal(message, error) {this.log('FATAL', message, error);}
}// 使用示例
Logger.info('Application is starting...');
Logger.error('Failed to load user data', new Error('Network Error'));

6. 日志收集

在生产环境中,我们可能需要将日志发送到后端服务器进行收集和分析。这可以通过AJAX请求或专门的日志服务来实现。例如,我们可以修改Logger工具,添加一个方法来发送日志:

class Logger {// ...其他方法// 根据环境变量判断是否发送日志到后端
if (process.env.NODE_ENV === 'production') {this.sendLog(formattedMessage);
}static sendLog(message) {// 假设我们有一个日志收集的APIconst logEndpoint = '/api/logs';fetch(logEndpoint, {method: 'POST', headers: {'Content-Type': 'application/json', }, body: JSON.stringify({ message }), }).catch((error) => {console.error('Failed to send log', error); });
}

7. 日志等级控制

在开发环境中,我们可能希望看到尽可能多的日志输出,以便更好地调试应用。但在生产环境中,为了避免性能损耗和过多的日志信息,我们可能只希望输出WARN和以上等级的日志。我们可以在Logger中添加一个等级控制:

class Logger {static level = 'DEBUG'; // 默认为DEBUG级别static setLevel(newLevel) {this.level = newLevel;}static shouldLog(level) {const levels = ['DEBUG', 'INFO', 'WARN', 'ERROR', 'FATAL'];return levels.indexOf(level) >= levels.indexOf(this.level);}static log(level, message, error) {if (!this.shouldLog(level)) {return;}// ...日志输出逻辑}// ...其他方法
}// 生产环境中设置日志等级
if (process.env.NODE_ENV === 'production') {Logger.setLevel('WARN');
}// 使用示例
Logger.debug('This will not be logged in production');
Logger.warn('This will be logged in production');

8. 日志格式化

为了进一步提高日志的可读性,我们可以添加格式化功能,比如为不同等级的日志添加颜色,或者为错误堆栈提供更好的格式化。

class Logger {// ...其他方法static formatStack(stack) {if (!stack) return '';// 格式化错误堆栈的逻辑return stack.split('\n').map(line => `    at ${line}`).join('\n');}static log(level, message, error) {// ...日志输出逻辑// 格式化错误堆栈if (error) {formattedMessage += `\n${this.formatStack(error.stack)}`;}// ...输出逻辑}// ...其他方法
}

最后

通过以上步骤,我们可以建立一个前端项目的日志输出规范。一个好的日志系统应该是灵活的,能够根据不同的环境和需求进行适当的调整。日志是帮助我们更好地理解和维护应用的工具,合理的使用和管理日志对于任何规模的前端项目都是非常重要的。

相关文章:

前端代码规范 - 日志打印规范

在前端开发中,随着项目迭代升级,日志打印逐渐风格不一,合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题,提高开发效率。本文将介绍如何在前端项目中制定日志输出规…...

C# 类型转换之显式和隐式

文章目录 1、显式类型转换2. 隐式类型转换3. 示例4. 类型转换的注意事项5. 类型转换的应用示例总结 在C#编程中,类型转换是一个核心概念,它允许我们在程序中处理不同类型的数据。类型转换可以分为两大类:显式类型转换(Explicit Ca…...

Ubuntu多显示器设置不同缩放比例

Ubuntu多显示器设置不同缩放比例 设备问题解决方案 设备 笔记本屏幕分辨率为2560 \times 1600,外接显示器的分辨率为3840 \times 2160。 问题 Ubuntu默认的显示器设置中,缩放仅能选择100%,200%,300%,400%。假…...

以太网协议介绍——UDP

注:需要先了解一些以太网的背景知识,方便更好理解UDP协议、 以太网基础知识一 以太网基础知识二 UDP协议 UDP即用户数据报协议,是一种面向无连接的传输层协议,属于 TCP/IP 协议簇的一种。UDP具有消耗资源少、通信效率高等优点&a…...

FFMpeg rtmp 无压缩推送本地yuv文件 压缩推送本地yuv文件

可以借鉴的&#xff1a;C使用FFmpeg实现YUV数据编码转视频文件_C 语言_脚本之家 yuv文件下载地址&#xff1a;YUV Sequences 无压缩的方式推送本地yuv文件 代码&#xff1a; #include <stdio.h> #include <unistd.h> #include <iostream> extern "C&…...

PostgreSQL LIMIT 子句

PostgreSQL LIMIT 子句 PostgreSQL 是一种功能强大的开源对象关系数据库管理系统&#xff0c;广泛用于各种应用中。在处理大量数据时&#xff0c;我们通常只需要检索部分记录&#xff0c;而不是整个数据集。这时&#xff0c;LIMIT 子句就变得非常有用。本文将详细介绍 Postgre…...

误删分区后的数据拯救:双管齐下恢复策略

在数字化时代&#xff0c;数据的价值日益凸显&#xff0c;而误删分区作为常见的数据安全威胁之一&#xff0c;常常让用户措手不及。本文将深入探讨误删分区的现象&#xff0c;并为您揭示两种高效的数据恢复方案&#xff0c;旨在帮助您在最短时间内找回失去的数据&#xff0c;同…...

git 添加本地分支, clean

//以develop为源创建本地分支fromdevelop git checkout -b fromdevelop git add . git commit -m "local" git checkout -b local/dev //切换到远程分支. git checkout dev git clean_git clean -f -d-CSDN博客 git clean -f -d #删除当前目录下没有被track…...

Linux:进程间通信(一.初识进程间通信、匿名管道与命名管道、共享内存)

上次结束了基础IO&#xff1a;Linux&#xff1a;基础IO&#xff08;三.软硬链接、动态库和静态库、动精态库的制作和加载&#xff09; 文章目录 1.认识进程间通信2.管道2.1匿名管道2.2pipe()函数 —创建匿名管道2.3匿名管道的四种情况2.4管道的特征 3.基于管道的进程池设计4.命…...

QML-各类布局

Colunm布局 Column{id:colspacing: 30Repeater{id:repmodel: ListModel{}Button{width: 100height: 50text: "btn"index}}//开始时候移动move: Transition {NumberAnimation { properties: "x,y"; easing.type: Easing.OutBounce }}//添加时变化add:Transi…...

el-table封装点击列筛选行数据功能,支持筛选,搜索,排序功能

数据少的话&#xff0c;可以前端实现&#xff0c;如果多的话&#xff0c;建议还是请求接口比较合理父组件&#xff1a; <template> <div class"home"> <!-- <img alt"Vue logo" src"../assets/logo.png"> <HelloWorld …...

【SpringBoot3学习 | 第1篇】SpringBoot3介绍与配置文件

文章目录 前言 一. SpringBoot3介绍1.1 SpringBoot项目创建1. 创建Maven工程2. 添加依赖(springboot父工程依赖 , web启动器依赖)3. 编写启动引导类(springboot项目运行的入口)4. 编写处理器Controller5. 启动项目 1.2 项目理解1. 依赖不需要写版本原因2. 启动器(Starter)3. Sp…...

SpringBoot整合Dubbo的快速使用教程

目录 一、什么是Dubbo? 二、SpringBoot整合Dubbo 1、父工程引入依赖 2、各个Dubbo服务子模块引入依赖 3、服务提供者 &#xff08;1&#xff09;启动类添加注解EnableDubbo &#xff08;2&#xff09;服务类添加注解DubboService &#xff08;3&#xff09;配置文件…...

昇思25天学习打卡营第12天| 基于MindNLP+MusicGen生成自己的个性化音乐

之前都是看图文类的东西&#xff0c;今天体验一点不一样的。来点听力的内容。 mindspore有音乐生成模型MusicGen&#xff0c;MusicGen支持两种生成模式&#xff1a;贪心&#xff08;greedy&#xff09;和采样&#xff08;sampling&#xff09;。在实际执行过程中&#xff0c;采…...

代理设计模式和装饰器设计模式的区别

代理设计模式: 作用:为目标(原始对象)增加功能(额外功能,拓展功能) 三种经典应用场景: 1&#xff1a;给原始对象增加额外功能(spring添加事务,Mybatis通过代理实现缓存功能等等) 2&#xff1a;远程代理&#xff08;网络通信&#xff0c;输出传输&#xff08;RPC&#xff0c;D…...

[Microsoft Office]Word设置页码从第二页开始为1

目录 第一步&#xff1a;设置页码格式 第二步&#xff1a;设置“起始页码”为0 第三步&#xff1a;双击页码&#xff0c;出现“页脚”提示 第四步&#xff1a;选中“首页不同” 第一步&#xff1a;设置页码格式 第二步&#xff1a;设置“起始页码”为0 第三步&#xff1a;双…...

【C++】日期类

鼠鼠实现了一个日期类&#xff0c;用来练习印证前几篇博客介绍的内容&#xff01;&#xff01; 目录 1.日期类的定义 2.得到某年某月的天数 3.检查日期是否合法 4.&#xff08;全缺省&#xff09;构造函数 5.拷贝构造函数 6.析构函数 7.赋值运算符重载 8.>运算符重…...

力扣热100 滑动窗口

这里写目录标题 3. 无重复字符的最长子串438. 找到字符串中所有字母异位词 3. 无重复字符的最长子串 左右指针left和right里面的字符串一直是没有重复的 class Solution:def lengthOfLongestSubstring(self, s: str) -> int:# 左右指针leftright0ans0#初始化结果tablecolle…...

三万字带你一遍跑通uer

三万字带你一遍跑通uer 参考文档 今天给大家介绍个非常强大的项目uer&#xff0c;集成了许多可以做自然语言的东西&#xff0c;效果的话也非常好&#xff0c;很适合企业级的应用&#xff01; 1. 先将项目uer从github拉取下来&#xff08;zip或git都ok&#xff09; 2. 用pycha…...

Ubuntu24.04LTS基础软件下载

librewolf: deb文件link 作用&#xff1a;访问github&#xff0c;无痕浏览&#xff0c;这个速度&#xff0c;不指望了 vscodium: 从deb安装&#xff0c;ubuntu sudo dpkg -i xxx.debpaste-image 插件替代 markdown wps: libreoffice: 替换USTC源 sudo nano /etc/apt/sourc…...

利用最小二乘法找圆心和半径

#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

MySQL JOIN 表过多的优化思路

当 MySQL 查询涉及大量表 JOIN 时&#xff0c;性能会显著下降。以下是优化思路和简易实现方法&#xff1a; 一、核心优化思路 减少 JOIN 数量 数据冗余&#xff1a;添加必要的冗余字段&#xff08;如订单表直接存储用户名&#xff09;合并表&#xff1a;将频繁关联的小表合并成…...

【SpringBoot自动化部署】

SpringBoot自动化部署方法 使用Jenkins进行持续集成与部署 Jenkins是最常用的自动化部署工具之一&#xff0c;能够实现代码拉取、构建、测试和部署的全流程自动化。 配置Jenkins任务时&#xff0c;需要添加Git仓库地址和凭证&#xff0c;设置构建触发器&#xff08;如GitHub…...

热烈祝贺埃文科技正式加入可信数据空间发展联盟

2025年4月29日&#xff0c;在福州举办的第八届数字中国建设峰会“可信数据空间分论坛”上&#xff0c;可信数据空间发展联盟正式宣告成立。国家数据局党组书记、局长刘烈宏出席并致辞&#xff0c;强调该联盟是推进全国一体化数据市场建设的关键抓手。 郑州埃文科技有限公司&am…...