我如何使用像loglevel這樣的庫來登錄我的react / redux Web應用程序

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

這是我最終要使用的代碼。

中間件/ logger.js

import * as loglevel from 'loglevel'

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

export default loglevel

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