155 lines
5.5 KiB
HTML
155 lines
5.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="sl">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>n8n Webhook Debugger (Popravljena Verzija)</title>
|
|
<style>
|
|
body { font-family: sans-serif; line-height: 1.6; padding: 20px; background-color: #f4f4f4; }
|
|
h1 { color: #333; }
|
|
p { color: #555; }
|
|
strong { color: #0066cc; }
|
|
button { font-size: 16px; padding: 10px 15px; margin: 5px; cursor: pointer; border: 1px solid #ccc; border-radius: 5px; }
|
|
button#test-post-json { background-color: #d4edda; border-color: #c3e6cb;}
|
|
button:hover { background-color: #e9e9e9; }
|
|
#results {
|
|
white-space: pre-wrap;
|
|
background-color: #2d2d2d;
|
|
color: #
|
|
;
|
|
padding: 15px;
|
|
border-radius: 5px;
|
|
margin-top: 20px;
|
|
max-height: 600px;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
font-size: 14px;
|
|
}
|
|
.success { color: #28a745; font-weight: bold; }
|
|
.error { color: #dc3545; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>n8n Webhook Debugger (Popravljena Verzija)</h1>
|
|
<p>Ta stran bo testirala klic na vaš n8n webhook s <strong>pravilnim formatom podatkov</strong>.</p>
|
|
<p>Pričakujemo, da bo <strong>Test 1</strong> zdaj uspešen in vrnil `Status: 200 OK`.</p>
|
|
|
|
<div>
|
|
<button id="test-post-json">1. Testiraj POST z JSON (Pravilen format)</button>
|
|
<button id="test-get">2. Testiraj GET</button>
|
|
<button id="test-post-form">3. Testiraj POST z Form Data (Pravilen format)</button>
|
|
</div>
|
|
|
|
<h2>Rezultati:</h2>
|
|
<pre id="results"></pre>
|
|
|
|
<script>
|
|
const webhookUrl = 'https://n8n.spletnimojster.si/webhook/joze/chat';
|
|
const resultsEl = document.getElementById('results');
|
|
|
|
function logToResults(message, type = '') {
|
|
const span = document.createElement('span');
|
|
if (type === 'success') {
|
|
span.className = 'success';
|
|
} else if (type === 'error') {
|
|
span.className = 'error';
|
|
}
|
|
span.textContent = message;
|
|
|
|
resultsEl.appendChild(span);
|
|
resultsEl.append('\n\n' + '-'.repeat(50) + '\n\n');
|
|
resultsEl.scrollTop = resultsEl.scrollHeight;
|
|
}
|
|
|
|
async function runTest(testName, url, options) {
|
|
logToResults(`🏃 Zagon testa: ${testName}`);
|
|
logToResults(`URL: ${url}`);
|
|
logToResults(`Opcije: ${JSON.stringify(options, null, 2)}`);
|
|
|
|
try {
|
|
const response = await fetch(url, options);
|
|
let responseBody = '';
|
|
|
|
const responseToParse = response.clone();
|
|
|
|
try {
|
|
const jsonData = await responseToParse.json();
|
|
responseBody = JSON.stringify(jsonData, null, 2);
|
|
} catch (e) {
|
|
responseBody = await responseToParse.text();
|
|
if (!responseBody) {
|
|
responseBody = "[Prazno telo odgovora]";
|
|
}
|
|
}
|
|
|
|
let responseHeaders = '';
|
|
for (const [key, value] of response.headers.entries()) {
|
|
responseHeaders += `${key}: ${value}\n`;
|
|
}
|
|
|
|
const resultType = response.ok ? 'success' : 'error';
|
|
logToResults(
|
|
`Status: ${response.status} ${response.statusText}
|
|
Glave odgovora (Headers):
|
|
${responseHeaders}
|
|
Telo odgovora (Body):
|
|
${responseBody}`, resultType
|
|
);
|
|
|
|
} catch (error) {
|
|
logToResults(
|
|
`Napaka: ${error.toString()}
|
|
|
|
Možni vzroki:
|
|
1. CORS napaka (preverite konzolo brskalnika za podrobnosti!).
|
|
2. Mrežna napaka (napačen URL, strežnik ni dosegljiv).`, 'error'
|
|
);
|
|
}
|
|
}
|
|
|
|
// --- DEFINICIJE TESTOV S POPRAVLJENIM FORMATOM PODATKOV ---
|
|
|
|
// Test 1: POST z JSON v pravilnem formatu, ki ga pričakuje n8n Chat Trigger
|
|
document.getElementById('test-post-json').addEventListener('click', () => {
|
|
runTest(
|
|
'POST z application/json (Pravilen format)',
|
|
webhookUrl,
|
|
{
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
chatInput: 'Živjo, to je popravljen JSON test!',
|
|
action: 'sendMessage'
|
|
})
|
|
}
|
|
);
|
|
});
|
|
|
|
// Test 2: Preprost GET za preverjanje osnovne povezave
|
|
document.getElementById('test-get').addEventListener('click', () => {
|
|
runTest(
|
|
'GET',
|
|
webhookUrl,
|
|
{ method: 'GET' }
|
|
);
|
|
});
|
|
|
|
// Test 3: Pošiljanje kot klasičen spletni obrazec s pravilnimi imeni polj
|
|
document.getElementById('test-post-form').addEventListener('click', () => {
|
|
runTest(
|
|
'POST z application/x-www-form-urlencoded (Pravilen format)',
|
|
webhookUrl,
|
|
{
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: new URLSearchParams({
|
|
chatInput: 'Živjo, to je popravljen form data test!',
|
|
action: 'sendMessage'
|
|
})
|
|
}
|
|
);
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html> |