Recoil Logger


Recoil Logger is a recoil logging tool that lets you replay problems as if they happened in your own browser. This devtool is based on redux-logger, but implemented for recoil in the react way.

Table of contents

- Install
- Usage
- Options
- Recipes
- Log only in development
- Log everything except actions with certain type
- Collapse actions with certain type
- Log batched actions
- To Do
- License

Install

``sh
$ yarn add recoil-devtools-logger
`

Typescript types are also available.

Usage

`jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { atom, selector, RecoilRoot } from 'recoil';
import { RecoilLogger } from 'recoil-devtools-logger';

const a = atom({
/ ... /
});
const b = selector({
/ ... /
});
const c = atom({
/ ... /
});

const App = () => (

{/ logs for related recoil values "a" and "b" /}


{/ another logger for recoil value "c" /}


{/ code ... /}

);

ReactDOM.render(, document.getElementById('root'));
`

Custom Logger

You can define your custom logger and pass it to the RecoilLogger in the followin way:

`jsx
...

import { RecoilLogger, createLogger } from 'recoil-devtools-logger';

const logger = createLogger({
// options
});

const App = () => (

{/ logs for related recoil values /}
values={[/ ... /]}
logger={logger}
/>

{/ ... /}

);

...
`

$3

`js
{
predicate, // if specified this function will be called before each action is processed with this middleware.
collapsed, // takes a Boolean or optionally a Function that receives getState function for accessing current store state and action object as parameters. Returns true if the log group should be collapsed, false otherwise.
duration = false: Boolean, // print the duration of each action?
timestamp = true: Boolean, // print the timestamp with each action?

level = 'log': 'log' | 'console' | 'warn' | 'error' | 'info', // console's level

colors: ColorsObject, // colors for title, prev state, action and next state: https://github.com/ulises-jeremias/recoil-devtools/blob/master/packages/recoil-devtools-logger/src/defaults.ts#L12-L18

titleFormatter, // Format the title used when logging actions.

stateTransformer, // Transform state before print. Eg. convert Immutable object to plain JSON.
actionTransformer, // Transform action before print. Eg. convert Immutable object to plain JSON.
errorTransformer, // Transform error before print. Eg. convert Immutable object to plain JSON.

logger = console: LoggerObject, // implementation of the console API.
logErrors = true: Boolean, // should the logger catch, log, and re-throw errors?

diff = false: Boolean, // (alpha) show diff between states?
diffPredicate, // (alpha) filter function for showing states diff, similar to predicate
}
`

$3

#### level (string | Function | object)

Level of console. warn, error, info or else.

It can be a function (action: object) => level: string.

It can be an object with level string for: prevState, action, nextState, error

It can be an object with getter functions: prevState, action, nextState, error. Useful if you want to print
message based on specific state or action. Set any of them to false if you want to hide it.

- prevState(prevState: object) => level: string
- action(action: object) => level: string
- nextState(nextState: object) => level: string
- error(error: any, prevState: object) => level: string

_Default: log_

#### duration (Boolean)

Print duration of each action?

_Default: false_

#### timestamp (Boolean)

Print timestamp with each action?

_Default: true_

#### colors (object)

object with color getter functions: title, prevState, action, nextState, error. Useful if you want to paint
message based on specific state or action. Set any of them to false if you want to show plain message without colors.

- title(action: object) => color: string
- prevState(prevState: object) => color: string
- action(action: object) => color: string
- nextState(nextState: object) => color: string
- error(error: any, prevState: object) => color: string

#### logger (object)

Implementation of the console API. Useful if you are using a custom, wrapped version of console.

_Default: console_

#### logErrors (Boolean)

Should the logger catch, log, and re-throw errors? This makes it clear which action triggered the error but makes "break
on error" in dev tools harder to use, as it breaks on re-throw rather than the original throw location.

_Default: true_

#### \_\_collapsed = ({ prevState, nextState }: object, action: object, logEntry:

object) => Boolean\_\_
Takes a boolean or optionally a function that receives getState function for accessing current store state and action object as parameters. Returns true if the log group should be collapsed, false otherwise.

_Default: false_

#### predicate = ({ prevState, nextState }: object, action: object) => Boolean

If specified this function will be called before each action is processed with this middleware.
Receives getState function for accessing current store state and action object as parameters. Returns true if action should be logged, false otherwise.

_Default: null (always log)_

#### stateTransformer = (state: object) => state

Transform state before print. Eg. convert Immutable object to plain JSON.

_Default: identity function_

#### actionTransformer = (action: object) => action

Transform action before print. Eg. convert Immutable object to plain JSON.

_Default: identity function_

#### errorTransformer = (error: any) => error

Transform error before print.

_Default: identity function_

#### titleFormatter = (action: object, time: string?, took: Number?) => title

Format the title used for each action.

_Default: prints something like action @ ${time} ${action.description} (in ${took.toFixed(2)} ms)_

#### diff (Boolean)

Show states diff.

_Default: false_

#### diffPredicate = ({ prevState, nextState }: object, action: object) => Boolean

Filter states diff for certain cases.

_Default: undefined_

Recipes

$3

`jsx
...

const App = () => (

{/ logs for related recoil values only in development /}
{process.env.NODE_ENV === development && (
... /]} />
)}

{/ ... /}

);

...
`

$3

`js
import { createLogger } from 'recoil-devtools-logger';

createLogger({
predicate: (_, action) => action.description !== AUTH_REMOVE_TOKEN,
});
`

$3

`js
import { createLogger } from 'recoil-devtools-logger';

createLogger({
collapsed: (_, action) => action.description === FORM_CHANGE,
});
`

$3

`js
import { createLogger } from 'recoil-devtools-logger';

createLogger({
collapsed: (_, action, logEntry) => !logEntry.error,
});
`

$3

`js
import { createLogger } from 'recoil-devtools-logger';

const actionTransformer = (action) => {
if (action.description === 'BATCHING_TRANSACTION.BATCH') {
action.payload.type = action.payload.map((next) => next.type).join(' => ');
return action.payload;
}

return action;
};

const level = 'info';

const logger = {};

for (const method in console) {
if (typeof console[method] === 'function') {
logger[method] = console[method].bind(console);
}
}

logger[level] = function levelFn(...args) {
const lastArg = args.pop();

if (Array.isArray(lastArg)) {
return lastArg.forEach((item) => {
console[level].apply(console, [...args, item]);
});
}

console[level].apply(console, arguments);
};

export default createLogger({
level,
actionTransformer,
logger,
});
``

To Do

- [ ] Clean up code, because it's very messy, to be honest
- [ ] Write tests

Feel free to create PR for any of those tasks!

License

MIT