好看的、好用的、清晰的log信息
使用npm(推荐):
$ npm install --save-dev @woolson/logger
HTML引入:
<script src="../somepath/logger.min.js"></script>
传统项目
// 可在初始化的时候配置
var logger = new Logger({})
// 具体方法
logger.log('Hello world')
logger.warn('Hello world')
logger.error('Hello world')
logger.debug('title', 'Hello world') or logger.debug('Hello world')
logger.server(data)
Vue项目中
import Logger from '@woolson/logger'
// 可在初始化的时候配置
Vue.use(Logger, config)
// 可以再每个组件中使用
this.$log('Hello world')
this.$warn('Hello world')
this.$error('Hello world')
this.$debug('title', 'Hello world') or this.debug('Hello world')
logger.$server(data)
- 收集错误和提升体验
配置 | 类型 | 描述 |
---|---|---|
colored | Boolean | 是否使用颜色,默认true |
logLevel | String | log、 warn、 error(debug)在log等级才会显示,默认log |
dateTemp | String | log的时间格式,默认HH:mm:SS,具体配置可参考moment(部分支持) |
debugTitleSize | Number | debug模式标题的字体大小,默认大小14 |
catchErrorUrl | String | server方法把错误信息传到后端的接口 |
logger.log('Hello world')
logger.warn('Hello world')
logger.error('Hello world')
可在debug
时候使用,颜色随机以便区分区域
logger.debug('Hello world')
logger.debug('订单数据', {obj: 123})
收集用户端的错误信息,可尽快知晓和定位错误
客户端
logger.server(data)
服务端
// /api/catchError 为配置中的接口
app.post('/api/catchError', function (req, res) {
var body = req.body
var logPath = path.join(__dirname, '/static/error.log')
var date = utils.moment.getCurrent('YYYY-MM-DD HH:mm:SS')
var content = [
`${'='.repeat(15)}${date}${'='.repeat(15)}\n`,
`Error: ${body.msg};\n`,
`ErrorFile: ${body.url};\n`,
`ErrorLine: ${body.line};\n`,
`ErrorColumn: ${body.col};\n`,
`${'='.repeat(49)}\n\n\n`,
]
fs.appendFileSync(logPath, content.join(''))
res.send({success: true})
})