feat: add tianji script environment

Author: moonrailgun

client/shared/hooks/useDataReady.ts

@@ -0,0 +1,27 @@
+import { DependencyList, useLayoutEffect, useRef } from 'react';
+import { useEvent } from './useEvent';
+
+/**
+ * Call once on data ready(validator return true)
+ */
+export function useDataReady(
+  validator: () => boolean,
+  cb: () => void,
+  deps?: DependencyList
+) {
+  const isReadyRef = useRef(false);
+
+  const _validator = useEvent(validator);
+  const _callback = useEvent(cb);
+
+  useLayoutEffect(() => {
+    if (isReadyRef.current) {
+      return;
+    }
+
+    if (_validator() === true) {
+      _callback();
+      isReadyRef.current = true;
+    }
+  }, deps);
+}

client/shared/index.tsx

@@ -74,6 +74,7 @@ export { useAsync } from './hooks/useAsync';
 export { useAsyncFn } from './hooks/useAsyncFn';
 export { useAsyncRefresh } from './hooks/useAsyncRefresh';
 export { useAsyncRequest } from './hooks/useAsyncRequest';
+export { useDataReady } from './hooks/useDataReady';
 export { useDebounce } from './hooks/useDebounce';
 export { useEditValue } from './hooks/useEditValue';
 export { useEvent } from './hooks/useEvent';

client/shared/model/config.ts

@@ -6,6 +6,14 @@ import { defaultGlobalConfig } from '../utils/consts';
  * 后端的全局设置
  */
 export interface GlobalConfig {
+  /**
+   * Tianji 配置
+   */
+  tianji: {
+    scriptUrl?: string;
+    websiteId?: string;
+  };
+
   /**
    * 上传文件体积
    * 默认1m

client/shared/utils/consts.ts

@@ -19,6 +19,7 @@ export const LANGUAGE_KEY = 'i18n:language';
 export const SYSTEM_USERID = '000000000000000000000000';
 
 export const defaultGlobalConfig: GlobalConfig = {
+  tianji: {},
   uploadFileLimit: 1 * 1024 * 1024,
   emailVerification: false,
   serverName: 'Tailchat',

client/web/src/App.tsx

@@ -32,6 +32,7 @@ import { HTML5Backend } from 'react-dnd-html5-backend';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import enUS from 'antd/es/locale/en_US';
 import type { Locale } from 'antd/es/locale-provider';
+import { useInjectTianjiScript } from './hooks/useInjectTianjiScript';
 
 const AppRouter: any = isElectron() ? HashRouter : BrowserRouter;
 
@@ -146,6 +147,8 @@ AppHeader.displayName = 'AppHeader';
 export const App: React.FC = React.memo(() => {
   useRecordMeasure('appRenderStart');
 
+  useInjectTianjiScript();
+
   useEffect(() => {
     sharedEvent.emit('appLoaded');
   }, []);

client/web/src/hooks/useInjectTianjiScript.ts

@@ -0,0 +1,28 @@
+import { useDataReady, useGlobalConfigStore } from 'tailchat-shared';
+
+export function useInjectTianjiScript() {
+  const { tianji } = useGlobalConfigStore();
+
+  useDataReady(
+    () =>
+      typeof tianji.scriptUrl === 'string' &&
+      typeof tianji.websiteId === 'string' &&
+      tianji.websiteId.length > 0,
+    () => {
+      if (!tianji.scriptUrl) {
+        console.error(
+          'Cannot inject Tianji script because of scriptUrl not cool:',
+          tianji.scriptUrl
+        );
+        return;
+      }
+
+      const el = document.createElement('script');
+      el.src = tianji.scriptUrl;
+      el.setAttribute('data-website-id', String(tianji.websiteId));
+      el.setAttribute('async', 'async');
+      el.setAttribute('defer', 'defer');
+      document.head.append(el);
+    }
+  );
+}

server/.env.example

@@ -33,3 +33,7 @@ ADMIN_PASS=com.msgbyte.tailchat
 GETUI_APPID=
 GETUI_APPKEY=
 GETUI_MASTERSECRET=
+
+# Tianji
+TIANJI_SCRIPT_URL=
+TIANJI_WEBSITE_ID=

server/packages/sdk/src/services/lib/settings.ts

@@ -55,6 +55,13 @@ export const config = {
   runner: {
     requestTimeout,
   },
+  /**
+   * 使用Tianji对网站进行监控
+   */
+  tianji: {
+    scriptUrl: process.env.TIANJI_SCRIPT_URL,
+    websiteId: process.env.TIANJI_WEBSITE_ID,
+  },
   feature: {
     disableFileCheck: checkEnvTrusty(process.env.DISABLE_FILE_CHECK),
     disableLogger: checkEnvTrusty(process.env.DISABLE_LOGGER), // 是否关闭日志

server/services/core/config.service.ts

@@ -77,6 +77,7 @@ class ConfigService extends TcService {
     const persistConfig = await this.adapter.model.getAllClientPersistConfig();
 
     return {
+      tianji: config.tianji,
       uploadFileLimit: config.storage.limit,
       emailVerification: config.emailVerification,
       disableUserRegister: config.feature.disableUserRegister,

website/docs/deployment/environment.md

@@ -25,6 +25,8 @@ title: Environment Variable
 | FILE_LIMIT | 1048576 | File/image upload size limit, the default is 1m, please enter a number(unit: byte) |
 | EMAIL_VERIFY | - | Whether to enable email verification, if it is "1" or "true", add email verification control when registering |
 | REQUEST_TIMEOUT | 10000 | Number of milliseconds to wait before reject a request with a RequestTimeout error. Disabled: 0 |
+| TIANJI_SCRIPT_URL | - | Script Url of Tianji if you wanna monitor Tailchat user usage, you can get it in code modal in Tianji website (example: `https://tianji.example.com/tracker.js`) |
+| TIANJI_WEBSITE_ID | - | Tianji website id |
 | DISABLE_LOGGER | - | Whether to disable the log output, if "1" or "true" turn off the log on the fly |
 | DISABLE_USER_REGISTER | - | Whether to disable the user register, if "1" or "true" turn off this method |
 | DISABLE_GUEST_LOGIN | - | Whether to disable the guest login, if "1" or "true" turn off this method |