Trace (#403)

* feat: add trace * feat: remove sentry & useTrace * feat: update trace url --------- Co-authored-by: onePone <[email protected]>
arextest · Aug 17, 2023 · 7a42ed8 · 7a42ed8
1 parent 7a0a4c0
commit 7a42ed8
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 108 deletions.
diff --git a/packages/arex/package.json b/packages/arex/package.json
@@ -16,7 +16,6 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@arextest/monaco-react": "^4.5.1",
-    "@sentry/react": "^7.56.0",
     "ahooks": "^3.7.5",
     "allotment": "^1.18.1",
     "antd": "^5.6.4",

diff --git a/packages/arex/src/App.tsx b/packages/arex/src/App.tsx
@@ -1,15 +1,7 @@
-import {
-  ArexCoreProvider,
-  ArexMenuManager,
-  ArexPaneManager,
-  getLocalStorage,
-} from '@arextest/arex-core';
-import * as Sentry from '@sentry/react';
+import { ArexCoreProvider, ArexMenuManager, ArexPaneManager } from '@arextest/arex-core';
 import React from 'react';
 
-import { EMAIL_KEY } from '@/constant';
-
-import { useAuthentication } from './hooks';
+import { useAuthentication, useTrace } from './hooks';
 import resources from './i18n';
 import Menus from './menus';
 import Panes from './panes';
@@ -20,11 +12,8 @@ import GlobalStyle from './style/GlobalStyle';
 // register menus and panes
 ArexPaneManager.registerPanes(Panes);
 ArexMenuManager.registerMenus(Menus);
-const email = getLocalStorage<string>(EMAIL_KEY);
 const App = () => {
-  if (email) {
-    Sentry.setTag('arex-user', email);
-  }
+  useTrace('http://trace.arextest.com:8080/graphql');
   useAuthentication();
   const { theme, compact, colorPrimary, language } = useUserProfile();
 

diff --git a/packages/arex/src/constant.ts b/packages/arex/src/constant.ts
@@ -51,3 +51,6 @@ export const DEFAULT_THEME =
 export const DEFAULT_COLOR_PRIMARY = ColorPrimary.green;
 
 export const MAX_PANES_COUNT = 8;
+
+// custom event type
+export const AREX_OPEN_NEW_PANEL = 'arexOpenNewPanel';
diff --git a/packages/arex/src/hooks/index.ts b/packages/arex/src/hooks/index.ts
@@ -3,3 +3,4 @@ export { default as useCheckChrome } from './useCheckChrome';
 export { default as useColorPrimary } from './useColorPrimary';
 export { default as useInit } from './useInit';
 export { default as useNavPane } from './useNavPane';
+export { default as useTrace } from './useTrace';
diff --git a/packages/arex/src/hooks/useTrace.ts b/packages/arex/src/hooks/useTrace.ts
@@ -0,0 +1,30 @@
+import { getLocalStorage, Pane } from '@arextest/arex-core';
+import { useEffect } from 'react';
+
+import { AREX_OPEN_NEW_PANEL, EMAIL_KEY } from '@/constant';
+import { request } from '@/utils';
+
+const useTrace = (url: string) => {
+  useEffect(() => {
+    window.addEventListener(AREX_OPEN_NEW_PANEL, (e: CustomEvent<Pane>) => {
+      request.post(url, {
+        query: `mutation ReportTraceData($data: String!) {    reportTraceData(data: $data) {id}}`,
+        operationName: 'ReportTraceData',
+        variables: {
+          data: JSON.stringify([
+            {
+              key: 'url',
+              value: e.detail.type,
+            },
+            {
+              key: 'username',
+              value: getLocalStorage(EMAIL_KEY) || 'unknown',
+            },
+          ]),
+        },
+      });
+    });
+  }, []);
+};
+
+export default useTrace;
diff --git a/packages/arex/src/sentry.ts b/packages/arex/src/sentry.ts
diff --git a/packages/arex/src/store/useMenusPanes.ts b/packages/arex/src/store/useMenusPanes.ts
@@ -3,7 +3,7 @@ import { create } from 'zustand';
 import { persist, subscribeWithSelector } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 
-import { DEFAULT_ACTIVE_MENU, MAX_PANES_COUNT } from '@/constant';
+import { AREX_OPEN_NEW_PANEL, DEFAULT_ACTIVE_MENU, MAX_PANES_COUNT } from '@/constant';
 
 export type MenusPanesState = {
   collapsed: boolean;
@@ -111,6 +111,13 @@ export const useMenusPanes = create(
               if (state.panes.length > MAX_PANES_COUNT) {
                 state.panes.shift();
               }
+
+              // dispatch event to open new pane
+              const event = new CustomEvent(AREX_OPEN_NEW_PANEL, {
+                detail: newPane,
+              });
+              window.dispatchEvent(event);
+
               // insert new pane with sortIndex
               state.panes.push(newPane);
             });

diff --git a/packages/arex/src/store/useUserProfile.ts b/packages/arex/src/store/useUserProfile.ts
@@ -1,5 +1,4 @@
 import { getLocalStorage, i18n, I18nextLng, setLocalStorage, Theme } from '@arextest/arex-core';
-import * as Sentry from '@sentry/react';
 import { message } from 'antd';
 import { create } from 'zustand';
 
@@ -30,7 +29,6 @@ const useUserProfile = create<UserProfile & UserProfileAction>((set) => {
     let profile: UserProfile | undefined;
     try {
       profile = await UserService.getUserProfile(_email);
-      Sentry.setTag('arex-user', email);
     } catch (e: any) {
       // 由于后端没有过期的responseCode，所以单独在这里判断。
       if (e?.responseCode === 4) {

diff --git a/packages/arex/src/vite-env.d.ts b/packages/arex/src/vite-env.d.ts
@@ -1,6 +1,9 @@
 /// <reference types="vite/client" />
+import { Pane } from '@arextest/arex-core';
 import { MessageInstance } from 'antd/es/message/interface';
-export {};
+
+import { AREX_OPEN_NEW_PANEL } from '@/constant';
+
 declare global {
   interface Window {
     monaco: any;
@@ -9,4 +12,9 @@ declare global {
     __AREX_EXTENSION_VERSION__: string; // arex-chrome-extension 最新版本号
     __AREX_DESKTOP_AGENT__: boolean; //是否安装了arex桌面代理
   }
+
+  // custom event type
+  interface WindowEventMap {
+    [AREX_OPEN_NEW_PANEL]: CustomEvent<Pane>;
+  }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml