From 00a60b89482f4a97cf0eaa3628d95be448436f84 Mon Sep 17 00:00:00 2001 From: jialin Date: Thu, 15 May 2025 22:55:53 +0800 Subject: [PATCH] chore: update error components for loading file failed --- src/atoms/settings.ts | 8 +++++++- src/layouts/error-boundary.tsx | 36 ++++++++++++++------------------- src/layouts/error-result.tsx | 37 ++++++++++++++++++++++++++++++++++ src/layouts/index.tsx | 2 ++ src/locales/en-US/common.ts | 5 ++++- src/locales/ja-JP/common.ts | 9 +++++++-- src/locales/ru-RU/common.ts | 9 +++++++-- src/locales/zh-CN/common.ts | 4 +++- 8 files changed, 82 insertions(+), 28 deletions(-) create mode 100644 src/layouts/error-result.tsx diff --git a/src/atoms/settings.ts b/src/atoms/settings.ts index e405dc0d..2caa3135 100644 --- a/src/atoms/settings.ts +++ b/src/atoms/settings.ts @@ -19,7 +19,13 @@ const defaultSettings: UserSettings = { export const getStorageUserSettings = () => { if (typeof window === 'undefined') return defaultSettings; try { - return JSON.parse(localStorage.getItem('userSettings') || '{}'); + const savedSettings = JSON.parse( + localStorage.getItem('userSettings') || '{}' + ); + return { + ...defaultSettings, + ...savedSettings + }; } catch { return defaultSettings; } diff --git a/src/layouts/error-boundary.tsx b/src/layouts/error-boundary.tsx index e8441144..66c23195 100644 --- a/src/layouts/error-boundary.tsx +++ b/src/layouts/error-boundary.tsx @@ -1,35 +1,29 @@ -import { Component } from 'react'; +import type { ErrorInfo } from 'react'; +import React from 'react'; +import ErrorResult from './error-result'; -interface ErrorBoundaryState { - hasError: boolean; -} - -class ErrorBoundary extends Component< +// eslint-disable-next-line @typescript-eslint/ban-types +class ErrorBoundary extends React.Component< { children?: React.ReactNode }, - ErrorBoundaryState + { hasError: boolean; errorInfo: string } > { - constructor(props: any) { - super(props); - this.state = { - hasError: false - }; - } + state = { hasError: false, errorInfo: '' }; - static getDerivedStateFromError(error: any) { - console.error('Error caught by Error Boundary:', error); - return { hasError: true }; + static getDerivedStateFromError(error: Error) { + return { hasError: true, errorInfo: error.message }; } - componentDidCatch(error: any, info: any) { - console.error('Error caught by Error Boundary:', error); - console.error(info); + componentDidCatch(error: any, errorInfo: ErrorInfo) { + // You can also log the error to an error reporting service + // eslint-disable-next-line no-console + console.log(error, errorInfo); } render() { if (this.state.hasError) { - return

Something went wrong.

; + // You can render any custom fallback UI + return ; } - return this.props.children; } } diff --git a/src/layouts/error-result.tsx b/src/layouts/error-result.tsx new file mode 100644 index 00000000..c1d99255 --- /dev/null +++ b/src/layouts/error-result.tsx @@ -0,0 +1,37 @@ +import { useIntl } from '@umijs/max'; +import { Result } from 'antd'; +import styled from 'styled-components'; + +const Inner = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 16px; +`; + +interface ErrorResultProps { + extra?: string; +} + +function isChunkLoadError(msg?: string): boolean { + if (typeof msg !== 'string') return false; + return msg.includes('Loading chunk') && msg.includes('failed'); +} + +const ErrorResult: React.FC = ({ extra }) => { + const intl = useIntl(); + return ( + + ); +}; + +export default ErrorResult; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 868b56b9..34caed32 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -36,6 +36,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import Exception from './Exception'; import './Layout.css'; import { LogoIcon, SLogoIcon } from './Logo'; +import ErrorBoundary from './error-boundary'; import { getRightRenderContent } from './rightRender'; import { patchRoutes } from './runtime'; @@ -465,6 +466,7 @@ export default (props: any) => { fixedHeader {...runtimeConfig} actionsRender={actionRender} + ErrorBoundary={ErrorBoundary} >