feat: optimize 502 error message (#6547)

* fix: app error

* fix: app warning

packages/core/client/src/api-client/APIClient.ts

@@ -139,7 +139,16 @@ export class APIClient extends APIClientSDK {
     if (typeof error?.response?.data === 'string') {
       const tempElement = document.createElement('div');
       tempElement.innerHTML = error?.response?.data;
-      return [{ message: tempElement.textContent || tempElement.innerText }];
+      let message = tempElement.textContent || tempElement.innerText;
+      if (message.includes('Error occurred while trying')) {
+        message = 'The application may be starting up. Please try again later.';
+        return [{ code: 'APP_WARNING', message }];
+      }
+      if (message.includes('502 Bad Gateway')) {
+        message = 'The application may be starting up. Please try again later.';
+        return [{ code: 'APP_WARNING', message }];
+      }
+      return [{ message }];
     }
     return (
       error?.response?.data?.errors ||

packages/core/client/src/application/Application.tsx

@@ -350,23 +350,9 @@ export class Application {
           setTimeout(() => resolve(null), 1000);
         });
       }
-      const toError = (error) => {
-        if (typeof error?.response?.data === 'string') {
-          const tempElement = document.createElement('div');
-          tempElement.innerHTML = error?.response?.data;
-          return { message: tempElement.textContent || tempElement.innerText };
-        }
-        if (error?.response?.data?.error) {
-          return error?.response?.data?.error;
-        }
-        if (error?.response?.data?.errors?.[0]) {
-          return error?.response?.data?.errors?.[0];
-        }
-        return { message: error?.message };
-      };
       this.error = {
         code: 'LOAD_ERROR',
-        ...toError(error),
+        ...this.apiClient.toErrMessages(error)?.[0],
       };
       console.error(error, this.error);
     }

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

@@ -76,7 +76,7 @@ const useErrorProps = (app: Application, error: any) => {
 
 const AppError: FC<{ error: Error; app: Application }> = observer(
   ({ app, error }) => {
-    const props = useErrorProps(app, error);
+    const props = getProps(app);
     return (
       <div>
         <Result
@@ -89,6 +89,7 @@ const AppError: FC<{ error: Error; app: Application }> = observer(
           status="error"
           title={app.i18n.t('App error')}
           subTitle={app.i18n.t(error?.message)}
+          {...props}
           extra={[
             <Button type="primary" key="try" onClick={() => window.location.reload()}>
               {app.i18n.t('Try again')}
@@ -124,6 +125,14 @@ const getProps = (app: Application) => {
     };
   }
 
+  if (app.error.code === 'APP_WARNING') {
+    return {
+      status: 'warning',
+      title: 'App warning',
+      subTitle: app.error?.message,
+    };
+  }
+
   if (app.error.code === 'APP_INITIALIZING') {
     return {
       status: 'info',