Avoid breaking the entire UI when naughty characters are present in the file name or directory; closes #2575
This commit is contained in:
parent
65d04d0c05
commit
903b5795db
7 changed files with 78 additions and 39 deletions
39
resources/scripts/components/elements/ErrorBoundary.tsx
Normal file
39
resources/scripts/components/elements/ErrorBoundary.tsx
Normal file
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import tw from 'twin.macro';
|
||||
import Icon from '@/components/elements/Icon';
|
||||
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/ban-types
|
||||
class ErrorBoundary extends React.Component<{}, State> {
|
||||
state: State = {
|
||||
hasError: false,
|
||||
};
|
||||
|
||||
static getDerivedStateFromError () {
|
||||
return { hasError: true };
|
||||
}
|
||||
|
||||
componentDidCatch (error: Error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
render () {
|
||||
return this.state.hasError ?
|
||||
<div css={tw`flex items-center justify-center w-full my-4`}>
|
||||
<div css={tw`flex items-center bg-neutral-900 rounded p-3 text-red-500`}>
|
||||
<Icon icon={faExclamationTriangle} css={tw`h-4 w-auto mr-2`}/>
|
||||
<p css={tw`text-sm text-neutral-100`}>
|
||||
An error was encountered by the application while rendering this view. Try refreshing the page.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
this.props.children;
|
||||
}
|
||||
}
|
||||
|
||||
export default ErrorBoundary;
|
Reference in a new issue