fix: 修复 PostHog AbortError 和重复初始化问题
## 问题
控制台报错:
```
[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>
This commit is contained in:
@@ -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;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user