添加系统错误页面

src/layouts/defaultProps.tsx

@@ -25,6 +25,12 @@ export default {
         hideInMenu: true,
         component: '@/pages/initialization/index',
       },
+      {
+        name: '错误',
+        path: '/error',
+        hideInMenu: true,
+        component: '@/pages/error/index',
+      },
       {
         path: '/crontab',
         name: '定时任务',

src/layouts/index.tsx

@@ -179,7 +179,9 @@ export default function (props: any) {
     };
   }, []);
 
-  if (['/login', '/initialization'].includes(props.location.pathname)) {
+  if (
+    ['/login', '/initialization', '/error'].includes(props.location.pathname)
+  ) {
     document.title = `${
       (config.documentTitleMap as any)[props.location.pathname]
     } - 控制面板`;
@@ -190,7 +192,7 @@ export default function (props: any) {
       history.push('/crontab');
     }
 
-    if (systemInfo) {
+    if (systemInfo || props.location.pathname === '/error') {
       return React.Children.map(props.children, (child) => {
         return React.cloneElement(child, {
           ...ctx,

src/pages/error/index.less

@@ -0,0 +1,11 @@
+.error-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+
+  .react-terminal-wrapper {
+    max-width: 90%;
+    height: calc(100vh - 80px);
+  }
+}

src/pages/error/index.tsx

@@ -0,0 +1,51 @@
+import React, { useState, useEffect } from 'react';
+import config from '@/utils/config';
+import { request } from '@/utils/http';
+import Terminal, { ColorMode, LineType } from 'react-terminal-ui';
+import { PageLoading } from '@ant-design/pro-layout';
+import { history } from 'umi';
+import './index.less';
+
+const Error = ({ user }: any) => {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState('暂无日志');
+
+  const getLog = () => {
+    setLoading(true);
+    request
+      .get(`${config.apiPrefix}public/panel/log`)
+      .then((data: any) => {
+        setData(data.data);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  useEffect(() => {
+    if (user) {
+      history.push('/');
+    }
+  }, [user]);
+
+  useEffect(() => {
+    getLog();
+  }, []);
+
+  return (
+    <div className="error-wrapper">
+      {loading ? (
+        <PageLoading />
+      ) : (
+        <Terminal
+          name="服务错误"
+          colorMode={ColorMode.Light}
+          lineData={[
+            { type: LineType.Input, value: 'pm2 logs panel' },
+            { type: LineType.Output, value: data },
+          ]}
+        />
+      )}
+    </div>
+  );
+};
+
+export default Error;

src/utils/config.ts

@@ -119,7 +119,10 @@ export default {
         tip: 'Bark的信息IP/设备码，例如：https://api.day.app/XXXXXXXX',
         required: true,
       },
-      { label: 'barkIcon', tip: 'BARK推送图标,自定义推送图标 (需iOS15或以上才能显示)' },
+      {
+        label: 'barkIcon',
+        tip: 'BARK推送图标,自定义推送图标 (需iOS15或以上才能显示)',
+      },
       { label: 'barkSound', tip: 'BARK推送铃声,铃声列表去APP查看复制填写' },
       { label: 'barkGroup', tip: 'BARK推送消息的分组, 默认为qinglong' },
     ],
@@ -208,6 +211,7 @@ export default {
     '/diff': '对比工具',
     '/log': '任务日志',
     '/setting': '系统设置',
+    '/error': '错误日志',
   },
   dependenceTypes: ['nodejs', 'python3', 'linux'],
 };

src/utils/http.ts

@@ -14,8 +14,8 @@ const errorHandler = function (error: any) {
       ? error.data.message || error.data
       : error.response.statusText;
     const responseStatus = error.response.status;
-    if (responseStatus === 502) {
-      message.error('服务异常，请手动执行ql check检查服务状态');
+    if ([502, 504].includes(responseStatus)) {
+      history.push('/error');
     } else if (responseStatus === 401) {
       if (history.location.pathname !== '/login') {
         message.error('登录已过期，请重新登录');