Vue打印错误日志问题

目录
  • Vue3全局方法和静态配置文件的最佳实践
  • Vue3全局方法最佳方案
    • 1.添加一个工具类,例如utils.ts
    • 2.这么用
  • Vue3引入静态配置文件最佳方案
  • Vue3全局方法方案二
    • 1.先吧全局方法写到tools.js文件中
    • 2.在Index.html中引入
    • 3.在ts,js代码中直接使用
  • Vue2中打印日志的最佳实践

Vue3全局方法和静态配置文件的最佳实践

Vue3中打印错误日志的最佳实践: 推荐引入全局自定义方法clog,任何地方打印任何类型

在Vue3.0中全局的方法一般有下面两个

  • 方式一 使用 app.config.globalProperties
  • 方式二 通过依赖和注入(provide 和 inject)来完成

但是这两种方法使用起来都非常的不方便

推荐如下方案

Vue3全局方法最佳方案

1.添加一个工具类,例如utils.ts

import moment from "moment";
// 判断对象,数组,字符串是否为空,例如:  undefined , null , '' , '   ' , {}  , [] 全部判断为空
export function isNull(obj: any): boolean {
	if (obj === null || obj === undefined) {
		return true
	}
	if (typeof obj === 'object') {
		let json = JSON.stringify(obj)
		if (json === '{}') {
			return true
		}
		if (json === '[]') {
			return true
		}
		return false
	}
	let str = String(obj)
	if (str === 'undefined' || str === 'null' || str === '' || !str || !/[^\s]/.test(str)) {
		return true
	}
	return false
}
// 控制台日志,支持传一个参数(对象/字符串), 也支持传两个参数(标志,日志消息<可以是对象,可以是字符串>)
export function clog(flag, value: any = 'xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx'): string {
	try {
		let tmp = ""
		// 如果value为默认值,则没有传递第二个参数,只处理第一个参数
		if (value === `xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx`) {
			tmp = JSON.stringify(flag);
			console.log(tmp)
		} else if (isNull(value)) {
			tmp = JSON.stringify(flag);
			console.log(tmp + ":")
		} else if (isNull(flag)) {
			tmp = JSON.stringify(value);
			console.log(":" + tmp)
		} else {
			tmp = JSON.stringify(value);
			console.log(flag + ":" + tmp)
		}
		return tmp
	} catch (err) {
		console.log("log", err)
		return " 空对象或者空字符串 "
	}
}
// 日期格式化
export function dateFormatter(str, isDate = false) {
	if (isNull(str)) return undefined
	if (isDate === true) {
		return moment(str).format(
			'YYYY-MM-DD'
		)
	} else {
		return moment(str).format(
			'YYYY-MM-DD HH:mm:ss'
		)
	}
}
//把日期字符串转换为纯数字,例如20191231235959
export function dateFormatterNumber(str, hasTime = true, hasSecond = true): string {
	let d = new Date(str);
	if (isNull(str)) {
		let d = new Date();
	}
	let year = d.getFullYear();
	let month = (d.getMonth() + 1) < 10 ? '0' + (d.getMonth() + 1) : (d.getMonth() + 1);
	let day = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
	if (hasTime) {
		let hour = d.getHours() < 10 ? '0' + d.getHours() : d.getHours();
		let minute = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes();
		let second = d.getSeconds() < 10 ? '0' + d.getSeconds() : d.getSeconds();
		console.log(year, month, day, year + "" + month + "" + day + "" + hour + "" + minute + "" + (hasSecond === true ? second : ""))
		return year + "" + month + "" + day + "" + hour + "" + minute + "" + (hasSecond === true ? second : "");
	} else {
		return year + "" + month + "" + day;
	}
}
//表单校验
export async function validate(ref: any) {
  if (ref == null) {
    return true
  }
  let isValidate = true
  await ref.validate((valid, fields) => {
    if (valid) {
    } else {
      isValidate = false
      console.log('validate false!', fields)
    }
  })
  return isValidate
}
// 节流
export function throttle(this: any, fn: Function, interval = 500) {
	let last = 0;
	return (...args) => {
		let now = +new Date();
		// 还没到时间
		if (now - last < interval) return;
		last = now;
		fn.apply(this, args);
	};
}
export function html2Escape(sHtml: string) {
	const dict = { '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' };
	return sHtml.replace(/[<>&"]/g, (c: string) => {
		return dict[c];
	});
}
//防抖动
let timestamp, timeout
export function debounce(func, wait, immediate) {
	let args, context, result
	const later = () => {
		// 距离上一次触发的时间间隔
		const last = (timestamp === undefined ? 0 : +new Date() - timestamp)
		// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
		if (last < wait && last > 0) {
			//是否等待时间间隔达到后调用防抖 加上条件判断防止时间间隔内连续触发多个定时任务
			if (timeout == null) timeout = setTimeout(later, wait - last)
		} else {
			timeout = null
			// 如果设定为immediate===true,因为开始边界已经调用过了此处无需调用
			if (!immediate) {
				timestamp = +new Date()
				result = func.apply(context, args)
				if (!timeout) context = args = null
			}
		}
	}
	return later()
}
/**
 * 对象数组深拷贝
 * @param {Array,Object} source 需要深拷贝的对象数组
 * @param {Array} noClone 不需要深拷贝的属性集合
 */
