From a1152f1ad129a6c676d936c34aa914faa9edc6cd Mon Sep 17 00:00:00 2001
From: Zeke Zhang <958414905@qq.com>
Date: Sun, 3 Nov 2024 17:32:05 +0800
Subject: [PATCH] refactor(ErrorBoundary): optimize code

---
 .../schema-initializer/withInitializer.tsx       |  6 +++---
 .../components/SchemaSettingsChildren.tsx        | 13 +++++++------
 .../application/schema-toolbar/hooks/index.tsx   |  4 ++--
 .../antd/action/Action.Drawer.tsx                |  2 +-
 .../antd/action/Action.Modal.tsx                 |  2 +-
 .../src/schema-component/antd/action/Action.tsx  |  2 +-
 .../antd/block-item/BlockItem.tsx                |  2 +-
 .../antd/block-item/BlockItemError.tsx           |  6 +-----
 .../src/schema-component/antd/page/Page.tsx      |  6 +-----
 .../src/client/filter/FilterItemInitializers.tsx |  2 +-
 .../src/client/renderer/ChartRenderer.tsx        | 16 +++++-----------
 11 files changed, 24 insertions(+), 37 deletions(-)

diff --git a/packages/core/client/src/application/schema-initializer/withInitializer.tsx b/packages/core/client/src/application/schema-initializer/withInitializer.tsx
index 997a571d5e..a4f08b1dc1 100644
--- a/packages/core/client/src/application/schema-initializer/withInitializer.tsx
+++ b/packages/core/client/src/application/schema-initializer/withInitializer.tsx
@@ -12,13 +12,13 @@ import { ConfigProvider, Popover, theme } from 'antd';
 import React, { ComponentType, useCallback, useMemo, useState } from 'react';
 
 import { css } from '@emotion/css';
+import { ErrorBoundary } from 'react-error-boundary';
 import { useNiceDropdownMaxHeight } from '../../common/useNiceDropdownHeight';
 import { useFlag } from '../../flag-provider';
 import { ErrorFallback, useDesignable } from '../../schema-component';
 import { useSchemaInitializerStyles } from './components/style';
 import { SchemaInitializerContext } from './context';
 import { SchemaInitializerOptions } from './types';
-import { ErrorBoundary } from 'react-error-boundary';
 
 const defaultWrap = (s: ISchema) => s;
 const useWrapDefault = (wrap = defaultWrap) => wrap;
