Ryan Malloy
a41a73af2a
- Auto-fix trailing spaces, curly braces, and indentation issues - Clean up boolean comparisons and code formatting - README automatically updated with new code injection tools: - browser_enable_debug_toolbar: Enable debug toolbar for client identification - browser_inject_custom_code: Inject custom JavaScript/CSS code - browser_list_injections: List all active code injections - browser_disable_debug_toolbar: Disable debug toolbar - browser_clear_injections: Remove custom code injections All linting checks now pass successfully.
126 lines
4.1 KiB
HTML
126 lines
4.1 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Request Monitoring Test</title>
|
|
<style>
|
|
body { font-family: Arial, sans-serif; padding: 20px; }
|
|
.status { padding: 10px; margin: 10px 0; border-radius: 4px; }
|
|
.success { background: #d4edda; border: 1px solid #c3e6cb; }
|
|
.error { background: #f8d7da; border: 1px solid #f5c6cb; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Request Monitoring Test Page</h1>
|
|
<p>This page generates various HTTP requests for testing the monitoring system.</p>
|
|
|
|
<div id="status"></div>
|
|
<button onclick="makeRequests()">Generate Test Requests</button>
|
|
<button onclick="makeFailedRequests()">Generate Failed Requests</button>
|
|
<button onclick="makeSlowRequests()">Generate Slow Requests</button>
|
|
|
|
<script>
|
|
const statusDiv = document.getElementById('status');
|
|
|
|
function addStatus(message, type = 'success') {
|
|
const div = document.createElement('div');
|
|
div.className = `status ${type}`;
|
|
div.textContent = message;
|
|
statusDiv.appendChild(div);
|
|
}
|
|
|
|
async function makeRequests() {
|
|
addStatus('Starting request generation...');
|
|
|
|
try {
|
|
// JSON API request
|
|
const response1 = await fetch('https://jsonplaceholder.typicode.com/posts/1');
|
|
const data1 = await response1.json();
|
|
addStatus(`✅ GET JSON: ${response1.status} - Post title: ${data1.title}`);
|
|
|
|
// POST request
|
|
const response2 = await fetch('https://jsonplaceholder.typicode.com/posts', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ title: 'Test Post', body: 'Test content', userId: 1 })
|
|
});
|
|
const data2 = await response2.json();
|
|
addStatus(`✅ POST JSON: ${response2.status} - Created post ID: ${data2.id}`);
|
|
|
|
// Image request
|
|
const img = new Image();
|
|
img.onload = () => addStatus('✅ Image loaded successfully');
|
|
img.onerror = () => addStatus('❌ Image failed to load', 'error');
|
|
img.src = 'https://httpbin.org/image/jpeg';
|
|
|
|
// Multiple parallel requests
|
|
const promises = [];
|
|
for (let i = 1; i <= 3; i++) {
|
|
promises.push(
|
|
fetch(`https://jsonplaceholder.typicode.com/posts/${i}`)
|
|
.then(r => r.json())
|
|
.then(data => addStatus(`✅ Parallel request ${i}: ${data.title.substring(0, 30)}...`))
|
|
);
|
|
}
|
|
await Promise.all(promises);
|
|
|
|
} catch (error) {
|
|
addStatus(`❌ Request failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
async function makeFailedRequests() {
|
|
addStatus('Generating failed requests...');
|
|
|
|
try {
|
|
// 404 error
|
|
await fetch('https://jsonplaceholder.typicode.com/nonexistent');
|
|
} catch (error) {
|
|
addStatus('❌ 404 request completed');
|
|
}
|
|
|
|
try {
|
|
// Invalid domain
|
|
await fetch('https://invalid-domain-12345.com/api');
|
|
} catch (error) {
|
|
addStatus('❌ Invalid domain request failed (expected)');
|
|
}
|
|
|
|
try {
|
|
// CORS error
|
|
await fetch('https://httpbin.org/status/500');
|
|
} catch (error) {
|
|
addStatus('❌ 500 error request completed');
|
|
}
|
|
}
|
|
|
|
async function makeSlowRequests() {
|
|
addStatus('Generating slow requests...');
|
|
|
|
try {
|
|
// Delay request
|
|
const start = Date.now();
|
|
await fetch('https://httpbin.org/delay/2');
|
|
const duration = Date.now() - start;
|
|
addStatus(`⏱️ Slow request completed in ${duration}ms`);
|
|
|
|
// Another slow request
|
|
const start2 = Date.now();
|
|
await fetch('https://httpbin.org/delay/3');
|
|
const duration2 = Date.now() - start2;
|
|
addStatus(`⏱️ Very slow request completed in ${duration2}ms`);
|
|
|
|
} catch (error) {
|
|
addStatus(`❌ Slow request failed: ${error.message}`, 'error');
|
|
}
|
|
}
|
|
|
|
// Auto-generate some initial requests
|
|
setTimeout(() => {
|
|
addStatus('Auto-generating initial requests...');
|
|
makeRequests();
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|