diff --git a/src/ui/component/errorBoundary/view.jsx b/src/ui/component/errorBoundary/view.jsx index 39751f9e0..632f0c2d2 100644 --- a/src/ui/component/errorBoundary/view.jsx +++ b/src/ui/component/errorBoundary/view.jsx @@ -3,19 +3,25 @@ import { Lbryio } from 'lbryinc'; import * as React from 'react'; import Yrbl from 'component/yrbl'; import Button from 'component/button'; +import { withRouter } from 'react-router'; type Props = { children: React.Node, + history: { + replace: string => void, + }, }; type State = { hasError: boolean, }; -export default class ErrorBoundary extends React.Component { +class ErrorBoundary extends React.Component { constructor() { super(); this.state = { hasError: false }; + + (this: any).refresh = this.refresh.bind(this); } static getDerivedStateFromError() { @@ -35,6 +41,13 @@ export default class ErrorBoundary extends React.Component { } } + refresh() { + const { history } = this.props; + // use history.replace instead of history.push so the user can't click back to the errored page + history.replace(''); + this.setState({ hasError: false }); + } + render() { if (this.state.hasError) { return ( @@ -50,7 +63,7 @@ export default class ErrorBoundary extends React.Component { button="link" className="load-screen__button" label={__('refreshing the app')} - onClick={() => (window.location.href = '/')} + onClick={this.refresh} />{' '} {__('to fix it')}.

@@ -64,3 +77,5 @@ export default class ErrorBoundary extends React.Component { return this.props.children; } } + +export default withRouter(ErrorBoundary);