material-ui-error-reporting

material-ui-error-reporting

Simple error reporting component for your material-ui application.

Installation

yarn add material-ui-error-reporting

Or with npm

npm i --save material-ui-error-reporting

Usage example

Component:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import ErrorReporting from 'material-ui-error-reporting';
 
import {connect} from 'react-redux';
 
// ...
 
class App extends Component {
    static defaultProps = {
        error: {
            action: '',
            error: null
        }
    };
 
    static propTypes = {
        error: PropTypes.object,
        dispatch: PropTypes.func
    };
 
    render() {
        return (
            <div>
                <ErrorReporting
                    open={this.props.error.error !== null}
                    action={this.props.error.action}
                    error={this.props.error.error}
                    />
            </div>
        );
    }
}
 
function mapStoreToProps(state) {
    return {
        error: state.errors
    };
}
 
export default connect(mapStoreToProps)(App);

Reducer:

import {ERROR_ADD} from 'store/action';
 
import {get} from 'lodash';
 
let initialState = {
    action: '',
    error: null
};
 
export const errors = (state = initialState, action) => {
    switch (action.type) {
    case ERROR_ADD:
        return {
            ...state,
            action: get(action.payload, 'action.type', ''),
            error: action.payload.error
        };
    default:
        return state;
    }
};

Action:

const id = (name) => '@@app/' + name;
 
export const REQUESTING = id('REQUESTING');
export const RECEIVED = id('RECEIVED');
export const FAILED = id('FAILED');
export const ERROR_ADD = id('ERROR_ADD');
 
const newAction = (type, payload) => ({type, payload});
 
export const requesting = (payload) => newAction(REQUESTING, payload);
export const received = (payload) => newAction(RECEIVED, payload);
export const failed = (payload) => newAction(FAILED, payload);
 
export const errorAdd = (error, action) => newAction(ERROR_ADD, {error, action});

Some provider pushing an error:

const url = '...';
 
export const provide = (criteria) => (dispatch) => {
    dispatch(requesting());
    return request(url + '/' + criteria)
        .then((data) => dispatch(received(data)))
        .catch((err) => {
                dispatch(failed(err));
                dispatch(errorAdd(err, requesting()));
            }
        );
};

Properties

For snackbar props please see material-ui docs.

Name	Type	Default	Description
open	boolean	false	State of the snackbar, opened or closed.
action	string	''	Name of the action where error happened.
error	string|Error	null	Actual error, it should have toString() method.
autoHideDuration	number	10000	Snackbar prop.
getMessage	function	(props) => props.action + ': ' + props.error	Pure function which will receive props as first argument and must return a string which should contain error message. Default implementation is a concatenation of the action with error delimited by :.
style	object	{backgroundColor: red900, color: grey50}	Object with the styles for style, contentStyle and bodyStyle of snackbar(will receive a copy into each of this props).
onError	function	(error, action = '') => undefined	Will be called when component props receives non null error.
onClose	function	(reason, error, action = '') => undefined	Will be called when error message closes.

License

MIT