react-native-pluggable-logger

• Creates a middleware for Redux with pluggable logger
• pluggable logger handlers
  • null Handler => no logs
  • http Handler => logs to an log url
  • console Handler => logs to console
• logger can be used separate from middleware
• PSR3 like
• offline functionality => saves actions to log into redux stored

Contents

• Installation
• Example
• API
• License
• Contribution

Installation

yarn add react-native-pluggable-logger

or

npm install react-native-pluggable-logger

Example

Logger with handler

// logger.js
 
import { Logger, Handler } from 'react-native-pluggable-logger';
 
// create some logging handler
const consoleHandler = new Handler.ConsoleHandler();
const nullHandler = new Handler.NullHandler();
const httpHandler = new Handler.HttpHandler('http://myLogUrl.io');
 
// create a logger with handler
const myLogger = new Logger(consoleHandler);
myLogger.info('just an info'); // logged to console
// use null handler for do not displaying this logs
myLogger.setHandler(nullHandler);
myLogger.info('just an info');
// use http handler for sending logs to an url
myLogger.setHandler(httpHandler);
myLogger.info('just an info'); // sent to url
 
export default myLogger;

redux integration

// store.js
 
import {
  applyMiddleware,
  compose,
  createStore,
} from 'redux';
import { createReduxActionLoggerMiddleware, reduxLogger } from 'react-native-pluggable-logger';
import customerActionTypes from './ActionTypes/orders';
 
const reduxActionLoggerMiddleware = createReduxActionLoggerMiddleware({
  removeStatesFromLog: ['login'],
  actionTypesToLog: [
    customerActionTypes.CREATE_CUSTOMER,
  ],
});
 
const middleware = compose(applyMiddleware(
  // ... more middlewares
  reduxActionLoggerMiddleware,
));
 
const reducers = combineReducers({
  // ... more reducers
  reduxLogger,
});
 
export function configureStore(initialState = {}) {
  const store = createStore(
    reducers,
    initialState,
    middleware,
  );
  return { store };
}
 
export const { store } = configureStore();

import App from './App.react';
import logger from './logger';
import store from './store';
 
const AppWithLogger = withReduxLogger(store, logger, true)(App);
 
export default function index() {
  class MyApp extends Component {
    render() {
      return (
        <Provider store={store}>
          <AppWithLogger />
        </Provider>
      );
    }
  }
  AppRegistry.registerComponent('MyApp', () => MyApp);
}

API

Logger

Methods

return	method
	constructor(handler: HandlerInterface)
void	setHandler(handler: HandlerInterface)
Promise<boolean>	debug(message: string)
Promise<boolean>	info(message: string)
Promise<boolean>	notice(message: string)
Promise<boolean>	warning(message: string)
Promise<boolean>	error(message: string)
Promise<boolean>	critical(message: string)
Promise<boolean>	alert(message: string)
Promise<boolean>	emergency(message: string)
Promise<boolean>	log(level: logLevelEnum, message: string)

NullHandler

Methods

return	method
	constructor()
Promise<true>	async handleLog(log: logType)

ConsoleHandler

Methods

return	method
	constructor()
Promise<true>	async handleLog(log: logType)

HttpHandler

Methods

return	method
	constructor(logUrl: string, options?: requestOptions = defaultRequestOptions)
Promise<bolean>	async handleLog(log: logType)
void	setLogUrl(logUrl: string)
void	setAuthorisation(auth: string)
void	setBearerToken(token: string)

Details

constructor(logUrl: string, options?: requestOptions = defaultRequestOptions)

Parameters

name: type	description
logUrl: string	the url to sent log to
options?: requestOptions	object of options

default requestOptions

{
  accept: 'application/json',
  timeout: 20000,
  authorization: null,
}

---

async handleLog(log: logType)

Parameters

name: type	description
log: logType	the log object

---

setLogUrl(logUrl: string)

Parameters

name: type	description
logUrl: string	the logging url, the logs are sent to

---

setAuthorisation(auth: string)

Parameters

name: type	description
auth: string	string for auth header used in log request

---

setBearerToken(token: string)

Parameters

name: type	description
token: string	string for auth header with Bearer used in log request

Logger Middleware

Methods

return	method
Middleware<StateType, any, Dispatch<any>>	createReduxActionLoggerMiddleware({removeStatesFromLog = [], actionTypesToLog = []})
Function: (WrappedComponent: ComponentType<*>) => Component	withReduxLogger(reduxStore, logger, connectedLogger)

Details

createReduxActionLoggerMiddleware({removeStatesFromLog = [], actionTypesToLog = []})

Parameters

name: type	description
removeStatesFromLog: Array<string>	array of all states which should not be logged (e.g. password information)
actionTypesToLog: Array<string>	array of all action types which will be logged (whitelist)

---

withReduxLogger(reduxStore, logger, connectedLogger)

Parameters

name: type	description
reduxStore: ReduxStore<StateType, Action, Dispatch<Action>>	redux store
logger: Psr3LoggerInterface	logger from lib or own logger implementing the interface
connectedLogger?: boolean = true	if true only sending queued logs, when device connected

---

License

MIT for more information see LICENSE file

Contributing

Your are welcome to contribute. Every little bit helps this lib to be better and better.

Issues Request

Before you submit an issue, check if you can provide needed informations:

• specify the version of 'react native redux logger middleware'.
• specify the version of 'react native'.
• if the issue is a bug, a small example will be great. The steps that lead to the error are indispensable.

Pull Request

Before you submit a pull request check this checklist.

• if you submit a bug fix, created new test.
• if you submit a feature, updated README.
• test are green
• no lint errors or warnings
• no flow errors

Setting up environment

# clone your fork to your local machine 
git clone https://github.com/hffmnsnmstr/react-native-pluggable-logger.git
 
# change dir to local repo 
cd react-native-pluggable-logger
 
# install dependencies 
yarn

Unittest

store all test in tests folder

# run test only one time 
yarn test
 
# using jest watcher 
yarn tdd

Style & Linting

This codebase adheres to a custom style and is enforced using ESLint.

It is recommended that you install an eslint plugin for your editor of choice when working on this codebase, however you can always check to see if the source code is compliant by running:

yarn lint

flow

flow is a static type checker for javascript. For more information visit https://flow.org/.

yarn flow