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