2.3.0 • Published 7 years ago
material-ui-error-reporting v2.3.0
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. |