提交qiming-dev-inject

2026-06-01 12:53:19 +08:00
parent 96af3b324b
commit 9e9486b7c2
76 changed files with 6397 additions and 0 deletions
--- a/qiming-dev-inject/test-projects/README.md
+++ b/qiming-dev-inject/test-projects/README.md
@@ -0,0 +1,124 @@
+# 测试项目集合
+
+这个目录包含了用于测试 dev-inject 在不同框架和项目类型中的注入功能的示例项目。
+
+## 项目列表
+
+### 1. HTML 静态项目 (html-project)
+- **类型**: 纯 HTML + JavaScript
+- **端口**: 3002
+- **启动**: `npm run serve` 或 `python3 -m http.server 3002`
+- **特点**: 基础的 HTML 项目，用于测试最简单场景下的脚本注入
+
+### 2. Vite 项目 (vite-project)
+- **类型**: Vite + React
+- **端口**: 3001
+- **启动**: `npm run dev`
+- **特点**: 现代化的 Vite 构建工具，单页应用
+
+### 3. Next.js App Router (next-app-project)
+- **类型**: Next.js 14 App Router
+- **端口**: 3000
+- **启动**: `npm run dev`
+- **特点**: 最新的 Next.js 应用路由架构，支持 React Server Components
+
+### 4. Next.js Pages Router (next-pages-project)
+- **类型**: Next.js Pages Router
+- **端口**: 3000
+- **启动**: `npm run dev`
+- **特点**: 传统的 Next.js Pages 路由架构
+
+## 使用指南
+
+### 快速开始
+
+1. **选择一个测试项目**
+   ```bash
+   cd test-projects/html-project  # 或选择其他项目
+   ```
+
+2. **安装依赖**（如果有 package.json）
+   ```bash
+   npm install
+   ```
+
+3. **启动项目**
+   ```bash
+   npm run dev
+   # 或
+   npm run serve
+   # 或
+   python3 -m http.server 3002
+   ```
+
+4. **使用 dev-inject 注入监控脚本**
+   ```bash
+   # 在项目根目录运行
+   node ../bin/index.js install --remote http://localhost:9001/scripts/dev-monitor.js
+   ```
+
+5. **测试功能**
+   - 打开浏览器访问项目
+   - 点击页面上的按钮触发各种错误
+   - 在浏览器控制台运行 DevMonitor 命令查看监控信息
+
+### 测试命令
+
+所有测试项目都支持以下 DevMonitor 命令：
+
+```javascript
+// 显示监控面板
+DevMonitor.showPanel()
+
+// 获取统计信息
+DevMonitor.getStats()
+
+// 清除错误记录
+DevMonitor.clearErrors()
+
+// 检查注入状态
+window.__DEV_INJECT__
+```
+
+## 功能特性
+
+每个测试项目都包含以下功能：
+
+- ✅ 触发同步错误
+- ✅ 触发异步错误
+- ✅ 错误记录和显示
+- ✅ 清除错误功能
+- ✅ DevMonitor 控制台命令
+- ✅ 实时错误统计
+- ✅ 美观的 UI 界面
+
+## 项目对比
+
+| 项目类型 | 构建工具 | 路由方式 | 启动速度 | 适用场景 |
+|---------|---------|---------|---------|---------|
+| HTML | 无 | 静态文件 | 最快 | 传统网站 |
+| Vite | Vite | SPA | 快 | 现代 SPA 应用 |
+| Next.js App | Next.js | App Router | 中 | 全栈应用（推荐） |
+| Next.js Pages | Next.js | Pages Router | 中 | 传统 Next.js 应用 |
+
+## 注意事项
+
+1. **端口冲突**: 确保各个项目使用不同的端口
+2. **依赖安装**: 每个项目需要单独安装依赖
+3. **测试服务器**: 确保 dev-inject 的监控服务器 (localhost:9001) 正在运行
+4. **框架检测**: dev-inject 会自动检测项目类型并应用相应的注入策略
+
+## 问题排查
+
+如果遇到问题：
+
+1. 检查端口是否被占用
+2. 确认所有依赖已正确安装
+3. 查看浏览器控制台是否有错误
+4. 确认监控服务器是否正在运行
+5. 检查注入的脚本是否正确加载
+
+## 贡献
+
+欢迎添加更多测试项目或改进现有项目！
+
--- a/qiming-dev-inject/test-projects/html-project/.gitignore
+++ b/qiming-dev-inject/test-projects/html-project/.gitignore
@@ -0,0 +1,16 @@
+# OS
+.DS_Store
+Thumbs.db
+
+# Editor
+.vscode/
+.idea/
+*.swp
+*.swo
+
+# Node
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
--- a/qiming-dev-inject/test-projects/html-project/README.md
+++ b/qiming-dev-inject/test-projects/html-project/README.md
@@ -0,0 +1,41 @@
+# HTML 静态项目测试
+
+这是一个用于测试 dev-inject 在纯 HTML 静态项目中的注入功能的示例项目。
+
+## 启动项目
+
+### 方式 1: 使用 Python
+```bash
+python3 -m http.server 3002
+```
+
+### 方式 2: 使用 serve
+```bash
+npx serve -s . -p 3002
+```
+
+项目将在 http://localhost:3002 运行。
+
+## 测试步骤
+
+1. 启动项目（任选上述方式之一）
+2. 使用 dev-inject 注入监控脚本
+3. 点击页面上的按钮触发各种错误类型
+4. 在浏览器控制台运行 DevMonitor 命令查看监控信息
+
+## DevMonitor 命令
+
+- `DevMonitor.showPanel()` - 显示监控面板
+- `DevMonitor.getStats()` - 获取统计信息
+- `DevMonitor.clearErrors()` - 清除错误记录
+- `window.__DEV_INJECT__` - 检查注入状态
+
+## 功能特性
+
+- 触发同步错误
+- 触发异步错误
+- 触发引用错误
+- 触发类型错误
+- 实时统计错误数据
+- 清除错误记录
+
--- a/qiming-dev-inject/test-projects/html-project/index.html
+++ b/qiming-dev-inject/test-projects/html-project/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HTML 静态项目 - dev-inject 测试</title>
+<!-- DEV-INJECT-START -->
+  <script data-id="dev-inject-monitor">
+    (function() {
+      const remote = "https://testagent.xspaceagi.com/sdk/dev-monitor.js";
+      const separator = remote.includes('?') ? '&' : '?';
+      const script = document.createElement('script');
+      script.src = remote + separator + 't=' + Date.now();
+      script.dataset.id = 'dev-inject-monitor-script';
+      script.defer = true;
+      // 防止重复注入
+      if (!document.querySelector('[data-id="dev-inject-monitor-script"]')) {
+        document.head.appendChild(script);
+      }
+    })();
+  </script>
+<!-- DEV-INJECT-END -->
+</head>
+
+<body>
+  <h1>HTML 静态项目测试</h1>
+  <p>测试 dev-inject 在纯 HTML 项目中的注入功能</p>
+</body>
+
+</html>
--- a/qiming-dev-inject/test-projects/html-project/package.json
+++ b/qiming-dev-inject/test-projects/html-project/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "html-static-test",
+  "version": "1.0.0",
+  "description": "纯 HTML 静态项目测试 - dev-inject",
+  "type": "module",
+  "scripts": {
+    "start": "python3 -m http.server 3002",
+    "serve": "npx serve -s . -p 3002"
+  },
+  "keywords": [
+    "html",
+    "test",
+    "dev-inject"
+  ],
+  "author": "",
+  "license": "MIT"
+}
--- a/qiming-dev-inject/test-projects/next-app-project/.gitignore
+++ b/qiming-dev-inject/test-projects/next-app-project/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
--- a/qiming-dev-inject/test-projects/next-app-project/README.md
+++ b/qiming-dev-inject/test-projects/next-app-project/README.md
@@ -0,0 +1,32 @@
+# Next.js App Router 测试项目
+
+这是一个用于测试 dev-inject 框架感知注入功能的 Next.js App Router 项目。
+
+## 安装依赖
+
+```bash
+npm install
+```
+
+## 启动开发服务器
+
+```bash
+npm run dev
+```
+
+项目将在 http://localhost:3000 运行。
+
+## 测试步骤
+
+1. 启动项目：`npm run dev`
+2. 使用 dev-inject 注入监控脚本
+3. 点击页面上的按钮触发各种错误
+4. 在浏览器控制台运行 DevMonitor 命令查看监控信息
+
+## DevMonitor 命令
+
+- `DevMonitor.showPanel()` - 显示监控面板
+- `DevMonitor.getStats()` - 获取统计信息
+- `DevMonitor.clearErrors()` - 清除错误记录
+- `window.__DEV_INJECT__` - 检查注入状态
+
--- a/qiming-dev-inject/test-projects/next-app-project/app/globals.css
+++ b/qiming-dev-inject/test-projects/next-app-project/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
--- a/qiming-dev-inject/test-projects/next-app-project/app/layout.tsx
+++ b/qiming-dev-inject/test-projects/next-app-project/app/layout.tsx
@@ -0,0 +1,32 @@
+import type { Metadata } from 'next'
+import { Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export const metadata: Metadata = {
+  title: 'Next.js App Test - dev-inject',
+  description: '测试 dev-inject 框架感知注入功能',
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en">
+  <head>
+      {/* DEV-INJECT-START */}
+        {process.env.NODE_ENV === 'development' && (
+          <script dangerouslySetInnerHTML={{
+            __html: "(function() {\n      const remote = \"https://testagent.xspaceagi.com/sdk/dev-monitor.js\";\n      const separator = remote.includes('?') ? '&' : '?';\n      const script = document.createElement('script');\n      script.src = remote + separator + 't=' + Date.now();\n      script.dataset.id = 'dev-inject-monitor-script';\n      script.defer = true;\n      // 防止重复注入\n      if (!document.querySelector('[data-id=\"dev-inject-monitor-script\"]')) {\n        document.head.appendChild(script);\n      }\n    })();"
+          }} />
+        )}
+        {/* DEV-INJECT-END */}
+    </head>
+
+      <body className={inter.className}>{children}</body>
+    </html>
+  )
+}
--- a/qiming-dev-inject/test-projects/next-app-project/app/page.tsx
+++ b/qiming-dev-inject/test-projects/next-app-project/app/page.tsx
@@ -0,0 +1,85 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function Home() {
+  const [errors, setErrors] = useState<string[]>([]);
+
+  const triggerError = () => {
+    try {
+      throw new Error('测试错误 - Next.js App Router');
+    } catch (error) {
+      setErrors(prev => [...prev, (error as Error).message]);
+    }
+  };
+
+  const triggerAsyncError = () => {
+    Promise.reject(new Error('异步错误测试 - Next.js App'));
+  };
+
+  const clearErrors = () => {
+    setErrors([]);
+  };
+
+  return (
+    <main className="min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 text-white">
+      <div className="container mx-auto px-4 py-8">
+        <header className="text-center mb-12">
+          <h1 className="text-4xl font-bold mb-4">🟢 Next.js App Router Test</h1>
+          <p className="text-xl opacity-90">测试 dev-inject 框架感知注入功能</p>
+        </header>
+
+        <div className="max-w-2xl mx-auto">
+          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
+            <h2 className="text-2xl font-semibold mb-4">🚀 测试功能</h2>
+            <div className="flex flex-wrap gap-3 justify-center">
+              <button
+                onClick={triggerError}
+                className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
+              >
+                触发同步错误
+              </button>
+              <button
+                onClick={triggerAsyncError}
+                className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
+              >
+                触发异步错误
+              </button>
+              <button
+                onClick={clearErrors}
+                className="px-6 py-3 bg-gray-600 hover:bg-gray-700 rounded-lg font-medium transition-colors"
+              >
+                清除错误
+              </button>
+            </div>
+          </div>
+
+          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
+            <h2 className="text-2xl font-semibold mb-4">📊 错误记录</h2>
+            {errors.length === 0 ? (
+              <p className="text-gray-300 italic">暂无错误</p>
+            ) : (
+              <div className="space-y-2">
+                {errors.map((error, index) => (
+                  <div key={index} className="bg-red-500/20 border-l-4 border-red-500 p-3 rounded font-mono text-sm">
+                    {error}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
+            <h2 className="text-2xl font-semibold mb-4">🔧 DevMonitor 检查</h2>
+            <p className="mb-3">在浏览器控制台中检查：</p>
+            <ul className="space-y-1 text-left max-w-md mx-auto">
+              <li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.showPanel()</code> - 显示监控面板</li>
+              <li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.getStats()</code> - 获取统计信息</li>
+              <li><code className="bg-black/20 px-2 py-1 rounded">window.__DEV_INJECT__</code> - 检查注入状态</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </main>
+  )
+}
--- a/qiming-dev-inject/test-projects/next-app-project/next.config.js
+++ b/qiming-dev-inject/test-projects/next-app-project/next.config.js
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
--- a/qiming-dev-inject/test-projects/next-app-project/package.json
+++ b/qiming-dev-inject/test-projects/next-app-project/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "next-app-test",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
+  }
+}
--- a/qiming-dev-inject/test-projects/next-app-project/postcss.config.js
+++ b/qiming-dev-inject/test-projects/next-app-project/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
--- a/qiming-dev-inject/test-projects/next-app-project/tailwind.config.js
+++ b/qiming-dev-inject/test-projects/next-app-project/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
--- a/qiming-dev-inject/test-projects/next-app-project/tsconfig.json
+++ b/qiming-dev-inject/test-projects/next-app-project/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+
--- a/qiming-dev-inject/test-projects/next-pages-project/.gitignore
+++ b/qiming-dev-inject/test-projects/next-pages-project/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
--- a/qiming-dev-inject/test-projects/next-pages-project/README.md
+++ b/qiming-dev-inject/test-projects/next-pages-project/README.md
@@ -0,0 +1,32 @@
+# Next.js Pages Router 测试项目
+
+这是一个用于测试 dev-inject 框架感知注入功能的 Next.js Pages Router 项目。
+
+## 安装依赖
+
+```bash
+npm install
+```
+
+## 启动开发服务器
+
+```bash
+npm run dev
+```
+
+项目将在 http://localhost:3000 运行。
+
+## 测试步骤
+
+1. 启动项目：`npm run dev`
+2. 使用 dev-inject 注入监控脚本
+3. 点击页面上的按钮触发各种错误
+4. 在浏览器控制台运行 DevMonitor 命令查看监控信息
+
+## DevMonitor 命令
+
+- `DevMonitor.showPanel()` - 显示监控面板
+- `DevMonitor.getStats()` - 获取统计信息
+- `DevMonitor.clearErrors()` - 清除错误记录
+- `window.__DEV_INJECT__` - 检查注入状态
+
--- a/qiming-dev-inject/test-projects/next-pages-project/next.config.js
+++ b/qiming-dev-inject/test-projects/next-pages-project/next.config.js
@@ -0,0 +1,5 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {}
+
+module.exports = nextConfig
+
--- a/qiming-dev-inject/test-projects/next-pages-project/package.json
+++ b/qiming-dev-inject/test-projects/next-pages-project/package.json
@@ -0,0 +1,22 @@
+{
+    "name": "next-pages-test",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "react": "^18",
+        "react-dom": "^18",
+        "next": "14.0.0"
+    },
+    "devDependencies": {
+        "typescript": "^5",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18"
+    }
+}
--- a/qiming-dev-inject/test-projects/next-pages-project/pages/_app.tsx
+++ b/qiming-dev-inject/test-projects/next-pages-project/pages/_app.tsx
@@ -0,0 +1,97 @@
+import type { AppProps } from 'next/app'
+import '../styles/globals.css'
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  
+  {/* DEV-INJECT-END */}
+
+
+  {/* DEV-INJECT-START */}
+  useEffect(() => {
+      if (typeof window !== 'undefined') {
+        (function() {
+      const remote = "https://testagent.xspaceagi.com/sdk/dev-monitor.js";
+      const separator = remote.includes('?') ? '&' : '?';
+      const script = document.createElement('script');
+      script.src = remote + separator + 't=' + Date.now();
+      script.dataset.id = 'dev-inject-monitor-script';
+      script.defer = true;
+      // 防止重复注入
+      if (!document.querySelector('[data-id="dev-inject-monitor-script"]')) {
+        document.head.appendChild(script);
+      }
+    })();
+      }
+    }, []);
+  {/* DEV-INJECT-END */}
+
+export default function App({ Component, pageProps }: AppProps) {
+  return <Component {...pageProps} />
+}
+
--- a/qiming-dev-inject/test-projects/next-pages-project/pages/_document.tsx
+++ b/qiming-dev-inject/test-projects/next-pages-project/pages/_document.tsx
@@ -0,0 +1,24 @@
+import { Html, Head, Main, NextScript } from 'next/document'
+
+export default function Document() {
+  return (
+    <Html lang="zh-CN">
+      <Head>
+        
+
+      
+        {/* DEV-INJECT-START */}
+        {typeof window !== 'undefined' && (
+          <script dangerouslySetInnerHTML={{
+            __html: "(function() {\n      const remote = \"https://testagent.xspaceagi.com/sdk/dev-monitor.js\";\n      const separator = remote.includes('?') ? '&' : '?';\n      const script = document.createElement('script');\n      script.src = remote + separator + 't=' + Date.now();\n      script.dataset.id = 'dev-inject-monitor-script';\n      script.defer = true;\n      // 防止重复注入\n      if (!document.querySelector('[data-id=\"dev-inject-monitor-script\"]')) {\n        document.head.appendChild(script);\n      }\n    })();"
+          }} />
+        )}
+        {/* DEV-INJECT-END */}
+      </Head>
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
--- a/qiming-dev-inject/test-projects/next-pages-project/pages/index.tsx
+++ b/qiming-dev-inject/test-projects/next-pages-project/pages/index.tsx
@@ -0,0 +1,92 @@
+import { useState } from 'react'
+import Head from 'next/head'
+
+export default function Home() {
+  const [errors, setErrors] = useState<string[]>([]);
+
+  const triggerError = () => {
+    try {
+      throw new Error('测试错误 - Next.js Pages Router');
+    } catch (error) {
+      setErrors(prev => [...prev, (error as Error).message]);
+    }
+  };
+
+  const triggerAsyncError = () => {
+    Promise.reject(new Error('异步错误测试 - Next.js Pages'));
+  };
+
+  const clearErrors = () => {
+    setErrors([]);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>Next.js Pages Test - dev-inject</title>
+        <meta name="description" content="测试 dev-inject 在 Next.js Pages Router 中的注入功能" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <main className="min-h-screen bg-gradient-to-br from-green-500 to-teal-600 text-white">
+        <div className="container mx-auto px-4 py-8">
+          <header className="text-center mb-12">
+            <h1 className="text-4xl font-bold mb-4">📄 Next.js Pages Router Test</h1>
+            <p className="text-xl opacity-90">测试 dev-inject 框架感知注入功能</p>
+          </header>
+
+          <div className="max-w-2xl mx-auto">
+            <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
+              <h2 className="text-2xl font-semibold mb-4">🚀 测试功能</h2>
+              <div className="flex flex-wrap gap-3 justify-center">
+                <button
+                  onClick={triggerError}
+                  className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
+                >
+                  触发同步错误
+                </button>
+                <button
+                  onClick={triggerAsyncError}
+                  className="px-6 py-3 bg-red-500 hover:bg-red-600 rounded-lg font-medium transition-colors"
+                >
+                  触发异步错误
+                </button>
+                <button
+                  onClick={clearErrors}
+                  className="px-6 py-3 bg-gray-600 hover:bg-gray-700 rounded-lg font-medium transition-colors"
+                >
+                  清除错误
+                </button>
+              </div>
+            </div>
+
+            <div className="bg-white/10 backdrop-blur-md rounded-xl p-6 mb-6">
+              <h2 className="text-2xl font-semibold mb-4">📊 错误记录</h2>
+              {errors.length === 0 ? (
+                <p className="text-gray-300 italic">暂无错误</p>
+              ) : (
+                <div className="space-y-2">
+                  {errors.map((error, index) => (
+                    <div key={index} className="bg-red-500/20 border-l-4 border-red-500 p-3 rounded font-mono text-sm">
+                      {error}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div className="bg-white/10 backdrop-blur-md rounded-xl p-6">
+              <h2 className="text-2xl font-semibold mb-4">🔧 DevMonitor 检查</h2>
+              <p className="mb-3">在浏览器控制台中检查：</p>
+              <ul className="space-y-1 text-left max-w-md mx-auto">
+                <li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.showPanel()</code> - 显示监控面板</li>
+                <li><code className="bg-black/20 px-2 py-1 rounded">DevMonitor.getStats()</code> - 获取统计信息</li>
+                <li><code className="bg-black/20 px-2 py-1 rounded">window.__DEV_INJECT__</code> - 检查注入状态</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+}
+
--- a/qiming-dev-inject/test-projects/next-pages-project/postcss.config.js
+++ b/qiming-dev-inject/test-projects/next-pages-project/postcss.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
+
--- a/qiming-dev-inject/test-projects/next-pages-project/styles/globals.css
+++ b/qiming-dev-inject/test-projects/next-pages-project/styles/globals.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+        monospace;
+}
--- a/qiming-dev-inject/test-projects/next-pages-project/tailwind.config.js
+++ b/qiming-dev-inject/test-projects/next-pages-project/tailwind.config.js
@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+
--- a/qiming-dev-inject/test-projects/next-pages-project/tsconfig.json
+++ b/qiming-dev-inject/test-projects/next-pages-project/tsconfig.json
@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
+
--- a/qiming-dev-inject/test-projects/vite-project/.gitignore
+++ b/qiming-dev-inject/test-projects/vite-project/.gitignore
@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
--- a/qiming-dev-inject/test-projects/vite-project/README.md
+++ b/qiming-dev-inject/test-projects/vite-project/README.md
@@ -0,0 +1,32 @@
+# Vite React 测试项目
+
+这是一个用于测试 dev-inject 框架感知注入功能的 Vite + React 项目。
+
+## 安装依赖
+
+```bash
+npm install
+```
+
+## 启动开发服务器
+
+```bash
+npm run dev
+```
+
+项目将在 http://localhost:3001 运行。
+
+## 测试步骤
+
+1. 启动项目：`npm run dev`
+2. 使用 dev-inject 注入监控脚本
+3. 点击页面上的按钮触发各种错误
+4. 在浏览器控制台运行 DevMonitor 命令查看监控信息
+
+## DevMonitor 命令
+
+- `DevMonitor.showPanel()` - 显示监控面板
+- `DevMonitor.getStats()` - 获取统计信息
+- `DevMonitor.clearErrors()` - 清除错误记录
+- `window.__DEV_INJECT__` - 检查注入状态
+
--- a/qiming-dev-inject/test-projects/vite-project/index.html
+++ b/qiming-dev-inject/test-projects/vite-project/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Vite Test - dev-inject</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>
--- a/qiming-dev-inject/test-projects/vite-project/package.json
+++ b/qiming-dev-inject/test-projects/vite-project/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "vite-test-project",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.8"
+  }
+}
--- a/qiming-dev-inject/test-projects/vite-project/postcss.config.js
+++ b/qiming-dev-inject/test-projects/vite-project/postcss.config.js
@@ -0,0 +1,12 @@
+// PostCSS 配置文件
+// 此文件用于防止 Vite 向上查找父目录的 PostCSS 配置
+// 本项目使用普通 CSS，不需要 PostCSS 插件
+
+export default {
+  plugins: {
+    // 如果需要 PostCSS 插件，可以在这里添加
+    // 例如：autoprefixer, tailwindcss 等
+  }
+}
+
+
--- a/qiming-dev-inject/test-projects/vite-project/src/App.css
+++ b/qiming-dev-inject/test-projects/vite-project/src/App.css
@@ -0,0 +1,119 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.app {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 20px;
+}
+
+header {
+  margin-bottom: 40px;
+}
+
+header h1 {
+  margin: 0;
+  font-size: 2.5rem;
+  margin-bottom: 10px;
+}
+
+header p {
+  margin: 0;
+  opacity: 0.8;
+  font-size: 1.2rem;
+}
+
+.section {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 12px;
+  padding: 20px;
+  margin-bottom: 20px;
+  backdrop-filter: blur(10px);
+}
+
+.section h2 {
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+.buttons {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+button {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+button:hover {
+  transform: translateY(-2px);
+}
+
+button.danger {
+  background: #f56565;
+  color: white;
+}
+
+button.danger:hover {
+  background: #e53e3e;
+}
+
+button.secondary {
+  background: #718096;
+  color: white;
+}
+
+button.secondary:hover {
+  background: #4a5568;
+}
+
+.error-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.error-item {
+  background: rgba(245, 101, 101, 0.2);
+  border-left: 3px solid #f56565;
+  padding: 10px;
+  margin: 5px 0;
+  border-radius: 4px;
+  text-align: left;
+  font-family: monospace;
+  font-size: 14px;
+}
+
+.no-errors {
+  color: #a0aec0;
+  font-style: italic;
+}
+
+ul {
+  text-align: left;
+}
+
+code {
+  background: rgba(0, 0, 0, 0.2);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: monospace;
+}
--- a/qiming-dev-inject/test-projects/vite-project/src/App.jsx
+++ b/qiming-dev-inject/test-projects/vite-project/src/App.jsx
@@ -0,0 +1,73 @@
+import React, { useState } from 'react'
+import './App.css'
+
+function App() {
+  const [errors, setErrors] = useState([]);
+
+  const triggerError = () => {
+    try {
+      throw new Error('测试错误 - Vite 项目');
+    } catch (error) {
+      setErrors(prev => [...prev, error.message]);
+    }
+  };
+
+  const triggerAsyncError = () => {
+    Promise.reject(new Error('异步错误测试 - Vite'));
+  };
+
+  const clearErrors = () => {
+    setErrors([]);
+  };
+
+  return (
+    <div className="app">
+      <div className="container">
+        <header>
+          <h1>🟣 Vite Test Project</h1>
+          <p>测试 dev-inject 框架感知注入功能</p>
+        </header>
+
+        <div className="section">
+          <h2>🚀 测试功能</h2>
+          <div className="buttons">
+            <button onClick={triggerError} className="danger">
+              触发同步错误
+            </button>
+            <button onClick={triggerAsyncError} className="danger">
+              触发异步错误
+            </button>
+            <button onClick={clearErrors} className="secondary">
+              清除错误
+            </button>
+          </div>
+        </div>
+
+        <div className="section">
+          <h2>📊 错误记录</h2>
+          {errors.length === 0 ? (
+            <p className="no-errors">暂无错误</p>
+          ) : (
+            <ul className="error-list">
+              {errors.map((error, index) => (
+                <li key={index} className="error-item">{error}</li>
+              ))}
+            </ul>
+          )}
+        </div>
+
+        <div className="section">
+          <h2>🔧 DevMonitor 检查</h2>
+          <p>在浏览器控制台中检查：</p>
+          <ul>
+            <li><code>DevMonitor.showPanel()</code> - 显示监控面板</li>
+            <li><code>DevMonitor.getStats()</code> - 获取统计信息</li>
+            <li><code>window.__DEV_INJECT__</code> - 检查注入状态</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;
--- a/qiming-dev-inject/test-projects/vite-project/src/index.css
+++ b/qiming-dev-inject/test-projects/vite-project/src/index.css
@@ -0,0 +1,66 @@
+:root {
+    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+    line-height: 1.5;
+    font-weight: 400;
+
+    color-scheme: light dark;
+    color: rgba(255, 255, 255, 0.87);
+    background-color: #242424;
+
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+}
+
+#root {
+    width: 100%;
+    margin: 0 auto;
+    text-align: center;
+}
+
+button {
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.6em 1.2em;
+    font-size: 1em;
+    font-weight: 500;
+    font-family: inherit;
+    background-color: #1a1a1a;
+    cursor: pointer;
+    transition: border-color 0.25s;
+}
+
+button:hover {
+    border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+    :root {
+        color: #213547;
+        background-color: #ffffff;
+    }
+
+    button {
+        background-color: #f9f9f9;
+    }
+}
--- a/qiming-dev-inject/test-projects/vite-project/src/main.jsx
+++ b/qiming-dev-inject/test-projects/vite-project/src/main.jsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
--- a/qiming-dev-inject/test-projects/vite-project/vite.config.js
+++ b/qiming-dev-inject/test-projects/vite-project/vite.config.js
@@ -0,0 +1,40 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [
+    
+  // <!-- DEV-INJECT-START -->
+  {
+    name: 'dev-inject',
+    enforce: 'post', // 确保在 HTML 注入阶段最后执行
+    transformIndexHtml(html) {
+      if (!html.includes('data-id="dev-inject-monitor"')) {
+        return html.replace("</head>", `
+    <script data-id="dev-inject-monitor">
+      (function() {
+        const remote = "https://testagent.xspaceagi.com/sdk/dev-monitor.js";
+        const separator = remote.includes('?') ? '&' : '?';
+        const script = document.createElement('script');
+        script.src = remote + separator + 't=' + Date.now();
+        script.dataset.id = 'dev-inject-monitor-script';
+        script.defer = true;
+        // 防止重复注入
+        if (!document.querySelector('[data-id="dev-inject-monitor-script"]')) {
+          document.head.appendChild(script);
+        }
+      })();
+    </script>
+  \n</head>`);
+      }
+      return html;
+    }
+  },
+  // <!-- DEV-INJECT-END -->
+  
+    react()
+  ],
+  server: {
+    port: 3001
+  }
+})