74 lines
2.0 KiB
JavaScript
74 lines
2.0 KiB
JavaScript
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;
|