提交qiming-dev-inject
This commit is contained in:
Codex
36
qiming-dev-inject/test-projects/next-pages-project/.gitignore
vendored
Normal file
36
qiming-dev-inject/test-projects/next-pages-project/.gitignore
vendored
Normal file
@@ -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
|
||||
|
||||
32
qiming-dev-inject/test-projects/next-pages-project/README.md
Normal file
32
qiming-dev-inject/test-projects/next-pages-project/README.md
Normal file
@@ -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__` - 检查注入状态
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -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} />
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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: [],
|
||||
}
|
||||
|
||||
@@ -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"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user