我如何使用像 loglevel 这样的库来登录我的 react/redux 网络应用程序

Question

我正在使用 davezuko/react-redux-starter-kit 并试图弄清楚如何使用一些第三方日志库，我可以根据布尔值有条件地设置可见日志级别。

这是我目前所拥有的

main.js

import React from 'react'
import ReactDOM from 'react-dom'
import createBrowserHistory from 'history/lib/createBrowserHistory'
import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import makeRoutes from './routes'
import Root from './containers/Root'
import configureStore from './redux/configureStore'

import * as log from 'loglevel'
if (__DEV__) {
  log.setLevel('DEBUG')
} else { 
  log.setLevel('ERROR')
}
// ...

一些其他导入文件（如 middleware/api.js）

// ...
log.debug('Fetching data from backend')

Answer 1

我通过创建一个导入并调用 getLogger() 的小实用程序解决了这个问题。

export function getLogger() {
    var level = localStorage.getItem('loglevel:cerberus') || 'INFO'
    var log = require("loglevel").getLogger("cerberus")
    log.setLevel(level)
    return log
}

然后在我要记录的组件中

import * as logUtils from 'logUtils'
var log = logUtils.getLogger()

...
...
...


log.debug("built the following array of rolePermissionsComponents", rolePermissionsComponents)

然后我可以使用 chrome 本地存储扩展来更改日志级别。我的应用是 100% 客户端。

您可以轻松地在 util 中编写自己的逻辑来管理您认为合适的日志级别。

Answer 2

这是我最终使用的代码..

middleware/logger.js

import * as loglevel from 'loglevel'

if (!__PROD__) {
  loglevel.setLevel('debug')
} else {
  loglevel.setLevel('error')
}

export default loglevel

然后我想在任何地方使用它，我只是 import log from 'middleware/logger'

我如何使用像 loglevel 这样的库来登录我的 react/redux 网络应用程序

How can i use a lib like loglevel to do logging in my react/redux web app

ecmascript-6

reactjs

redux

main.js

一些其他导入文件（如 middleware/api.js）