Package Exports

material-ui-error-reporting

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (material-ui-error-reporting) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

material-ui-error-reporting

Simple error reporting component for your material-ui application.

Screenshot

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 ErrorReporting from 'material-ui-error-reporting';

import {connect} from 'react-redux';

// ...

class App extends Component {
    static defaultProps = {
        error: {
            action: '',
            error: null
        }
    };

    static propTypes = {
        error: React.PropTypes.object,
        dispatch: React.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`
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