claude-mpm 4.2.39__py3-none-any.whl → 4.2.42__py3-none-any.whl
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- claude_mpm/VERSION +1 -1
- claude_mpm/agents/BASE_ENGINEER.md +114 -1
- claude_mpm/agents/BASE_OPS.md +156 -1
- claude_mpm/agents/INSTRUCTIONS.md +120 -11
- claude_mpm/agents/WORKFLOW.md +160 -10
- claude_mpm/agents/templates/agentic-coder-optimizer.json +17 -12
- claude_mpm/agents/templates/react_engineer.json +217 -0
- claude_mpm/agents/templates/web_qa.json +40 -4
- claude_mpm/cli/__init__.py +3 -5
- claude_mpm/commands/mpm-browser-monitor.md +370 -0
- claude_mpm/commands/mpm-monitor.md +177 -0
- claude_mpm/dashboard/static/built/components/code-viewer.js +1076 -2
- claude_mpm/dashboard/static/built/components/ui-state-manager.js +465 -2
- claude_mpm/dashboard/static/css/dashboard.css +2 -0
- claude_mpm/dashboard/static/js/browser-console-monitor.js +495 -0
- claude_mpm/dashboard/static/js/components/browser-log-viewer.js +763 -0
- claude_mpm/dashboard/static/js/components/code-viewer.js +931 -340
- claude_mpm/dashboard/static/js/components/diff-viewer.js +891 -0
- claude_mpm/dashboard/static/js/components/file-change-tracker.js +443 -0
- claude_mpm/dashboard/static/js/components/file-change-viewer.js +690 -0
- claude_mpm/dashboard/static/js/components/ui-state-manager.js +307 -19
- claude_mpm/dashboard/static/js/socket-client.js +2 -2
- claude_mpm/dashboard/static/test-browser-monitor.html +470 -0
- claude_mpm/dashboard/templates/index.html +62 -99
- claude_mpm/services/cli/unified_dashboard_manager.py +1 -1
- claude_mpm/services/monitor/daemon.py +69 -36
- claude_mpm/services/monitor/daemon_manager.py +186 -29
- claude_mpm/services/monitor/handlers/browser.py +451 -0
- claude_mpm/services/monitor/server.py +272 -5
- {claude_mpm-4.2.39.dist-info → claude_mpm-4.2.42.dist-info}/METADATA +1 -1
- {claude_mpm-4.2.39.dist-info → claude_mpm-4.2.42.dist-info}/RECORD +35 -29
- claude_mpm/agents/templates/agentic-coder-optimizer.md +0 -44
- claude_mpm/agents/templates/agentic_coder_optimizer.json +0 -238
- claude_mpm/agents/templates/test-non-mpm.json +0 -20
- claude_mpm/dashboard/static/dist/components/code-viewer.js +0 -2
- {claude_mpm-4.2.39.dist-info → claude_mpm-4.2.42.dist-info}/WHEEL +0 -0
- {claude_mpm-4.2.39.dist-info → claude_mpm-4.2.42.dist-info}/entry_points.txt +0 -0
- {claude_mpm-4.2.39.dist-info → claude_mpm-4.2.42.dist-info}/licenses/LICENSE +0 -0
- {claude_mpm-4.2.39.dist-info → claude_mpm-4.2.42.dist-info}/top_level.txt +0 -0
|
@@ -0,0 +1,470 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Claude MPM Browser Console Monitor Test</title>
|
|
7
|
+
<style>
|
|
8
|
+
body {
|
|
9
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
10
|
+
max-width: 1200px;
|
|
11
|
+
margin: 0 auto;
|
|
12
|
+
padding: 20px;
|
|
13
|
+
line-height: 1.6;
|
|
14
|
+
background: #f5f7fa;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.header {
|
|
18
|
+
text-align: center;
|
|
19
|
+
margin-bottom: 40px;
|
|
20
|
+
padding: 20px;
|
|
21
|
+
background: white;
|
|
22
|
+
border-radius: 8px;
|
|
23
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.test-section {
|
|
27
|
+
background: white;
|
|
28
|
+
margin: 20px 0;
|
|
29
|
+
padding: 20px;
|
|
30
|
+
border-radius: 8px;
|
|
31
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.test-button {
|
|
35
|
+
background: #4299e1;
|
|
36
|
+
color: white;
|
|
37
|
+
border: none;
|
|
38
|
+
padding: 10px 20px;
|
|
39
|
+
margin: 5px;
|
|
40
|
+
border-radius: 5px;
|
|
41
|
+
cursor: pointer;
|
|
42
|
+
font-size: 14px;
|
|
43
|
+
transition: background-color 0.2s;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.test-button:hover {
|
|
47
|
+
background: #3182ce;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.test-button.danger {
|
|
51
|
+
background: #e53e3e;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.test-button.danger:hover {
|
|
55
|
+
background: #c53030;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.test-button.warning {
|
|
59
|
+
background: #f6ad55;
|
|
60
|
+
color: #2d3748;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.test-button.warning:hover {
|
|
64
|
+
background: #ed8936;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.console-output {
|
|
68
|
+
background: #1a202c;
|
|
69
|
+
color: #e2e8f0;
|
|
70
|
+
padding: 15px;
|
|
71
|
+
border-radius: 5px;
|
|
72
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
73
|
+
font-size: 12px;
|
|
74
|
+
max-height: 200px;
|
|
75
|
+
overflow-y: auto;
|
|
76
|
+
margin-top: 10px;
|
|
77
|
+
white-space: pre-wrap;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.status {
|
|
81
|
+
display: inline-block;
|
|
82
|
+
padding: 4px 8px;
|
|
83
|
+
border-radius: 4px;
|
|
84
|
+
font-size: 12px;
|
|
85
|
+
font-weight: bold;
|
|
86
|
+
margin-left: 10px;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.status.connected {
|
|
90
|
+
background: #48bb78;
|
|
91
|
+
color: white;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.status.disconnected {
|
|
95
|
+
background: #f56565;
|
|
96
|
+
color: white;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.info-panel {
|
|
100
|
+
background: #e6fffa;
|
|
101
|
+
border: 1px solid #38b2ac;
|
|
102
|
+
border-radius: 5px;
|
|
103
|
+
padding: 15px;
|
|
104
|
+
margin: 10px 0;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.code-block {
|
|
108
|
+
background: #2d3748;
|
|
109
|
+
color: #e2e8f0;
|
|
110
|
+
padding: 10px;
|
|
111
|
+
border-radius: 5px;
|
|
112
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
113
|
+
font-size: 12px;
|
|
114
|
+
margin: 10px 0;
|
|
115
|
+
overflow-x: auto;
|
|
116
|
+
}
|
|
117
|
+
</style>
|
|
118
|
+
</head>
|
|
119
|
+
<body>
|
|
120
|
+
<div class="header">
|
|
121
|
+
<h1>🖥️ Claude MPM Browser Console Monitor Test</h1>
|
|
122
|
+
<p>This page tests the browser console monitoring system by generating various console events.</p>
|
|
123
|
+
<p><strong>Monitor Status:</strong>
|
|
124
|
+
<span id="monitor-status" class="status disconnected">Checking...</span>
|
|
125
|
+
</p>
|
|
126
|
+
</div>
|
|
127
|
+
|
|
128
|
+
<div class="test-section">
|
|
129
|
+
<h2>📡 Connection Status</h2>
|
|
130
|
+
<p>The browser console monitor automatically connects when this page loads. Check the bottom-right corner for the monitor indicator.</p>
|
|
131
|
+
|
|
132
|
+
<div class="info-panel">
|
|
133
|
+
<strong>Expected Behavior:</strong>
|
|
134
|
+
<ul>
|
|
135
|
+
<li>Monitor indicator appears in bottom-right corner</li>
|
|
136
|
+
<li>Indicator shows "Connected" status with browser ID</li>
|
|
137
|
+
<li>Console events are logged to <code>.claude-mpm/logs/client/</code></li>
|
|
138
|
+
<li>Events are also visible in the Claude MPM dashboard</li>
|
|
139
|
+
</ul>
|
|
140
|
+
</div>
|
|
141
|
+
|
|
142
|
+
<button class="test-button" onclick="checkMonitorStatus()">Check Monitor Status</button>
|
|
143
|
+
<button class="test-button" onclick="showMonitorInfo()">Show Monitor Info</button>
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<div class="test-section">
|
|
147
|
+
<h2>🧪 Console Event Tests</h2>
|
|
148
|
+
<p>Click the buttons below to generate different types of console events:</p>
|
|
149
|
+
|
|
150
|
+
<button class="test-button" onclick="testInfoMessage()">Log Info Message</button>
|
|
151
|
+
<button class="test-button" onclick="testDebugMessage()">Log Debug Message</button>
|
|
152
|
+
<button class="test-button warning" onclick="testWarningMessage()">Log Warning</button>
|
|
153
|
+
<button class="test-button danger" onclick="testErrorMessage()">Log Error</button>
|
|
154
|
+
<button class="test-button danger" onclick="testException()">Throw Exception</button>
|
|
155
|
+
<button class="test-button" onclick="testObjectLogging()">Log Objects</button>
|
|
156
|
+
<button class="test-button" onclick="testAsyncError()">Async Error</button>
|
|
157
|
+
<button class="test-button" onclick="runAllTests()">Run All Tests</button>
|
|
158
|
+
|
|
159
|
+
<div id="console-mirror" class="console-output">
|
|
160
|
+
Console output will appear here...
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
163
|
+
|
|
164
|
+
<div class="test-section">
|
|
165
|
+
<h2>📊 Performance Test</h2>
|
|
166
|
+
<p>Test the monitor's handling of high-frequency console events:</p>
|
|
167
|
+
|
|
168
|
+
<button class="test-button" onclick="performanceTest(100)">100 Events</button>
|
|
169
|
+
<button class="test-button" onclick="performanceTest(500)">500 Events</button>
|
|
170
|
+
<button class="test-button warning" onclick="performanceTest(1000)">1000 Events</button>
|
|
171
|
+
|
|
172
|
+
<div id="performance-output"></div>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<div class="test-section">
|
|
176
|
+
<h2>🔧 Integration Test</h2>
|
|
177
|
+
<p>Test integration with various JavaScript scenarios:</p>
|
|
178
|
+
|
|
179
|
+
<button class="test-button" onclick="testPromiseRejection()">Promise Rejection</button>
|
|
180
|
+
<button class="test-button" onclick="testTimerError()">Timer Error</button>
|
|
181
|
+
<button class="test-button" onclick="testDOMError()">DOM Error</button>
|
|
182
|
+
<button class="test-button" onclick="testNetworkError()">Network Error</button>
|
|
183
|
+
</div>
|
|
184
|
+
|
|
185
|
+
<div class="test-section">
|
|
186
|
+
<h2>📋 Verification Instructions</h2>
|
|
187
|
+
<div class="info-panel">
|
|
188
|
+
<h3>How to Verify Browser Console Monitoring:</h3>
|
|
189
|
+
<ol>
|
|
190
|
+
<li><strong>Check Monitor Server:</strong>
|
|
191
|
+
<div class="code-block">curl -s http://localhost:8765/health | jq .</div>
|
|
192
|
+
</li>
|
|
193
|
+
<li><strong>View Log Files:</strong>
|
|
194
|
+
<div class="code-block">ls -la .claude-mpm/logs/client/
|
|
195
|
+
tail -f .claude-mpm/logs/client/browser-*.log</div>
|
|
196
|
+
</li>
|
|
197
|
+
<li><strong>Monitor Dashboard:</strong>
|
|
198
|
+
<div class="code-block">open http://localhost:8765</div>
|
|
199
|
+
</li>
|
|
200
|
+
<li><strong>Check Browser Console:</strong>
|
|
201
|
+
<div class="code-block">F12 -> Console Tab -> Look for "[Browser Monitor]" messages</div>
|
|
202
|
+
</li>
|
|
203
|
+
</ol>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
|
|
207
|
+
<!-- Load the browser console monitor script -->
|
|
208
|
+
<script src="http://localhost:8765/api/browser-monitor.js"></script>
|
|
209
|
+
|
|
210
|
+
<script>
|
|
211
|
+
// Mirror console output to page for visibility
|
|
212
|
+
const consoleOutput = document.getElementById('console-mirror');
|
|
213
|
+
const originalConsole = {
|
|
214
|
+
log: console.log,
|
|
215
|
+
info: console.info,
|
|
216
|
+
warn: console.warn,
|
|
217
|
+
error: console.error,
|
|
218
|
+
debug: console.debug
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
function mirrorToPage(level, args) {
|
|
222
|
+
const timestamp = new Date().toLocaleTimeString();
|
|
223
|
+
const message = args.map(arg => {
|
|
224
|
+
if (typeof arg === 'object') {
|
|
225
|
+
try {
|
|
226
|
+
return JSON.stringify(arg, null, 2);
|
|
227
|
+
} catch (e) {
|
|
228
|
+
return '[Object]';
|
|
229
|
+
}
|
|
230
|
+
}
|
|
231
|
+
return String(arg);
|
|
232
|
+
}).join(' ');
|
|
233
|
+
|
|
234
|
+
const levelColors = {
|
|
235
|
+
log: '#e2e8f0',
|
|
236
|
+
info: '#63b3ed',
|
|
237
|
+
warn: '#f6ad55',
|
|
238
|
+
error: '#fc8181',
|
|
239
|
+
debug: '#a0aec0'
|
|
240
|
+
};
|
|
241
|
+
|
|
242
|
+
const entry = document.createElement('div');
|
|
243
|
+
entry.style.color = levelColors[level] || '#e2e8f0';
|
|
244
|
+
entry.innerHTML = `[${timestamp}] [${level.toUpperCase()}] ${message}`;
|
|
245
|
+
|
|
246
|
+
consoleOutput.appendChild(entry);
|
|
247
|
+
consoleOutput.scrollTop = consoleOutput.scrollHeight;
|
|
248
|
+
|
|
249
|
+
// Keep only last 50 entries
|
|
250
|
+
while (consoleOutput.children.length > 50) {
|
|
251
|
+
consoleOutput.removeChild(consoleOutput.firstChild);
|
|
252
|
+
}
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
// Override console methods to mirror output
|
|
256
|
+
['log', 'info', 'warn', 'error', 'debug'].forEach(level => {
|
|
257
|
+
console[level] = function(...args) {
|
|
258
|
+
mirrorToPage(level, args);
|
|
259
|
+
return originalConsole[level].apply(console, args);
|
|
260
|
+
};
|
|
261
|
+
});
|
|
262
|
+
|
|
263
|
+
// Test functions
|
|
264
|
+
function checkMonitorStatus() {
|
|
265
|
+
if (window.browserConsoleMonitor) {
|
|
266
|
+
const info = window.browserConsoleMonitor.getInfo();
|
|
267
|
+
console.info('Browser Monitor Status:', info);
|
|
268
|
+
document.getElementById('monitor-status').textContent =
|
|
269
|
+
info.isConnected ? `Connected (${info.browserID})` : 'Disconnected';
|
|
270
|
+
document.getElementById('monitor-status').className =
|
|
271
|
+
`status ${info.isConnected ? 'connected' : 'disconnected'}`;
|
|
272
|
+
} else {
|
|
273
|
+
console.warn('Browser Console Monitor not loaded');
|
|
274
|
+
document.getElementById('monitor-status').textContent = 'Not Loaded';
|
|
275
|
+
document.getElementById('monitor-status').className = 'status disconnected';
|
|
276
|
+
}
|
|
277
|
+
}
|
|
278
|
+
|
|
279
|
+
function showMonitorInfo() {
|
|
280
|
+
if (window.browserConsoleMonitor) {
|
|
281
|
+
console.group('🖥️ Browser Monitor Information');
|
|
282
|
+
const info = window.browserConsoleMonitor.getInfo();
|
|
283
|
+
console.log('Browser ID:', info.browserID);
|
|
284
|
+
console.log('Connection Status:', info.isConnected);
|
|
285
|
+
console.log('Queued Events:', info.queuedEvents);
|
|
286
|
+
console.log('Current URL:', window.location.href);
|
|
287
|
+
console.log('User Agent:', navigator.userAgent);
|
|
288
|
+
console.groupEnd();
|
|
289
|
+
} else {
|
|
290
|
+
console.error('Browser Console Monitor not available');
|
|
291
|
+
}
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
function testInfoMessage() {
|
|
295
|
+
console.info('ℹ️ This is an info message from the test page');
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
function testDebugMessage() {
|
|
299
|
+
console.debug('🐛 Debug message with technical details', {
|
|
300
|
+
component: 'BrowserMonitorTest',
|
|
301
|
+
timestamp: Date.now(),
|
|
302
|
+
userAgent: navigator.userAgent.substring(0, 50)
|
|
303
|
+
});
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
function testWarningMessage() {
|
|
307
|
+
console.warn('⚠️ Warning: This is a test warning message', {
|
|
308
|
+
level: 'warning',
|
|
309
|
+
source: 'test-browser-monitor.html'
|
|
310
|
+
});
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
function testErrorMessage() {
|
|
314
|
+
console.error('❌ Test error message', {
|
|
315
|
+
error: 'TestError',
|
|
316
|
+
details: 'This is a controlled test error'
|
|
317
|
+
});
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
function testException() {
|
|
321
|
+
try {
|
|
322
|
+
// Intentionally cause an error
|
|
323
|
+
const obj = null;
|
|
324
|
+
obj.someProperty.nestedProperty = 'test';
|
|
325
|
+
} catch (error) {
|
|
326
|
+
console.error('🚨 Caught exception:', error);
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
function testObjectLogging() {
|
|
331
|
+
const testObjects = {
|
|
332
|
+
simpleObject: { name: 'Test', value: 42 },
|
|
333
|
+
arrayData: [1, 2, 3, 'test', { nested: true }],
|
|
334
|
+
nullValue: null,
|
|
335
|
+
undefinedValue: undefined,
|
|
336
|
+
functionValue: function() { return 'test'; }
|
|
337
|
+
};
|
|
338
|
+
|
|
339
|
+
console.log('📦 Object logging test:', testObjects);
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
function testAsyncError() {
|
|
343
|
+
setTimeout(() => {
|
|
344
|
+
console.error('⏰ Async error after timeout', {
|
|
345
|
+
type: 'async',
|
|
346
|
+
delay: '1000ms'
|
|
347
|
+
});
|
|
348
|
+
}, 1000);
|
|
349
|
+
|
|
350
|
+
console.info('⏰ Async error scheduled for 1 second');
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
function runAllTests() {
|
|
354
|
+
console.group('🧪 Running All Console Tests');
|
|
355
|
+
|
|
356
|
+
testInfoMessage();
|
|
357
|
+
setTimeout(testDebugMessage, 100);
|
|
358
|
+
setTimeout(testWarningMessage, 200);
|
|
359
|
+
setTimeout(testErrorMessage, 300);
|
|
360
|
+
setTimeout(testObjectLogging, 400);
|
|
361
|
+
setTimeout(testException, 500);
|
|
362
|
+
setTimeout(testAsyncError, 600);
|
|
363
|
+
|
|
364
|
+
setTimeout(() => {
|
|
365
|
+
console.groupEnd();
|
|
366
|
+
console.info('✅ All console tests completed');
|
|
367
|
+
}, 700);
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
function performanceTest(eventCount) {
|
|
371
|
+
console.group(`⚡ Performance Test: ${eventCount} events`);
|
|
372
|
+
|
|
373
|
+
const startTime = performance.now();
|
|
374
|
+
const performanceOutput = document.getElementById('performance-output');
|
|
375
|
+
|
|
376
|
+
performanceOutput.innerHTML = `<p>Generating ${eventCount} console events...</p>`;
|
|
377
|
+
|
|
378
|
+
for (let i = 0; i < eventCount; i++) {
|
|
379
|
+
if (i % 4 === 0) {
|
|
380
|
+
console.log(`Performance test event ${i + 1}/${eventCount}`);
|
|
381
|
+
} else if (i % 4 === 1) {
|
|
382
|
+
console.info(`Info event ${i + 1}/${eventCount}`, { iteration: i });
|
|
383
|
+
} else if (i % 4 === 2) {
|
|
384
|
+
console.warn(`Warning event ${i + 1}/${eventCount}`);
|
|
385
|
+
} else {
|
|
386
|
+
console.debug(`Debug event ${i + 1}/${eventCount}`, { data: Math.random() });
|
|
387
|
+
}
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
const endTime = performance.now();
|
|
391
|
+
const duration = endTime - startTime;
|
|
392
|
+
|
|
393
|
+
console.groupEnd();
|
|
394
|
+
console.info(`⚡ Performance test completed: ${eventCount} events in ${duration.toFixed(2)}ms`);
|
|
395
|
+
|
|
396
|
+
performanceOutput.innerHTML = `
|
|
397
|
+
<p><strong>Performance Test Results:</strong></p>
|
|
398
|
+
<ul>
|
|
399
|
+
<li>Events: ${eventCount}</li>
|
|
400
|
+
<li>Duration: ${duration.toFixed(2)}ms</li>
|
|
401
|
+
<li>Rate: ${(eventCount / duration * 1000).toFixed(0)} events/second</li>
|
|
402
|
+
</ul>
|
|
403
|
+
`;
|
|
404
|
+
}
|
|
405
|
+
|
|
406
|
+
function testPromiseRejection() {
|
|
407
|
+
Promise.reject(new Error('Test promise rejection'))
|
|
408
|
+
.catch(error => {
|
|
409
|
+
console.error('🚫 Promise rejection caught:', error);
|
|
410
|
+
});
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
function testTimerError() {
|
|
414
|
+
setTimeout(() => {
|
|
415
|
+
console.error('⏲️ Timer-based error', {
|
|
416
|
+
source: 'setTimeout',
|
|
417
|
+
delay: '500ms'
|
|
418
|
+
});
|
|
419
|
+
}, 500);
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
function testDOMError() {
|
|
423
|
+
try {
|
|
424
|
+
const nonExistentElement = document.getElementById('non-existent-element');
|
|
425
|
+
nonExistentElement.style.color = 'red'; // This will throw
|
|
426
|
+
} catch (error) {
|
|
427
|
+
console.error('🏗️ DOM manipulation error:', error);
|
|
428
|
+
}
|
|
429
|
+
}
|
|
430
|
+
|
|
431
|
+
function testNetworkError() {
|
|
432
|
+
fetch('http://localhost:9999/non-existent-endpoint')
|
|
433
|
+
.catch(error => {
|
|
434
|
+
console.error('🌐 Network error:', error);
|
|
435
|
+
});
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
// Initialize page
|
|
439
|
+
window.addEventListener('load', () => {
|
|
440
|
+
console.log('🚀 Browser Console Monitor Test Page Loaded');
|
|
441
|
+
|
|
442
|
+
// Check monitor status after a brief delay
|
|
443
|
+
setTimeout(checkMonitorStatus, 1000);
|
|
444
|
+
|
|
445
|
+
// Show welcome message
|
|
446
|
+
console.group('📋 Test Page Information');
|
|
447
|
+
console.log('Page:', document.title);
|
|
448
|
+
console.log('URL:', window.location.href);
|
|
449
|
+
console.log('Load time:', new Date().toISOString());
|
|
450
|
+
console.groupEnd();
|
|
451
|
+
});
|
|
452
|
+
|
|
453
|
+
// Handle errors
|
|
454
|
+
window.addEventListener('error', (event) => {
|
|
455
|
+
console.error('🚨 Global error caught:', {
|
|
456
|
+
message: event.message,
|
|
457
|
+
source: event.filename,
|
|
458
|
+
line: event.lineno,
|
|
459
|
+
column: event.colno,
|
|
460
|
+
error: event.error
|
|
461
|
+
});
|
|
462
|
+
});
|
|
463
|
+
|
|
464
|
+
// Handle unhandled promise rejections
|
|
465
|
+
window.addEventListener('unhandledrejection', (event) => {
|
|
466
|
+
console.error('🚫 Unhandled promise rejection:', event.reason);
|
|
467
|
+
});
|
|
468
|
+
</script>
|
|
469
|
+
</body>
|
|
470
|
+
</html>
|