@@ -91,7 +91,7 @@ export function withInitializer<T>(C: ComponentType<T>) {
       }
 
       return (
-        <ErrorBoundary FallbackComponent={ErrorFallback.Modal} onError={(err) => console.error(err)}>
+        <ErrorBoundary FallbackComponent={ErrorFallback.Modal} onError={console.error}>
           <SchemaInitializerContext.Provider
             value={{
               visible,
@@ -108,7 +108,7 @@ export function withInitializer<T>(C: ComponentType<T>) {
                 {...popoverProps}
                 arrow={false}
                 overlayClassName={overlayClassName}
-                  open={visible}
+                open={visible}
                 onOpenChange={setVisible}
                 content={wrapSSR(
                   <div
diff --git a/packages/core/client/src/application/schema-settings/components/SchemaSettingsChildren.tsx b/packages/core/client/src/application/schema-settings/components/SchemaSettingsChildren.tsx
index 26b52739bc..8791e7af25 100644
--- a/packages/core/client/src/application/schema-settings/components/SchemaSettingsChildren.tsx
+++ b/packages/core/client/src/application/schema-settings/components/SchemaSettingsChildren.tsx
@@ -9,6 +9,8 @@
 
 import React, { FC, memo, useEffect, useMemo, useRef } from 'react';
 
+import _ from 'lodash';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { useFieldComponentName } from '../../../common/useFieldComponentName';
 import { ErrorFallback, useFindComponent } from '../../../schema-component';
 import {
@@ -27,7 +29,6 @@ import {
 } from '../../../schema-settings/SchemaSettings';
 import { SchemaSettingItemContext } from '../context/SchemaSettingItemContext';
 import { SchemaSettingsItemType } from '../types';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 
 export interface SchemaSettingsChildrenProps {
   children: SchemaSettingsItemType[];
@@ -60,6 +61,10 @@ const SchemaSettingsChildErrorFallback: FC<
   );
 };
 
+const getFallbackComponent = _.memoize((key: string) => {
+  return (props) => <SchemaSettingsChildErrorFallback {...props} title={key} />;
+});
+
 export const SchemaSettingsChildren: FC<SchemaSettingsChildrenProps> = (props) => {
   const { children } = props;
   const { visible } = useSchemaSettings();
@@ -85,11 +90,7 @@ export const SchemaSettingsChildren: FC<SchemaSettingsChildrenProps> = (props) =
           // 一个不会重复的 key，保证每次渲染都是新的组件。
           const key = `${fieldComponentName ? fieldComponentName + '-' : ''}${item?.name}`;
           return (
-            <ErrorBoundary
-              key={key}
-              FallbackComponent={(props) => <SchemaSettingsChildErrorFallback {...props} title={key} />}
-              onError={(err) => console.log(err)}
-            >
+            <ErrorBoundary key={key} FallbackComponent={getFallbackComponent(key)} onError={console.log}>
               <SchemaSettingsChild {...item} />
             </ErrorBoundary>
           );
diff --git a/packages/core/client/src/application/schema-toolbar/hooks/index.tsx b/packages/core/client/src/application/schema-toolbar/hooks/index.tsx
index 8d0e645ee4..019bcd4d7e 100644
--- a/packages/core/client/src/application/schema-toolbar/hooks/index.tsx
+++ b/packages/core/client/src/application/schema-toolbar/hooks/index.tsx
@@ -9,9 +9,9 @@
 
 import { ISchema } from '@formily/json-schema';
 import React, { useMemo } from 'react';
+import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { ErrorFallback, useComponent, useDesignable } from '../../../schema-component';
 import { SchemaToolbar, SchemaToolbarProps } from '../../../schema-settings/GeneralSchemaDesigner';
-import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 
 const SchemaToolbarErrorFallback: React.FC<FallbackProps> = (props) => {
   const { designable } = useDesignable();
@@ -46,7 +46,7 @@ export const useSchemaToolbarRender = (fieldSchema: ISchema) => {
         return null;
       }
       return (
-        <ErrorBoundary FallbackComponent={SchemaToolbarErrorFallback} onError={(err) => console.error(err)}>
+        <ErrorBoundary FallbackComponent={SchemaToolbarErrorFallback} onError={console.error}>
           <C {...fieldSchema['x-toolbar-props']} {...props} />
         </ErrorBoundary>
       );
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
index 9847e5c9c2..4b2d1092b3 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Drawer.tsx
@@ -111,7 +111,7 @@ export const InternalActionDrawer: React.FC<ActionDrawerProps> = observer(
 );
 
 export const ActionDrawer: ComposedActionDrawer = (props) => (
-  <ErrorBoundary FallbackComponent={DrawerErrorFallback} onError={(err) => console.log(err)}>
+  <ErrorBoundary FallbackComponent={DrawerErrorFallback} onError={console.log}>
     <InternalActionDrawer {...props} />
   </ErrorBoundary>
 );
diff --git a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
index 5478cc0317..1bf62a93e8 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.Modal.tsx
@@ -154,7 +154,7 @@ export const InternalActionModal: React.FC<ActionDrawerProps<ModalProps>> = obse
 );
 
 export const ActionModal: ComposedActionDrawer<ModalProps> = (props) => (
-  <ErrorBoundary FallbackComponent={ModalErrorFallback} onError={(err) => console.log(err)}>
+  <ErrorBoundary FallbackComponent={ModalErrorFallback} onError={console.log}>
     <InternalActionModal {...props} />
   </ErrorBoundary>
 );
diff --git a/packages/core/client/src/schema-component/antd/action/Action.tsx b/packages/core/client/src/schema-component/antd/action/Action.tsx
index 67f253816c..83153601c0 100644
--- a/packages/core/client/src/schema-component/antd/action/Action.tsx
+++ b/packages/core/client/src/schema-component/antd/action/Action.tsx
@@ -56,7 +56,7 @@ const useA = () => {
   };
 };
 
-const handleError = (err) => console.log(err);
+const handleError = console.log;
 
 export const Action: ComposedAction = withDynamicSchemaProps(
   React.memo((props: ActionProps) => {
diff --git a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
index 76aea95113..deb129be5a 100644
--- a/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
+++ b/packages/core/client/src/schema-component/antd/block-item/BlockItem.tsx
@@ -44,7 +44,7 @@ export const BlockItem: React.FC<BlockItemProps> = withDynamicSchemaProps(
         style={style}
       >
         {render()}
-        <ErrorBoundary FallbackComponent={ErrorFallback} onError={(err) => console.log(err)}>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onError={console.log}>
           {children}
         </ErrorBoundary>
       </SortableItem>
diff --git a/packages/core/client/src/schema-component/antd/block-item/BlockItemError.tsx b/packages/core/client/src/schema-component/antd/block-item/BlockItemError.tsx
index 599acd93a3..b4bb2451eb 100644
--- a/packages/core/client/src/schema-component/antd/block-item/BlockItemError.tsx
+++ b/packages/core/client/src/schema-component/antd/block-item/BlockItemError.tsx
@@ -39,13 +39,9 @@ const FallbackComponent: FC<FallbackProps> = (props) => {
   );
 };
 
-const handleErrors = (error) => {
-  console.error(error);
-};
-
 export const BlockItemError: FC = ({ children }) => {
   return (
-    <ErrorBoundary FallbackComponent={FallbackComponent} onError={handleErrors}>
+    <ErrorBoundary FallbackComponent={FallbackComponent} onError={console.error}>
       {children}
     </ErrorBoundary>
   );
diff --git a/packages/core/client/src/schema-component/antd/page/Page.tsx b/packages/core/client/src/schema-component/antd/page/Page.tsx
index ca0a3cbb33..d9c227f03b 100644
--- a/packages/core/client/src/schema-component/antd/page/Page.tsx
+++ b/packages/core/client/src/schema-component/antd/page/Page.tsx
@@ -59,10 +59,6 @@ export const Page = (props) => {
   const { wrapSSR, hashId, componentCls } = useStyles();
   const { token } = useToken();
 
-  const handleErrors = useCallback((error) => {
-    console.error(error);
-  }, []);
-
   // 这里的样式是为了保证页面 tabs 标签下面的分割线和页面内容对齐（页面内边距可以通过主题编辑器调节）
   const tabBarStyle = useMemo(
     () => ({
@@ -176,7 +172,7 @@ export const Page = (props) => {
     <div className={`${componentCls} ${hashId} ${antTableCell}`}>
       <NocoBasePageHeader footer={footer} />
       <div className="nb-page-wrapper">
-        <ErrorBoundary FallbackComponent={ErrorFallback} onError={handleErrors}>
+        <ErrorBoundary FallbackComponent={ErrorFallback} onError={console.error}>
           {tabUid ? (
             // used to match the rout with name "admin.page.tab"
             <Outlet context={{ loading, disablePageHeader, enablePageTabs, fieldSchema, tabUid }} />
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
index 547ccf895c..fa94c21c93 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/filter/FilterItemInitializers.tsx
@@ -104,7 +104,7 @@ export const ChartFilterFormItem = observer(
             <CollectionFieldProvider name={schema.name} allowNull={!schema['x-collection-field']}>
               <ACLCollectionFieldProvider>
                 {/* {exists ? ( */}
-                <ErrorBoundary onError={(err) => console.log(err)} FallbackComponent={ErrorFallback}>
+                <ErrorBoundary onError={console.log} FallbackComponent={ErrorFallback}>
                   <FormItem className={className} {...props} extra={extra} />
                 </ErrorBoundary>
                 {/* ) : ( */}
diff --git a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx
index 95b5744c88..6ede400d5e 100644
--- a/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx
+++ b/packages/plugins/@nocobase/plugin-data-visualization/src/client/renderer/ChartRenderer.tsx
@@ -7,18 +7,18 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
+import { Schema } from '@formily/react';
+import { uid } from '@formily/shared';
 import { useAPIClient } from '@nocobase/client';
 import { Empty, Result, Spin, Typography } from 'antd';
 import React, { useContext, useEffect } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { useChart } from '../chart/group';
 import { useData, useFieldTransformer, useFieldsWithAssociation } from '../hooks';
 import { useChartsTranslation } from '../locale';
 import { getField } from '../utils';
-import { ChartRendererContext } from './ChartRendererProvider';
-import { useChart } from '../chart/group';
-import { Schema } from '@formily/react';
 import { ChartRendererDesigner } from './ChartRendererDesigner';
-import { uid } from '@formily/shared';
+import { ChartRendererContext } from './ChartRendererProvider';
 const { Paragraph, Text } = Typography;
 
 const ErrorFallback = ({ error }) => {
@@ -83,13 +83,7 @@ export const ChartRenderer: React.FC & {
 
   return (
     <Spin spinning={service.loading}>
-      <ErrorBoundary
-        key={errorKey}
-        onError={(error) => {
-          console.error(error);
-        }}
-        FallbackComponent={ErrorFallback}
-      >
+      <ErrorBoundary key={errorKey} onError={console.error} FallbackComponent={ErrorFallback}>
         {!service.loading && <C {...compiledProps} />}
       </ErrorBoundary>
     </Spin>