Merge pull request #241 from HuolalaTech/feat/support-serialized-in-console

feat: support serialized data in console panel

Author: wqcstrong

package.json

@@ -48,7 +48,7 @@
     "@huolala-tech/page-spy-plugin-data-harbor": "^1.3.0",
     "@huolala-tech/page-spy-plugin-rrweb": "^1.2.0",
     "@huolala-tech/page-spy-types": "^1.9.0",
-    "@huolala-tech/react-json-view": "^1.2.4",
+    "@huolala-tech/react-json-view": "^1.2.5",
     "@huolala-tech/request": "^1.1.2",
     "acorn": "^8.11.3",
     "ahooks": "^3.1.9",

src/assets/locales/en.json

@@ -146,7 +146,8 @@
       "failed-advice": "Here are some suggestions to fix and improve the situation:",
       "fix-suggestion-1": "<0>1. Ensure file existence: When locating the source code for each error stack, two files need to be requested - the compressed file and the sourcemap file. The rule for obtaining the sourcemap file is based on the address indicated by</0> <1>//# sourceMappingURL=*</1> <2>in the contents of the compressed file;</2>",
       "fix-suggestion-2": "2. Troubleshoot network issues: If there are access restrictions on the server where your source files are located, it may lead to failed requests when trying to access the resources. You can open the devtool to check if the network is working properly."
-    }
+    },
+    "non-serializable": "<non-serializable>"
   },
   "network": {
     "open-in-new-tab": "Open in new tab",

src/assets/locales/ja.json

@@ -145,7 +145,8 @@
       "failed-advice": "以下は修正と改善の提案です：",
       "fix-suggestion-1": "<0>1. ファイルの存在を確認：各エラースタックでソースコードを特定するためには、2つのファイル（圧縮ファイルとソースマップファイル）が要求されます。ソースマップファイルの取得規則は圧縮ファイル内の</0><1>//# sourceMappingURL=*</1><2>に指定されたアドレスに従います；</2>",
       "fix-suggestion-2": "2. ネットワークの問題を除外：ソースファイルが存在するサーバーにアクセス制限がある場合、リソースの取得に失敗する可能性があるため、ネットワークリクエストが正常かどうかをコンソールで確認できます。"
-    }
+    },
+    "non-serializable": "<non-serializable>"
   },
   "network": {
     "open-in-new-tab": "新しいタブで開く",

src/assets/locales/ko.json

@@ -145,7 +145,8 @@
       "failed-advice": "다음은 수정 및 개선 제안입니다:",
       "fix-suggestion-1": "<0>1. 파일이 존재하는지 확인하십시오. 각 오류 스택은 소스 코드를 확인하기 위해 2 개의 파일 (압축 파일 및 소스 맵 파일)을 요청합니다. 소스 맵 파일 가져오기 규칙은 압축 파일 내</0><1>//# sourceMappingURL=*</1><2>에 지정된 주소를 기준으로합니다.</2>",
       "fix-suggestion-2": "2. 네트워크 문제 제외: 원본 파일이있는 서버에 액세스 제한이있는 경우 리소스 가져오기 실패가 발생할 수 있으므로 네트워크 요청이 정상적인지 확인하려면 콘솔을 열 수 있습니다."
-    }
+    },
+    "non-serializable": "<non-serializable>"
   },
   "network": {
     "open-in-new-tab": "새 탭에서 열기",

src/assets/locales/zh.json

@@ -145,7 +145,8 @@
       "failed-advice": "以下是修复和改进的建议：",
       "fix-suggestion-1": "<0>1. 确保文件存在：每个错误栈定位源码时都需要请求两个文件，分别是压缩文件和 sourcemap 文件，sourcemap 文件的获取规则是根据压缩文件内容中的</0><1>//# sourceMappingURL=*</1><2>所指向的地址；</2>",
       "fix-suggestion-2": "2. 排除网络故障：如果你的源文件所在服务器有限制访问规则，则可能导致请求资源时出现失败，你可以打开控制台查看网络请求是否正常。"
-    }
+    },
+    "non-serializable": "<数据序列化失败>"
   },
   "network": {
     "open-in-new-tab": "新窗口打开",

src/components/ConsoleItem/index.less

@@ -43,4 +43,17 @@
       color: #000;
     }
   }
