feat(logger): support for collecting debug informations when renderin…

…g failed (#4524)

* feat(logger): support for collecting debug informations when rendering failed

* chore: update

* feat: add location information

* fix: test

* fix: test

* fix: tests

* fix: bug

.env.example

@@ -20,13 +20,13 @@ API_BASE_URL=
 # console | file | dailyRotateFile
 LOGGER_TRANSPORT=
 LOGGER_BASE_PATH=storage/logs
-# error | warn | info | debug
+# error | warn | info | debug | trace
 LOGGER_LEVEL=
 # If LOGGER_TRANSPORT is dailyRotateFile and using days, add 'd' as the suffix.
 LOGGER_MAX_FILES=
 # add 'k', 'm', 'g' as the suffix.
 LOGGER_MAX_SIZE=
-# json | splitter, split by '|' character
+# console | json | logfmt | delimiter
 LOGGER_FORMAT=
 
 ################# DATABASE #################

packages/core/client/src/locale/en_US.json

@@ -764,6 +764,7 @@
   "App error": "App error",
   "Feedback": "Feedback",
   "Try again": "Try again",
+  "Download logs": "Download logs",
   "Data template": "Data template",
   "Duplicate": "Duplicate",
   "Duplicating": "Duplicating",

packages/core/client/src/locale/zh-CN.json

@@ -795,6 +795,7 @@
   "Render Failed": "渲染失败",
   "Feedback": "反馈问题",
   "Try again": "重试一下",
+  "Download logs": "下载日志",
   "Download": "下载",
   "Click or drag file to this area to upload": "点击或拖拽文件到此区域上传",
   "Support for a single or bulk upload.": "支持单个或批量上传",

packages/core/client/src/schema-component/antd/error-fallback/ErrorFallback.tsx

@@ -9,17 +9,57 @@
 
 import { Button, Result, Typography } from 'antd';
 import React, { FC } from 'react';
-import { FallbackProps, useErrorBoundary } from 'react-error-boundary';
+import { FallbackProps } from 'react-error-boundary';
 import { Trans, useTranslation } from 'react-i18next';
 import { ErrorFallbackModal } from './ErrorFallbackModal';
+import { useAPIClient } from '../../../api-client';
+import { useFieldSchema } from '@formily/react';
+import { useLocation } from 'react-router-dom';
 
 const { Paragraph, Text, Link } = Typography;
 
+export const useDownloadLogs = (error: any, data: Record<string, any> = {}) => {
+  const location = useLocation();
+  const [loading, setLoading] = React.useState(false);
+  const api = useAPIClient();
+  return {
+    loading,
+    download: async () => {
+      setLoading(true);
+      try {
+        const res = await api.request({
+          url: 'logger:collect',
+          method: 'post',
+          responseType: 'blob',
+          data: {
+            error: {
+              message: error.message,
+              stack: error.stack,
+            },
+            location,
+            ...data,
+          },
+        });
+        const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/gzip' }));
+        const link = document.createElement('a');
+        link.setAttribute('href', url);
+        link.setAttribute('download', 'logs.tar.gz');
+        link.click();
+        link.remove();
+      } catch (err) {
+        console.log(err);
+      }
+      setLoading(false);
+    },
+  };
+};
+
 export const ErrorFallback: FC<FallbackProps> & {
   Modal: FC<FallbackProps>;
 } = ({ error }) => {
-  const { resetBoundary } = useErrorBoundary();
+  const schema = useFieldSchema();
   const { t } = useTranslation();
+  const { loading, download } = useDownloadLogs(error, { schema });
 
   const subTitle = (
     <Trans>
@@ -41,8 +81,8 @@ export const ErrorFallback: FC<FallbackProps> & {
           <Button type="primary" key="feedback" href="https://github.com/nocobase/nocobase/issues" target="_blank">
             {t('Feedback')}
           </Button>,
-          <Button key="try" onClick={resetBoundary}>
-            {t('Try again')}
+          <Button key="log" loading={loading} onClick={download}>
+            {t('Download logs')}
           </Button>,
         ]}
       >

packages/core/client/src/schema-component/antd/error-fallback/__tests__/error-fallback.test.tsx

@@ -7,27 +7,27 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 
-import { render, screen, userEvent, waitFor } from '@nocobase/test/client';
+import { renderApp, screen, userEvent, waitFor } from '@nocobase/test/client';
 import React from 'react';
-import App1 from './components/basic';
-import InlineApp from './components/modal';
+import App1 from '../demos/basic';
+import ModalApp from '../demos/modal';
 
 describe('ErrorFallback', () => {
-  it('should render correctly', () => {
-    render(<App1 />);
+  it('should render correctly', async () => {
+    await renderApp(<App1 />);
 
     expect(screen.getByText(/render failed/i)).toBeInTheDocument();
     expect(screen.getByText(/this is likely a nocobase internals bug\. please open an issue at/i)).toBeInTheDocument();
     expect(screen.getByRole('link', { name: /feedback/i })).toBeInTheDocument();
-    expect(screen.getByText(/try again/i)).toBeInTheDocument();
+    expect(screen.getByText(/download logs/i)).toBeInTheDocument();
     expect(screen.getByText(/error: error message/i)).toBeInTheDocument();
 
     // 底部复制按钮
     expect(document.querySelector('.ant-typography-copy')).toBeInTheDocument();
   });
 
   it('should render inline correctly', async () => {
-    render(<InlineApp />);
+    await renderApp(<ModalApp />);
 
     expect(screen.getByText(/Error: error message/i)).toBeInTheDocument();
     expect(document.querySelector('.ant-typography-copy')).toBeInTheDocument();

packages/core/client/src/schema-component/antd/error-fallback/demos/basic.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '../ErrorFallback';
+import { Plugin } from '@nocobase/client';
+import { mockApp } from '@nocobase/client/demo-utils';
+
+const App = () => {
+  throw new Error('error message');
+};
+
+const Demo = () => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback} onError={console.error}>
+      <App />
+    </ErrorBoundary>
+  );
+};
+
+class DemoPlugin extends Plugin {
+  async load() {
+    this.app.router.add('root', { path: '/', Component: Demo });
+  }
+}
+
+const app = mockApp({ plugins: [DemoPlugin] });
+
+export default app.getRootComponent();

packages/core/client/src/schema-component/antd/error-fallback/demos/modal.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { ErrorFallback } from '../ErrorFallback';
+import { mockApp } from '@nocobase/client/demo-utils';
+import { Plugin } from '@nocobase/client';
+
+const App = () => {
+  throw new Error('error message');
+};
+
+const Demo = () => {
+  return (
+    <ErrorBoundary FallbackComponent={ErrorFallback.Modal} onError={console.error}>
+      <App />
+    </ErrorBoundary>
+  );
+};
+
+class DemoPlugin extends Plugin {
+  async load() {
+    this.app.router.add('root', { path: '/', Component: Demo });
+  }
+}
+
+const app = mockApp({ plugins: [DemoPlugin] });
+
+export default app.getRootComponent();

packages/core/client/src/schema-component/antd/error-fallback/index.en-US.md

@@ -6,8 +6,8 @@ Based on the [react-error-boundary](https://github.com/bvaughn/react-error-bound
 
 ## Basic
 
-<code src="./demos/new-demos/basic.tsx"></code>
+<code src="./demos/basic.tsx"></code>
 
 ## Modal
 
-<code src="./demos/new-demos/modal.tsx"></code>
+<code src="./demos/modal.tsx"></code>

packages/core/client/src/schema-component/antd/error-fallback/index.md

@@ -8,8 +8,8 @@
 
 ## Basic
 
-<code src="./demos/new-demos/basic.tsx"></code>
+<code src="./demos/basic.tsx"></code>
 
 ## Modal
 
-<code src="./demos/new-demos/modal.tsx"></code>
+<code src="./demos/modal.tsx"></code>

packages/core/database/src/database.ts

@@ -238,9 +238,15 @@ export class Database extends EventEmitter implements AsyncEmitter {
     }
 
     this.options = opts;
-    this.logger.debug(`create database instance: ${safeJsonStringify(this.options)}`, {
-      databaseInstanceId: this.instanceId,
-    });
+    this.logger.debug(
+      `create database instance: ${safeJsonStringify(
+        // remove sensitive information
+        lodash.omit(this.options, ['storage', 'host', 'password']),
+      )}`,
+      {
+        databaseInstanceId: this.instanceId,
+      },
+    );
 
     const sequelizeOptions = this.sequelizeOptions(this.options);
     this.sequelize = new Sequelize(sequelizeOptions);