From a0d1790469e7d304e4bf7a632743cf3d5463b49f Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 30 Oct 2025 18:49:03 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=20PostHog=20AbortErro?=
 =?UTF-8?q?r=20=E5=92=8C=E9=87=8D=E5=A4=8D=E5=88=9D=E5=A7=8B=E5=8C=96?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 问题
控制台报错：
```
[PostHog.js] AbortError: The user aborted a request.
```

## 根本原因

### 1. 热重载导致重复初始化
- 开发环境频繁热重载
- App.js 每次重载都调用 initPostHog()
- 之前的网络请求被新请求中断 → AbortError

### 2. 缺少初始化状态管理
- 没有防止重复初始化的锁
- 每次组件更新都可能触发新的初始化

## 解决方案

### 方案A: 防止重复初始化
添加初始化状态锁：
```javascript
let isInitializing = false;
let isInitialized = false;

export const initPostHog = () => {
  // 防止重复初始化
  if (isInitializing || isInitialized) {
    console.log('📊 PostHog 已初始化，跳过重复调用');
    return;
  }

  isInitializing = true;

  try {
    posthog.init(apiKey, {...});
    isInitialized = true;  // 成功后标记为已初始化
  } finally {
    isInitializing = false;  // 无论成功失败都重置标志
  }
};
```

### 方案B: 捕获并忽略 AbortError
在 catch 块中特殊处理：
```javascript
} catch (error) {
  // 忽略 AbortError（通常由热重载引起）
  if (error.name === 'AbortError') {
    console.log('⚠️ PostHog 初始化请求被中断（热重载）');
    return;  // 静默处理，不报错
  }
  console.error('❌ PostHog initialization failed:', error);
}
```

## 影响
- ✅ 修复 AbortError 警告
- ✅ 防止热重载时重复初始化
- ✅ 提升开发体验
- ✅ 不影响生产环境

## 验证
重启开发服务器后：
- ✅ 不再有 AbortError
- ✅ PostHog 只初始化一次
- ✅ 热重载正常工作

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/posthog.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/lib/posthog.js b/src/lib/posthog.js
index 1173a250..03a10956 100644
--- a/src/lib/posthog.js
+++ b/src/lib/posthog.js
@@ -1,11 +1,21 @@
 // src/lib/posthog.js
 import posthog from 'posthog-js';
 
+// 初始化状态管理（防止重复初始化）
+let isInitializing = false;
+let isInitialized = false;
+
 /**
  * Initialize PostHog SDK
  * Should be called once when the app starts
  */
 export const initPostHog = () => {
+  // 防止重复初始化
+  if (isInitializing || isInitialized) {
+    console.log('📊 PostHog 已初始化或正在初始化中，跳过重复调用');
+    return;
+  }
+
   // Only run in browser environment
   if (typeof window === 'undefined') return;
 
@@ -17,6 +27,8 @@ export const initPostHog = () => {
     return;
   }
 
+  isInitializing = true;
+
   try {
     posthog.init(apiKey, {
       api_host: apiHost,
@@ -85,9 +97,17 @@ export const initPostHog = () => {
       },
     });
 
+    isInitialized = true;
     console.log('📊 PostHog Analytics initialized');
   } catch (error) {
+    // 忽略 AbortError（通常由热重载或快速导航引起）
+    if (error.name === 'AbortError') {
+      console.log('⚠️ PostHog 初始化请求被中断（可能是热重载），这是正常的');
+      return;
+    }
     console.error('❌ PostHog initialization failed:', error);
+  } finally {
+    isInitializing = false;
   }
 };