feat: enhance error handling with optional title in AppError component (#6409)

packages/core/client/src/application/components/defaultComponents.tsx

@@ -11,10 +11,11 @@ import React, { FC } from 'react';
 import { MainComponent } from './MainComponent';
 
 const Loading: FC = () => <div>Loading...</div>;
-const AppError: FC<{ error: Error }> = ({ error }) => {
+const AppError: FC<{ error: Error & { title?: string } }> = ({ error }) => {
+  const title = error?.title || 'App Error';
   return (
     <div>
-      <div>App Error</div>
+      <div>{title}</div>
       {error?.message}
       {process.env.__TEST__ && error?.stack}
     </div>

packages/core/client/src/nocobase-buildin-plugin/index.tsx

@@ -74,7 +74,7 @@ const useErrorProps = (app: Application, error: any) => {
   }
 };
 
-const AppError: FC<{ error: Error; app: Application }> = observer(
+const AppError: FC<{ error: Error & { title?: string }; app: Application }> = observer(
   ({ app, error }) => {
     const props = getProps(app);
     return (
@@ -87,7 +87,7 @@ const AppError: FC<{ error: Error; app: Application }> = observer(
             transform: translate(0, -50%);
           `}
           status="error"
-          title={app.i18n.t('App error')}
+          title={error?.title || app.i18n.t('App error', { ns: 'client' })}
           subTitle={app.i18n.t(error?.message)}
           {...props}
           extra={[

packages/plugins/@nocobase/plugin-error-handler/src/server/error-handler.ts

@@ -26,13 +26,16 @@ export class ErrorHandler {
       message += `: ${err.cause.message}`;
     }
 
+    const errorData: { message: string; code: string; title?: string } = {
+      message,
+      code: err.code,
+    };
+
+    if (err?.title) {
+      errorData.title = err.title;
+    }
     ctx.body = {
-      errors: [
+      errors: [errorData],
-        {
-          message,
-          code: err.code,
-        },
-      ],
     };
   }