diff --git a/package-lock.json b/package-lock.json index a69f000ff..3697fcdba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -50,7 +50,7 @@ "papaparse": "^5.5.3", "react-d3-utils": "^3.1.2", "react-dropzone": "^14.3.8", - "react-error-boundary": "^6.0.3", + "react-error-boundary": "^6.1.0", "react-hook-form": "^7.71.0", "react-icons": "^5.5.0", "react-inspector": "^9.0.0", @@ -10394,9 +10394,9 @@ } }, "node_modules/react-error-boundary": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.0.3.tgz", - "integrity": "sha512-5guqn2UYpCFjE8UDMA8J7Kke+YSGBFrKQRJb3XdcaGZXYINZfQXgBt3ifY6MvjkN7QROc5A8zclyoSCwrcRUKw==", + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-6.1.0.tgz", + "integrity": "sha512-02k9WQ/mUhdbXir0tC1NiMesGzRPaCsJEWU/4bcFrbY1YMZOtHShtZP6zw0SJrBWA/31H0KT9/FgdL8+sPKgHA==", "license": "MIT", "peerDependencies": { "react": "^18.0.0 || ^19.0.0" diff --git a/package.json b/package.json index 79ac634a1..04fbb9ef6 100644 --- a/package.json +++ b/package.json @@ -104,7 +104,7 @@ "papaparse": "^5.5.3", "react-d3-utils": "^3.1.2", "react-dropzone": "^14.3.8", - "react-error-boundary": "^6.0.3", + "react-error-boundary": "^6.1.0", "react-hook-form": "^7.71.0", "react-icons": "^5.5.0", "react-inspector": "^9.0.0", diff --git a/src/component/main/ErrorOverlay.tsx b/src/component/main/ErrorOverlay.tsx index f6d6878cc..7385010f6 100644 --- a/src/component/main/ErrorOverlay.tsx +++ b/src/component/main/ErrorOverlay.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; +import type { ReactNode } from 'react'; import type { FallbackProps } from 'react-error-boundary'; const WrongP = styled.p` @@ -19,12 +20,20 @@ const Details = styled.details` `; export default function ErrorOverlay(props: FallbackProps) { + const error = props.error; + const message = + error && typeof error === 'object' && 'message' in error + ? error.message + : null; + const stack = + error && typeof error === 'object' && 'stack' in error ? error.stack : null; + return (
Something went wrong.
-

{props.error.message}

- {props.error.stack} +

{message as ReactNode}

+ {stack as ReactNode}
);