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}
>