refactor(ErrorBoundary): optimize code

2024-11-15 23:26:38 +00:00 · 2024-11-03 17:32:05 +08:00 · 2024-11-03 17:32:05 +08:00 · a1152f1ad1
commit a1152f1ad1
parent d58668f36e
11 changed files with 24 additions and 37 deletions
--- 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
--- 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>
          );
--- 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>
      );
--- 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>
 );
--- 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>
 );
--- 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) => {
--- 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>
--- 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>
  );
--- 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 }} />
--- 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>
                {/* ) : ( */}
--- 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>