export function deepClone(source: any, noClone: string[] = []): any {
	if (!source && typeof source !== 'object') {
		throw new Error('error arguments deepClone')
	}
	const targetObj: any = source.constructor === Array ? [] : {}
	Object.keys(source).forEach((keys: string) => {
		if (source[keys] && typeof source[keys] === 'object' && noClone.indexOf(keys) === -1) {
			targetObj[keys] = deepClone(source[keys], noClone)
		} else {
			targetObj[keys] = source[keys]
		}
	})
	return targetObj
}

2.这么用

import { clog, isNull } from '@/utils'
clog(jsonObj)

Vue3引入静态配置文件最佳方案

1. 在public目录下面添加一个配置文件config.js

2. 在html.index文件中引入此文件

3. 在vue文件中直接访问就行

config.js

const config = {
  BaseApiUrl: 'http://localhost:44311/',
  Version: '2.0.20220506',
}

html.index

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title>Vue3Vite</title>
    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript" src="config.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

使用举例

import axios from 'axios'
// 创建axios对象,设置baseURL
const service = axios.create({
  baseURL: config.BaseApiUrl + '/', // 直接访问config对象即可
  timeout: 30000,
})
export default service

Vue3全局方法方案二

1.先吧全局方法写到tools.js文件中

tools.js

//动态创建vue对象
const mountPrintData = function (printData, vhtmlDivId = 'print') {
  clog('mountPrintData')
  clog(printData)
  const App = {
    data() {
      return {
        data: printData,
      }
    },
  }
  const app = Vue.createApp(App)
  app.mount('#' + vhtmlDivId)
}
// 控制台日志,支持传一个参数(对象/字符串), 也支持传两个参数(标志,日志消息<可以是对象,可以是字符串>)
const clog = function (flag, value = 'xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx') {
  try {
    let tmp = ''
    // 如果value为默认值,则没有传递第二个参数,只处理第一个参数
    if (value === `xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx`) {
      tmp = JSON.stringify(flag)
      console.log(tmp)
    } else if (isNull(value)) {
      tmp = JSON.stringify(flag)
      console.log(tmp + ':')
    } else if (isNull(flag)) {
      tmp = JSON.stringify(value)
      console.log(':' + tmp)
    } else {
      tmp = JSON.stringify(value)
      console.log(flag + ':' + tmp)
    }
    return tmp
  } catch (err) {
    console.log('log', err)
    return ' 空对象或者空字符串 '
  }
}
// 判断对象,数组,字符串是否为空,例如:  'undefined' , 'null' , '' , '   ' , {}  , [] 全部判断为空
const isNull = function (obj) {
  if (typeof obj === 'object') {
    let json = JSON.stringify(obj)
    if (json === '{}') {
      return true
    }
    if (json === '[]') {
      return true
    }
    return false
  }
  let str = String(obj)
  if (str === 'undefined' || str === 'null' || str === '' || !str || !/[^\s]/.test(str)) {
    return true
  }
  return false
}

2.在Index.html中引入

按如下引入后tools.js中的方法就可以在任何位置直接使用了

<script type="text/javascript" src="tools.js"></script>

3.在ts,js代码中直接使用

<template>
 ...
</template>
<script lang="ts">
export default {
  setup() {
    clog(`test`)  //直接使用
  }
}
</script>

Vue2中打印日志的最佳实践

在vue的单页面应用中建议在public目录添加如下的tools.js全局js静态方法

在index.html中这样引用:

<script type="text/javascript" src="tools.js"></script>

如此,在任何地方打印控制台日志就可以这么写: clog(xxx) xxx可以是字符串,也可以是对象。

PS: 打印json对象简单的方法: console.log(JSON.stringify(jsonObj))

tools.js

