♻️ refactor: refactor analytics env (#2570)

* ♻️ refactor: refactor analytics env

* ✅ test: add test for analytics

docs/self-hosting/environment-variables/analytics.mdx

@@ -1,7 +1,5 @@
 ---
-title: >-
-  Integrating Data Analytics Services in LobeChat: Environment Variables and
-  Configuration
+title: Integrating Analytics in LobeChat
 description: >-
   Learn how to configure environment variables for Vercel Analytics, Google
   Analytics, PostHog Analytics, and Umami Analytics in LobeChat for data
@@ -36,44 +34,30 @@ We have integrated several free/open-source data analytics services in LobeChat
 
 ## Google Analytics
 
-### `ENABLE_GOOGLE_ANALYTICS`
-
-- Type: Optional
-- Description: Used to configure the environment variable for Google Analytics. Set to `1` to enable Google Analytics.
-- Default: `-`
-- Example: `1`
-
 ### `GOOGLE_ANALYTICS_MEASUREMENT_ID`
 
 - Type: Required
-- Description: Google Analytics Measurement ID，you can get it from the Google Analytics dashboard.
+- Description: Google Analytics Measurement ID，you can get it from the Google Analytics dashboard. Add it will auto enable Google Analytics.
 - Default: `-`
 - Example: `G-63LP2TV03T`
 
 ## Posthog Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_POSTHOG`
+### `POSTHOG_KEY`
 
-- Type: Optional
-- Description: Used to enable the environment variable for [PostHog Analytics][posthog-analytics-url]. Set to `1` to enable PostHog Analytics.
-- Default: `-`
-- Example: `1`
-
-### `NEXT_PUBLIC_POSTHOG_KEY`
-
-- Type: Optional
-- Description: Set the PostHog project Key.
+- Type: Required
+- Description: Set the PostHog project Key. Add it will auto enable PostHog Analytics.
 - Default: `-`
 - Example: `phc_xxxxxxxx`
 
-### `NEXT_PUBLIC_POSTHOG_HOST`
+### `POSTHOG_HOST`
 
 - Type: Optional
 - Description: Set the deployment address of the PostHog service, defaulting to the official SAAS address.
 - Default: `https://app.posthog.com`
 - Example: `https://example.com`
 
-### `NEXT_PUBLIC_POSTHOG_DEBUG`
+### `DEBUG_POSTHOG_ANALYTICS`
 
 - Type: Optional
 - Description: Enable the debug mode for PostHog.
@@ -82,26 +66,19 @@ We have integrated several free/open-source data analytics services in LobeChat
 
 ## Umami Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_UMAMI`
+### `UMAMI_WEBSITE_ID`
 
-- Type: Optional
-- Description: Used to enable the environment variable for [Umami Analytics][umami-analytics-url]. Set to `1` to enable Umami Analytics.
+- Type: Required
+- Description: Your Umami Website ID. Add it will auto enable Umami Analytics.
 - Default: `-`
-- Example: `1`
+- Example: `E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
 
-### `NEXT_PUBLIC_UMAMI_SCRIPT_URL`
+### `UMAMI_SCRIPT_URL`
 
 - Type: Optional
 - Description: The URL of the Umami script, defaulting to the script URL provided by Umami Cloud.
 - Default: `https://analytics.umami.is/script.js`
 - Example: `https://umami.your-site.com/script.js`
 
-### `NEXT_PUBLIC_UMAMI_WEBSITE_ID`
-
-- Type: Required
-- Description: Your Umami Website ID.
-- Default: `-`
-- Example: `E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
-
 [posthog-analytics-url]: https://posthog.com
 [umami-analytics-url]: https://umami.is

docs/self-hosting/environment-variables/analytics.zh-CN.mdx

@@ -32,44 +32,30 @@ tags:
 
 ## Google Analytics
 
-### `ENABLE_GOOGLE_ANALYTICS`
-
-- 类型：必选
-- 描述：用于配置 Google Analytics 的环境变量，当设为 `1` 时开启 Google Analytics
-- 默认值： `-`
-- 示例：`1`
-
 ### `GOOGLE_ANALYTICS_MEASUREMENT_ID`
 
 - 类型：必选
-- 描述：Google Analytics 的 Measurement ID，如果开启了 Google Analytics，此项必填
+- 描述：Google Analytics 的 Measurement ID，填写此项后将自动开启 Google Analytics
 - 默认值： `-`
 - 示例：`G-63LP2TV03T`
 
 ## Posthog Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_POSTHOG`
-
-- 类型：可选
-- 描述：用于开启 [PostHog Analytics][posthog-analytics-url] 的环境变量，设为 `1` 时开启 PostHog Analytics
-- 默认值： `-`
-- 示例：`1`
+### `POSTHOG_KEY`
 
-### `NEXT_PUBLIC_POSTHOG_KEY`
-
-- 类型：可选
-- 描述：设置 PostHog 项目 Key
+- 类型：必选
+- 描述：设置 PostHog 项目 Key，设置此项后将自动开启 PostHog Analytics
 - 默认值： `-`
 - 示例：`phc_xxxxxxxx`
 
-### `NEXT_PUBLIC_POSTHOG_HOST`
+### `POSTHOG_HOST`
 
 - 类型：可选
-- 描述：设置 PostHog 服务的部署地址，默认为官方的 SAAS 地址
+- 描述：设置 PostHog 服务的部署地址，默认为官方的 SaaS 地址
 - 默认值：`https://app.posthog.com`
 - 示例：`https://example.com`
 
-### `NEXT_PUBLIC_POSTHOG_DEBUG`
+### `POSTHOG_DEBUG`
 
 - 类型：可选
 - 描述：开启 PostHog 的调试模式
@@ -78,26 +64,19 @@ tags:
 
 ## Umami Analytics
 
-### `NEXT_PUBLIC_ANALYTICS_UMAMI`
+### `UMAMI_WEBSITE_ID`
 
-- 类型：可选
-- 描述：用于开启 [Umami Analytics][umami-analytics-url] 的环境变量，设为 `1` 时开启 Umami Analytics
-- 默认值： `-`
-- 示例：`1`
+- 类型：必选
+- 描述：你的 Umami 的 Website ID，填写此项后将自动开启 Umami Analytics
+- 默认值：`-`
+- 示例：`E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
 
-### `NEXT_PUBLIC_UMAMI_SCRIPT_URL`
+### `UMAMI_SCRIPT_URL`
 
 - 类型：可选
 - 描述：Umami 脚本的网址，默认为 Umami Cloud 提供的脚本网址
 - 默认值：`https://analytics.umami.is/script.js`
 - 示例：`https://umami.your-site.com/script.js`
 
-### `NEXT_PUBLIC_UMAMI_WEBSITE_ID`
-
-- 类型：必选
-- 描述：你的 Umami 的 Website ID
-- 默认值：`-`
-- 示例：`E738D82A-EE9E-4806-A81F-0CA3CAE57F65`
-
 [posthog-analytics-url]: https://posthog.com
 [umami-analytics-url]: https://umami.is

package.json

@@ -96,7 +96,7 @@
     "@icons-pack/react-simple-icons": "^9.5.0",
     "@lobehub/chat-plugin-sdk": "latest",
     "@lobehub/chat-plugins-gateway": "latest",
-    "@lobehub/icons": "latest",
+    "@lobehub/icons": "^1.21.0",
     "@lobehub/tts": "latest",
     "@lobehub/ui": "^1.138.24",
     "@microsoft/fetch-event-source": "^2.0.1",

src/app/layout.tsx

@@ -10,6 +10,8 @@ import AuthProvider from '@/layout/AuthProvider';
 import GlobalProvider from '@/layout/GlobalProvider';
 import { isMobileDevice } from '@/utils/responsive';
 
+const inVercel = process.env.VERCEL === '1';
+
 type RootLayoutProps = {
   children: ReactNode;
   modal: ReactNode;
@@ -31,7 +33,7 @@ const RootLayout = async ({ children, modal }: RootLayoutProps) => {
           </AuthProvider>
         </GlobalProvider>
         <Analytics />
-        <SpeedInsights />
+        {inVercel && <SpeedInsights />}
       </body>
     </html>
   );

src/components/Analytics/Clarity.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import Script from 'next/script';
+import { memo } from 'react';
+
+interface ClarityProps {
+  projectId?: string;
+}
+
+const Clarity = memo<ClarityProps>(
+  ({ projectId }) =>
+    projectId && (
+      <Script
+        dangerouslySetInnerHTML={{
+          __html: `
+              (function(c,l,a,r,i,t,y){
+                  c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+                  t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+                  y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+              })(window, document, "clarity", "script", "${projectId}");
+            `,
+        }}
+        id="clarity-script"
+      />
+    ),
+);
+
+export default Clarity;

src/components/Analytics/Google.tsx

@@ -1,14 +1,7 @@
 import { GoogleAnalytics as GA } from '@next/third-parties/google';
 
-import { getServerConfig } from '@/config/server';
+import { analyticsEnv } from '@/config/analytics';
 
-const { GOOGLE_ANALYTICS_MEASUREMENT_ID, ENABLE_GOOGLE_ANALYTICS } = getServerConfig();
-
-if (ENABLE_GOOGLE_ANALYTICS && !GOOGLE_ANALYTICS_MEASUREMENT_ID)
-  throw new Error(
-    'You have enable the google analytics but not provided the google analytics id. Please provide the google analytics id in your env',
-  );
-
-const GoogleAnalytics = () => <GA gaId={GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
+const GoogleAnalytics = () => <GA gaId={analyticsEnv.GOOGLE_ANALYTICS_MEASUREMENT_ID!} />;
 
 export default GoogleAnalytics;

src/components/Analytics/Plausible.tsx

@@ -3,19 +3,14 @@
 import Script from 'next/script';
 import { memo } from 'react';
 
-import { getClientConfig } from '@/config/client';
+interface PlausibleAnalyticsProps {
+  domain?: string;
+  scriptBaseUrl: string;
+}
 
-const { PLAUSIBLE_DOMAIN, PLAUSIBLE_SCRIPT_BASE_URL } = getClientConfig();
-
-const PlausibleAnalytics = memo(
-  () =>
-    PLAUSIBLE_DOMAIN && (
-      <Script
-        data-domain={PLAUSIBLE_DOMAIN}
-        defer
-        src={`${PLAUSIBLE_SCRIPT_BASE_URL}/js/script.js`}
-      />
-    ),
+const PlausibleAnalytics = memo<PlausibleAnalyticsProps>(
+  ({ domain, scriptBaseUrl }) =>
+    domain && <Script data-domain={domain} defer src={`${scriptBaseUrl}/js/script.js`} />,
 );
 
 export default PlausibleAnalytics;

src/components/Analytics/Posthog.tsx

@@ -1,20 +1,19 @@
 'use client';
 
 import posthog from 'posthog-js';
-import { FC, memo, useEffect } from 'react';
+import { memo, useEffect } from 'react';
 
-import { getClientConfig } from '@/config/client';
+interface PostHogProps {
+  debug: boolean;
+  host: string;
+  token?: string;
+}
 
-const { POSTHOG_HOST, POSTHOG_KEY, POSTHOG_DEBUG } = getClientConfig();
-
-const PostHog: FC = memo(() => {
+const PostHog = memo<PostHogProps>(({ token, host, debug }) => {
   useEffect(() => {
-    if (!POSTHOG_KEY) return;
+    if (!token) return;
 
-    posthog.init(POSTHOG_KEY, {
-      api_host: POSTHOG_HOST ?? 'https://app.posthog.com',
-      debug: POSTHOG_DEBUG,
-    });
+    posthog.init(token, { api_host: host, debug });
   }, []);
 
   return null;

src/components/Analytics/Umami.tsx

@@ -3,13 +3,14 @@
 import Script from 'next/script';
 import { memo } from 'react';
 
-import { getClientConfig } from '@/config/client';
+interface UmamiAnalyticsProps {
+  scriptUrl: string;
+  websiteId?: string;
+}
 
-const { UMAMI_SCRIPT_URL, UMAMI_WEBSITE_ID } = getClientConfig();
-
-const UmamiAnalytics = memo(
-  () =>
-    UMAMI_WEBSITE_ID && <Script data-website-id={UMAMI_WEBSITE_ID} defer src={UMAMI_SCRIPT_URL} />,
+const UmamiAnalytics = memo<UmamiAnalyticsProps>(
+  ({ scriptUrl, websiteId }) =>
+    websiteId && <Script data-website-id={websiteId} defer src={scriptUrl} />,
 );
 
 export default UmamiAnalytics;

src/components/Analytics/Vercel.tsx

@@ -1,10 +1,8 @@
 import { Analytics } from '@vercel/analytics/react';
 import { memo } from 'react';
 
-import { getServerConfig } from '@/config/server';
+import { analyticsEnv } from '@/config/analytics';
 
-const { VERCEL_DEBUG } = getServerConfig();
-
-const VercelAnalytics = memo(() => <Analytics debug={VERCEL_DEBUG} />);
+const VercelAnalytics = memo(() => <Analytics debug={analyticsEnv.DEBUG_VERCEL_ANALYTICS} />);
 
 export default VercelAnalytics;

src/components/Analytics/index.tsx

@@ -1,27 +1,42 @@
 import dynamic from 'next/dynamic';
 
-import { getClientConfig } from '@/config/client';
-import { getServerConfig } from '@/config/server';
+import { analyticsEnv } from '@/config/analytics';
 
 import Google from './Google';
 import Vercel from './Vercel';
 
-const Plausible = dynamic(() => import('./Plausible'), { ssr: false });
-const Posthog = dynamic(() => import('./Posthog'), { ssr: false });
-const Umami = dynamic(() => import('./Umami'), { ssr: false });
-
-const { ANALYTICS_POSTHOG, ANALYTICS_PLAUSIBLE, ANALYTICS_UMAMI } = getClientConfig();
-
-const { ENABLE_VERCEL_ANALYTICS, ENABLE_GOOGLE_ANALYTICS } = getServerConfig();
+const Plausible = dynamic(() => import('./Plausible'));
+const Posthog = dynamic(() => import('./Posthog'));
+const Umami = dynamic(() => import('./Umami'));
+const Clarity = dynamic(() => import('./Clarity'));
 
 const Analytics = () => {
   return (
     <>
-      {ENABLE_VERCEL_ANALYTICS && <Vercel />}
-      {ENABLE_GOOGLE_ANALYTICS && <Google />}
-      {ANALYTICS_PLAUSIBLE && <Plausible />}
-      {ANALYTICS_POSTHOG && <Posthog />}
-      {ANALYTICS_UMAMI && <Umami />}
+      {analyticsEnv.ENABLE_VERCEL_ANALYTICS && <Vercel />}
+      {analyticsEnv.ENABLE_GOOGLE_ANALYTICS && <Google />}
+      {analyticsEnv.ENABLED_PLAUSIBLE_ANALYTICS && (
+        <Plausible
+          domain={analyticsEnv.PLAUSIBLE_DOMAIN}
+          scriptBaseUrl={analyticsEnv.PLAUSIBLE_SCRIPT_BASE_URL}
+        />
+      )}
+      {analyticsEnv.ENABLED_POSTHOG_ANALYTICS && (
+        <Posthog
+          debug={analyticsEnv.DEBUG_POSTHOG_ANALYTICS}
+          host={analyticsEnv.POSTHOG_HOST!}
+          token={analyticsEnv.POSTHOG_KEY}
+        />
+      )}
+      {analyticsEnv.ENABLED_UMAMI_ANALYTICS && (
+        <Umami
+          scriptUrl={analyticsEnv.UMAMI_SCRIPT_URL}
+          websiteId={analyticsEnv.UMAMI_WEBSITE_ID}
+        />
+      )}
+      {analyticsEnv.ENABLED_CLARITY_ANALYTICS && (
+        <Clarity projectId={analyticsEnv.CLARITY_PROJECT_ID} />
+      )}
     </>
   );
 };