Internationalize ErrorBoundary

This commit is contained in:
schroda
2025-03-28 18:47:29 +01:00
parent 07a44ed02b
commit 99f14e2f27
3 changed files with 14 additions and 5 deletions

View File

@@ -380,6 +380,7 @@
"invalid_action": "This is not a valid action", "invalid_action": "This is not a valid action",
"invalid_file_type": "Invalid filetype", "invalid_file_type": "Invalid filetype",
"invalid_input": "Invalid input", "invalid_input": "Invalid input",
"unrecoverable_error": "Something went wrong\nAn error occurred that we cannot recover from",
"update_failed": "Could not check for updates" "update_failed": "Could not check for updates"
} }
}, },

View File

@@ -8,7 +8,9 @@
import { Component, ErrorInfo, ReactNode, useEffect, useRef, useState } from 'react'; import { Component, ErrorInfo, ReactNode, useEffect, useRef, useState } from 'react';
import { useLocation } from 'react-router-dom'; import { useLocation } from 'react-router-dom';
import { t } from 'i18next';
import { getErrorMessage } from '@/lib/HelperFunctions.ts'; import { getErrorMessage } from '@/lib/HelperFunctions.ts';
import { EmptyView } from '@/modules/core/components/placeholder/EmptyView.tsx';
interface Props { interface Props {
children?: ReactNode; children?: ReactNode;
@@ -54,10 +56,11 @@ class RealErrorBoundary extends Component<Props, State> {
if (error) { if (error) {
return ( return (
<> <EmptyView
<h1>Something went wrong.</h1> message={t('global.error.label.unrecoverable_error')}
<p>{getErrorMessage(error)}</p> messageExtra={getErrorMessage(error)}
</> retry={() => window.location.reload()}
/>
); );
} }

View File

@@ -68,7 +68,11 @@ const ExtraMessage = ({ messageExtra }: Pick<EmptyViewProps, 'messageExtra'>) =>
if (!isGraphqlException) { if (!isGraphqlException) {
return ( return (
<Typography variant="body1" sx={{ wordBreak: 'break-word', whiteSpace: 'pre-line', pointerEvents: 'all' }}> <Typography
variant="body1"
sx={{ wordBreak: 'break-word', whiteSpace: 'pre-line', pointerEvents: 'all' }}
color="textSecondary"
>
{messageExtra} {messageExtra}
</Typography> </Typography>
); );
@@ -98,6 +102,7 @@ const ExtraMessage = ({ messageExtra }: Pick<EmptyViewProps, 'messageExtra'>) =>
<Collapse in={showFullError}> <Collapse in={showFullError}>
<Typography <Typography
variant="body1" variant="body1"
color="textSecondary"
sx={{ wordBreak: 'break-word', whiteSpace: 'pre-line', pointerEvents: 'all' }} sx={{ wordBreak: 'break-word', whiteSpace: 'pre-line', pointerEvents: 'all' }}
> >
{graphqlStackTrace} {graphqlStackTrace}