//判断对象,数组,字符串等是否为空
function isNull(obj){
	let str = String(obj)
	if (str === 'undefined' || str === 'null' || str === '' || !str || !/[^\s]/.test(str)) {
		return true
	}
	if (typeof obj === 'object') {
		let json = JSON.stringify(obj)
		if (json === '{}') {
			return true
		}
		if (json === '[]') {
			return true
		}
		return false
	} else {
		return false
	}
}
// 控制台日志,支持传一个参数(对象/字符串), 也支持传两个参数(标志,日志消息<可以是对象,可以是字符串>)
function clog(flag, value= 'xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx') {
	try {
		// 如果value为默认值,则没有传递第二个参数,只处理第一个参数
		if (value === `xxxxxxxxxxxxxxxxxxx=Default-value_override+xxxxxxxxxxxxxxxxx`) {
			let tmp = JSON.stringify(flag);
			console.log(tmp)
		} else if (isNull(value)) {
			let tmp = JSON.stringify(flag);
			console.log(tmp + ":")
		} else if (isNull(flag)) {
			let tmp = JSON.stringify(value);
			console.log(":" + tmp)
		} else {
			let tmp = JSON.stringify(value);
			console.log(flag + ":" + tmp)
		}
	} catch (err) {
		console.log("log", err)
	}
}
//深拷贝对象
function copySelf(obj) {
  var newobj = obj.constructor === Array ? [] : {};
  if (typeof obj !== "object") {
    return;
  }
  for (var i in obj) {
    newobj[i] = typeof obj[i] === "object" ? copySelf(obj[i]) : obj[i];
  }
  return newobj;
}
//批量导入局部组件 (批量导入全局组件参见vue官网)
//使用方法 components: importComponents(require.context('./', false, /Yi.*\.vue$/)),  // 导入当前目录以"Yi" 开头,以".vue"结尾的全部组件
//require.context('./components', false, /Yi.*\.vue$/) : webpack的方法, 第一个参数为文件路径, 第二个参数为是否包含子文件夹, 第三个参数为正则
function importComponents(comps) {
  let res_components = {}
  comps.keys().forEach((fileName) => {
    let comp = comps(fileName)
    res_components[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
  })
  return res_components
}
//获取当前时间, 出参为格式化后的日期字符串
function timeNow() {
  var time = new Date();  // 程序计时的月从0开始取值后+1
  var m = time.getMonth() + 1;
  var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
  return t;
}
//一天的开始, 入参为Date类型, 出参为格式化后的日期字符串
function timeDayBegin(time) {
  var m = time.getMonth() + 1;
  var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " 00:00:00";
  return t;
}
//一天的结束, 入参为Date类型, 出参为格式化后的日期字符串
function timeDayEnd(time) {
  var m = time.getMonth() + 1;
  var t = time.getFullYear() + "-" + m + "-" + time.getDate() + " 23:59:59";
  return t;
}
//字符串数组转整型数字键
function strArr2IntArr(arrStr) {
  for (var i = 0; i < arrStr.length; i++) {
    arrStr[i] = parseFloat(arrStr[i])
  }
  return arrStr;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Vue全局监测错误并生成错误日志实现方法介绍

    目录 一.准备工作 (1)规定错误码 (2)设置错误处理函数 (3)保存错误日志 二.监听错误 (1)JS错误与静态资源加载错误 (2)Vue逻辑错误 (3)请求错误与Promise错误 三.效果演示 四.完整代码 一.准备工作 (1)规定错误码 像是请求码(404.500)一样,我觉得错误都应该规定好对应的错误码.个人喜好. // 错误代码 const errCode = new Map([ // 本地系统错误 ['E1001', '系统未知错误'], ['E1002', 'vue逻辑错误']

  • Vue打印错误日志问题

    目录 Vue3全局方法和静态配置文件的最佳实践 Vue3全局方法最佳方案 1.添加一个工具类,例如utils.ts 2.这么用 Vue3引入静态配置文件最佳方案 Vue3全局方法方案二 1.先吧全局方法写到tools.js文件中 2.在Index.html中引入 3.在ts,js代码中直接使用 Vue2中打印日志的最佳实践 Vue3全局方法和静态配置文件的最佳实践 Vue3中打印错误日志的最佳实践: 推荐引入全局自定义方法clog,任何地方打印任何类型 在Vue3.0中全局的方法一般有下面两个

  • springboot log4j2不能打印框架错误日志的解决方案

    springboot log4j2为什么不能打印框架错误日志 问题 使用springboot时老的框架使用的是log4j2,为了兼容不能够使用logback,按照网上的教程导入了log4j2但是不能够输入框架错误日志,例如bean命名重复,springmvc url映射重复,这些都是开发中所需要的友好提示 解决方案 怎么出现的问题,就不详细描述了,原因是我引入的log42是散件不是基于springboot集成配置的,导致只能够输出基本信息,原理我会在 一个月后左右探究完毕补充. 下面我说说怎么正

  • Java工程如何打印程序日志过程解析

    很久之前,有个朋友问我,如果一个老项目让你接手去进行后续维护,你会先从哪里入手.让自己更快地上手项目?当时我没有特别正面去回答这个朋友的问题,我说:一个老项目是否容易上手,一个非常关键的地方就是这个项目的日志是否打得足够好.因为通常来说,一个老项目相对比较稳定了,后续大概率不会有比较大的变更和改动,那么对于这样的项目,核心就是"维稳".但是任何人都无法保证项目在线上运行时不会出线上故障,在出现线上问题或者故障时,如何快速止损就是第一要义,而日志在止损过程中就扮演着非常重要的角色.日志打

  • php错误日志简单配置方法

    本文实例讲述了php配置错误日志的方法.分享给大家供大家参考,具体如下: php.ini: ; 错误日志 log_errors = On ; 显示错误 display_errors = Off ; 日志路径 error_log = "/usr/local/lnmp/php/var/log/error_log" ; 错误等级 error_reporting = E_ALL&~E_NOTICE php-fpm.conf: [global] ; php-fpm pid文件 pid =

  • 记录PHP错误日志 display_errors与log_errors的区别

    display_errors 错误回显,一般常用语开发模式,但是很多应用在正式环境中也忘记了关闭此选项.错误回显可以暴露出非常多的敏感信息,为攻击者下一步攻击提供便利.推荐关闭此选项. display_errors = On 开启状态下,若出现错误,则报错,出现错误提示 dispaly_errors = Off 关闭状态下,若出现错误,则提示:服务器错误.但是不会出现错误提示 log_errors 在正式环境下用这个就行了,把错误信息记录在日志里.正好可以关闭错误回显. 对于PHP开发人员来说,

  • Android 捕获错误日志的方法

    前提 今天在群里聊天的时候有群友问如何捕获错误日志,我说可以自己写,也可以用第三方的比如腾讯的bugly,友盟的错误统计等等,但是那些是别人的东西,作为一个程序员当然是要知其然,并且要知其所以然.因此今天就在此写一下关于捕获错误日志的文章,希望可以给新手指导,大佬请绕行. 首先 要捕获错误日志当然是调用系统的了,这样最方便,也是大家常用的了,废话不多说,直接上图,no pic say a xx. 错误日志.png 其次 上面的图是日志信息,下面来看看代码如何编写. 捕获错误日志信息类 publi

  • Logger.error打印错误异常的详细堆栈信息

    一.问题场景 使用Logger.error方法时只能打印出异常类型,无法打印出详细的堆栈信息,使得定位问题变得困难和不方便. 二.先放出结论 Logger类下有多个不同的error方法,根据传入参数的个数及类型的不同,自动选择不同的重载方法. 当error(Object obj)只传入一个参数时会将异常对象作为Object使用,并最终当做String打印出来,当使用两个参数error(String message, Throwable t),且第二个参数为Throwable时,才会将完整的异常堆

  • 解决Druid动态数据源配置重复刷错误日志的问题

    Druid动态数据源配置 主要是继承AbstractRoutingDataSource再通过AOP来实现动态数据源切换. 下面给大家介绍Druid动态配置数据源重复刷错误日志问题,具体内容如下所示: 问题描述 功能需求: 使用druid数据库连接池实现 动态的配置数据源功能:IP.端口.用户名.密码都是用户页面手动输入,可以测试连接,保存数据源. 问题说明: 既然是用户自己配置的数据源,就无法避免输入错误,连接失败等情况. 预期情况:用户输入的配置错误,测试连接时,会返回连接失败的信息. 实际情

  • Vue3 使用axios拦截器打印前端日志

    目录 一.前言 二.使用axios拦截器打印前端日志 一.前言 很多时候我们需要对前端进行调试,也就是前后端接口之间交互的调试,常用的方式肯定是打日志了,如console.log ('日志内容'). 就单个方法其实用这种方法是可以的,多个接口和方法,这样的调试方法就差了一些,再有就是方法有执行顺序,有时候反倒影响调试了. 二.使用axios拦截器打印前端日志 这是一种比较值得推荐的方式,也就是写一次,就不用总写console.log了. 突然想到,做测试时候,常看到的一句话: 一切都是为了测试

随机推荐