+  .rjv {
+    font-size: 12px;
+    svg {
+      &.rjv-ref-arrow {
+        width: 8px;
+        height: 8px;
+      }
+    }
+  }
+  .non-serializable {
+    font-size: 12px;
+    color: #aaa;
+  }
 }

src/components/ConsoleItem/index.tsx

@@ -15,12 +15,15 @@ import { getLogUrl } from '@/utils';
 import './index.less';
 import Timestamp from '../Timestamp';
 import { useMemo } from 'react';
+import ReactJsonView from '@huolala-tech/react-json-view';
+import { useTranslation } from 'react-i18next';
 
 interface Props {
   data: SpyConsole.DataItem;
 }
 
 export const ConsoleItem = ({ data }: Props) => {
+  const { t } = useTranslation();
   const content = useMemo(() => {
     if (isPlaceholderNode(data)) {
       return <PlaceholderNode data={data.logs} />;
@@ -34,9 +37,19 @@ export const ConsoleItem = ({ data }: Props) => {
       if (framesOfErrorConsole) {
         return <ErrorTraceNode data={framesOfErrorConsole} key={log.id} />;
       }
+      if (log.type === 'json') {
+        if (log.value === null) {
+          return (
+            <code key={log.id} className="non-serializable">
+              {t('console.non-serializable')}
+            </code>
+          );
+        }
+        return <ReactJsonView source={JSON.parse(log.value)} key={log.id} />;
+      }
       return <ConsoleNode data={log} key={log.id} />;
     });
-  }, [data]);
+  }, [data, t]);
   return (
     <div className={`console-item ${data.logType}`} key={data.id}>
       <div className="console-item__title">
@@ -47,7 +60,9 @@ export const ConsoleItem = ({ data }: Props) => {
           <Col style={{ flexShrink: 0 }}>
             <Timestamp time={data.time} />
           </Col>
-          <Col flex={1}>{content}</Col>
+          <Col flex={1} style={{ display: 'flex' }}>
+            {content}
+          </Col>
         </Row>
       </div>
       <div className="console-item__url" title={data.url}>

yarn.lock

@@ -766,10 +766,10 @@
   resolved "https://registry.npmjs.org/@huolala-tech/page-spy-types/-/page-spy-types-1.9.0.tgz#d09cc0b4702bb38f5d4620a80fdbd27db75a9253"
   integrity sha512-1WouAJF+WAHBhG2y/xRpENF+g9Y7gfYmb1BVE/73fyyLRrHYb1mUIk7j/QTlqFi7v5/p2j7yLOmAV3xVS469+w==
 
-"@huolala-tech/react-json-view@^1.2.4":
-  version "1.2.4"
-  resolved "https://registry.npmjs.org/@huolala-tech/react-json-view/-/react-json-view-1.2.4.tgz#7e8bec7fa16a42d90ffc406f327848b116d4efe0"
-  integrity sha512-90Oc40JUm4TZnjNzcu3BECk9Rs1nkciGiOsdjuCJFsXntKeLTpp7S0xNxISvr3+R/PsGdlb1c9HWvBp7EYUSpw==
+"@huolala-tech/react-json-view@^1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@huolala-tech/react-json-view/-/react-json-view-1.2.5.tgz#fa593f8bff9ac30a4c21f7f9cd5987d7f9ed3199"
+  integrity sha512-54KSj2BHLPzWpRhPaLO9k6COgrcLkU8XN8HYaP0KHWBnrdjdwCv8Ola4R8il+iC1UxDcR0KLLzSA+ze51XgLFg==
   dependencies:
     copy-to-clipboard "^3.3.3"