104 lines
2.9 KiB
TypeScript
104 lines
2.9 KiB
TypeScript
import * as React from 'react'
|
|
import * as q from '../../backend/src/Model'
|
|
import {
|
|
Button,
|
|
Modal,
|
|
Paper,
|
|
Toolbar,
|
|
Typography,
|
|
} from '@material-ui/core'
|
|
|
|
import Warning from '@material-ui/icons/Warning'
|
|
import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied'
|
|
|
|
import { Theme, withStyles } from '@material-ui/core/styles'
|
|
|
|
interface State {
|
|
error?: Error
|
|
}
|
|
|
|
interface Props {
|
|
classes: any
|
|
}
|
|
|
|
class ErrorBoundary extends React.Component<Props, State> {
|
|
constructor(props: Props) {
|
|
super(props)
|
|
this.state = {}
|
|
}
|
|
|
|
public componentDidCatch(error: Error, errorInfo: any) {
|
|
console.log('did catch', error)
|
|
}
|
|
|
|
public static getDerivedStateFromError(error: Error) {
|
|
return { error }
|
|
}
|
|
|
|
private restart = () => {
|
|
window.location = window.location
|
|
}
|
|
|
|
private clearStorage = () => {
|
|
localStorage.clear()
|
|
window.location = window.location
|
|
}
|
|
|
|
public render() {
|
|
if (!this.state.error) {
|
|
return this.props.children
|
|
}
|
|
|
|
const { classes } = this.props
|
|
return (
|
|
<Modal open={true} disableAutoFocus={true}>
|
|
<Paper className={classes.root}>
|
|
<Toolbar style={{ padding: '0' }}>
|
|
<Typography className={classes.title} variant="h6" color="inherit"><Warning /> Oooooops!</Typography>
|
|
</Toolbar>
|
|
<Typography>I hoped that you would never see this window, but MQTT-Explorer had an unexpected error.</Typography>
|
|
<Typography style={{ textAlign: 'center' }}><SentimentDissatisfied /></Typography>
|
|
<pre className={classes.textColor} style={{ maxHeight: '40vh', overflow: 'scroll' }}>
|
|
<code className={classes.textColor}>
|
|
{this.state.error.stack}
|
|
</code>
|
|
</pre>
|
|
<Typography>
|
|
Please report this issue with a short description of what happened to
|
|
<span> <a className={classes.textColor} href="https://github.com/thomasnordquist/MQTT-Explorer/issues">https://github.com/thomasnordquist/MQTT-Explorer/issues</a></span>
|
|
</Typography>
|
|
<div>
|
|
<div className={classes.buttonPositioning}><Button onClick={this.restart}>Restart</Button></div>
|
|
<div className={classes.buttonPositioning}><Button onClick={this.clearStorage}>Start Fresh</Button></div>
|
|
</div>
|
|
</Paper>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|
|
|
|
const styles = (theme: Theme) => ({
|
|
root: {
|
|
minWidth: 550,
|
|
maxWidth: 650,
|
|
backgroundColor: theme.palette.background.default,
|
|
margin: '14vh auto auto auto',
|
|
padding: `${2 * theme.spacing.unit}px`,
|
|
outline: 'none',
|
|
},
|
|
title: {
|
|
color: theme.palette.text.primary,
|
|
margin: '0',
|
|
textAlign: 'center' as 'center',
|
|
},
|
|
textColor: {
|
|
color: theme.palette.text.primary,
|
|
},
|
|
buttonPositioning: {
|
|
textAlign: 'center' as 'center',
|
|
marginTop: `${theme.spacing.unit * 2}px`,
|
|
},
|
|
})
|
|
|
|
export default withStyles(styles)(ErrorBoundary)
|