37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import * as React from 'react';
|
|
|
|
export interface ErrorState {
|
|
errorOccurred: boolean,
|
|
errorInfo: object,
|
|
error: object,
|
|
}
|
|
|
|
export class ErrorWrapper extends React.Component<{}, ErrorState> {
|
|
constructor(props) {
|
|
super(props)
|
|
this.state = { errorOccurred: false, errorInfo: null, error: null }
|
|
}
|
|
|
|
componentDidCatch(error, info) {
|
|
this.setState({ errorOccurred: true, errorInfo: info, error: error })
|
|
}
|
|
|
|
render() {
|
|
if (this.state.errorOccurred) {
|
|
console.log(this.state.error);
|
|
console.log(this.state.errorInfo);
|
|
return <>
|
|
<div className="text-center">
|
|
<p>An error occured! code isn't exactly "enterprise" so feel free to tell me on <a className="text-blue-400 hover:text-blue-600" href="https://github.com/camas/reddit-search/issues/new">Github</a> or use <a className="text-blue-400 hover:text-blue-600" href="https://pushshift.io/api-parameters/">pushshift</a> directly</p>
|
|
<div className="bg-gray-800 overflow-x-auto text-gray-400 mt-8 mx-2">
|
|
<p>{this.state.error.message}</p>
|
|
<p className="whitespace-pre-wrap">{this.state.errorInfo.componentStack.trim()}</p>
|
|
</div>
|
|
</div>
|
|
</>;
|
|
} else {
|
|
return this.props.children;
|
|
}
|
|
}
|
|
}
|