From 6bd09b797d01505cbde84fd5c149aa76872c725a Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 26 Nov 2025 13:41:09 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=20PostHog=20=E5=8A=A0=E8=BD=BD?=
 =?UTF-8?q?=E7=AD=96=E7=95=A5=E4=BC=98=E5=8C=96=E8=AE=A1=E5=88=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

     目标

     改进 PostHog 延迟加载策略，平衡首屏性能和数据完整性：
     1. 使用 requestIdleCallback 替代固定 2 秒延迟
     2. 保留关键事件（first_visit）的同步追踪，确保数据不丢失
---
 src/App.js | 40 ++++++++++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 88f8b773..69f71e41 100755
--- a/src/App.js
+++ b/src/App.js
@@ -100,10 +100,9 @@ function AppContent() {
     const pageEnterTimeRef = useRef(Date.now());
     const currentPathRef = useRef(location.pathname);
 
-    // 🎯 ⚡ PostHog 延迟加载 + Redux 初始化（首屏不加载 ~180KB）
+    // 🎯 ⚡ PostHog 空闲时加载 + Redux 初始化（首屏不加载 ~180KB）
     useEffect(() => {
-        // ⚡ 延迟 2 秒加载 PostHog 模块，确保首屏渲染不被阻塞
-        const timer = setTimeout(async () => {
+        const initPostHogRedux = async () => {
             try {
                 const modules = await loadPostHogModules();
                 if (!modules) return;
@@ -115,13 +114,21 @@ function AppContent() {
 
                 // 初始化 PostHog
                 dispatch(posthogSliceModule.initializePostHog());
-                logger.info('App', 'PostHog 模块延迟加载完成，Redux 初始化已触发');
+                logger.info('App', 'PostHog 模块空闲时加载完成，Redux 初始化已触发');
             } catch (error) {
-                logger.error('App', 'PostHog 延迟加载失败', error);
+                logger.error('App', 'PostHog 加载失败', error);
             }
-        }, 2000);
+        };
 
-        return () => clearTimeout(timer);
+        // ⚡ 使用 requestIdleCallback 在浏览器空闲时加载，最长等待 3 秒
+        if ('requestIdleCallback' in window) {
+            const idleId = requestIdleCallback(initPostHogRedux, { timeout: 3000 });
+            return () => cancelIdleCallback(idleId);
+        } else {
+            // 降级：Safari 等不支持 requestIdleCallback 的浏览器使用 setTimeout
+            const timer = setTimeout(initPostHogRedux, 1000);
+            return () => clearTimeout(timer);
+        }
     }, [dispatch]);
 
     // ⚡ 性能监控：标记 React 初始化完成
@@ -150,22 +157,31 @@ function AppContent() {
         };
     }, [dispatch]);
 
-    // ✅ 首次访问追踪
+    // ✅ 首次访问追踪（🔴 关键事件：立即加载模块，确保数据不丢失）
     useEffect(() => {
         const hasVisited = localStorage.getItem('has_visited');
 
         if (!hasVisited) {
             const urlParams = new URLSearchParams(location.search);
-
-            // ⚡ 使用延迟加载的异步追踪，不阻塞页面渲染
-            trackEventLazy('first_visit', {
+            const eventData = {
                 referrer: document.referrer || 'direct',
                 utm_source: urlParams.get('utm_source'),
                 utm_medium: urlParams.get('utm_medium'),
                 utm_campaign: urlParams.get('utm_campaign'),
                 landing_page: location.pathname,
                 timestamp: new Date().toISOString()
-            });
+            };
+
+            // 🔴 关键事件：立即加载 PostHog 模块并同步追踪（不使用 trackEventLazy）
+            // 确保首次访问数据不会因用户快速离开而丢失
+            (async () => {
+                const modules = await loadPostHogModules();
+                if (modules) {
+                    // 使用同步追踪（trackEvent），而非异步追踪（trackEventAsync）
+                    modules.posthogModule.trackEvent('first_visit', eventData);
+                    logger.info('App', '首次访问事件已同步追踪', eventData);
+                }
+            })();
 
             localStorage.setItem('has_visited', 'true');
         }