import React from 'react';
import isEqual from 'lodash/isEqual';
import { Flex } from '../../components/Flex';
import Alert from '../../components/Alert';

interface ErrorBoundaryState {
	error: any;
}

interface ErrorBoundaryProps {
	getErrorDisplay?: (error: any) => JSX.Element;
}

const DefaultErrorDisplay = () => (
	<Flex flex={1} alignItems="center" justifyContent="center">
		<Alert m={2} plaintext danger>
			Something went wrong
		</Alert>
	</Flex>
);

export default class ErrorBoundary extends React.Component<
	ErrorBoundaryProps,
	ErrorBoundaryState
> {
	constructor(props: ErrorBoundaryProps) {
		super(props);
		this.state = { error: null };
	}

	static getDerivedStateFromError(error: any) {
		return { error };
	}

	componentDidUpdate(prevProps: any) {
		if (!isEqual(prevProps, this.props)) {
			this.setState({ error: null });
		}
	}

	render() {
		if (this.state.error) {
			return this.props.getErrorDisplay ? (
				this.props.getErrorDisplay(this.state.error)
			) : (
				<DefaultErrorDisplay />
			);
		}

		return this.props.children;
	}
}

import React from 'react';
import { Flex } from '../../components/Flex';
import Alert from '../../components/Alert';

interface ErrorBoundaryState {
	error: any;
}

interface ErrorBoundaryProps {
	getErrorDisplay?: (error: any) => JSX.Element;
}

const DefaultErrorDisplay = () => (
	<Flex flex={1} alignItems="center" justifyContent="center">
		<Alert m={2} plaintext danger>
			Something went wrong
		</Alert>
	</Flex>
);

export default class ErrorBoundary extends React.Component<
	ErrorBoundaryProps,
	ErrorBoundaryState
> {
	constructor(props: ErrorBoundaryProps) {
		super(props);
		this.state = { error: null };
	}

	static getDerivedStateFromError(error: any) {
		return { error };
	}

	render() {
		if (this.state.error) {
			return this.props.getErrorDisplay ? (
				this.props.getErrorDisplay(this.state.error)
			) : (
				<DefaultErrorDisplay />
			);
		}

		return this.props.children;
	}
}

--- 
+++ 
@@ -1,4 +1,5 @@
 import React from 'react';
+import isEqual from 'lodash/isEqual';
 import { Flex } from '../../components/Flex';
 import Alert from '../../components/Alert';
 
@@ -31,6 +32,12 @@
 		return { error };
 	}
 
+	componentDidUpdate(prevProps: any) {
+		if (!isEqual(prevProps, this.props)) {
+			this.setState({ error: null });
+		}
+	}
+
 	render() {
 		if (this.state.error) {
 			return this.props.getErrorDisplay ? (
fix: Reset error boundary if props change

Previously, the error boundary was stuck in the error state until it was unmounted and remounted.

Change-type: patch
Signed-off-by: Graham McCulloch <5ca27e75aea3e5e83a04c6cfa5f1b63d358cd03d@balena.io>