debug: Add extensive logging to PlaceholderPicker
All checks were successful
Deploy Development / deploy (push) Successful in 53s
Build Test / lint-backend (push) Successful in 0s
Build Test / build-frontend (push) Successful in 15s

**Issue Investigation:**
User reports:
1. Backend placeholders (120+) not appearing
2. Node names showing as 'node_2' instead of 'Körper-Analyse (node_2)'

**Debug Changes:**
- Console logging for backend API call
- Log catalog structure and keys
- Log flattened placeholders count
- Error state displayed in UI (not just console)
- Log each node extraction with label/data
- Safe navigation operator for node.data?.label

**Expected Console Output:**
🔄 Loading placeholders from backend...
 Catalog received: {...}
📊 Catalog keys: ['Profil', 'Körper', ...]
📁 Category "Profil": 10 items
 Loaded 120 system placeholders
🔍 Extracting workflow placeholders from nodes: [...]
📦 Node node_2: {label: 'Körper-Analyse', ...}
   Adding placeholder: {{ node_2.analysis_core }} → "Körper-Analyse (node_2) - Hauptausgabe"

Next: Check browser console for error messages

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lars 2026-04-09 16:12:42 +02:00
parent b779c2f2a8
commit d2eaab277e

View File

@ -20,15 +20,25 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
const [searchQuery, setSearchQuery] = useState('')
const [systemPlaceholders, setSystemPlaceholders] = useState([])
const [loading, setLoading] = useState(true)
const [loadError, setLoadError] = useState(null)
// Lade Backend-Platzhalter beim Mount
useEffect(() => {
async function loadPlaceholders() {
try {
console.log('🔄 Loading placeholders from backend...')
const catalog = await api.listPlaceholders()
console.log('✅ Catalog received:', catalog)
console.log('📊 Catalog keys:', Object.keys(catalog))
// Konvertiere Katalog zu Flat-Liste
const flattened = []
Object.entries(catalog).forEach(([category, items]) => {
console.log(`📁 Category "${category}": ${items?.length || 0} items`)
if (!Array.isArray(items)) {
console.warn(`⚠️ Category "${category}" items is not an array:`, items)
return
}
items.forEach(item => {
flattened.push({
placeholder: `{{ ${item.key.trim()} }}`,
@ -39,9 +49,11 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
})
})
})
console.log(`✅ Loaded ${flattened.length} system placeholders`)
setSystemPlaceholders(flattened)
} catch (e) {
console.error('Failed to load placeholders:', e)
console.error('❌ Failed to load placeholders:', e)
setLoadError(e.message)
} finally {
setLoading(false)
}
@ -188,6 +200,20 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
>
Lade Platzhalter...
</div>
) : loadError ? (
<div
style={{
padding: '24px',
textAlign: 'center',
color: 'var(--danger)',
fontSize: '14px'
}}
>
Fehler beim Laden: {loadError}
<div style={{ marginTop: '12px', fontSize: '12px', color: 'var(--text3)' }}>
Workflow-Platzhalter sind trotzdem verfügbar.
</div>
</div>
) : Object.keys(grouped).length === 0 ? (
<div
style={{
@ -319,17 +345,28 @@ export function PlaceholderPicker({ nodes, onSelect, onClose }) {
function extractWorkflowPlaceholders(nodes) {
const placeholders = []
console.log('🔍 Extracting workflow placeholders from nodes:', nodes)
nodes.forEach(node => {
if (node.type === 'end') return // End Node hat keine Outputs
const nodeId = node.id
const nodeLabel = node.data.label || nodeId
const nodeLabel = node.data?.label || nodeId
console.log(`📦 Node ${nodeId}:`, {
type: node.type,
label: node.data?.label,
nodeLabel: nodeLabel,
data: node.data
})
// analysis_core für alle Analysis/Logic/Join Nodes
if (node.type === 'analysis' || node.type === 'logic' || node.type === 'join') {
const desc = `${nodeLabel} (${nodeId}) - Hauptausgabe`
console.log(` Adding placeholder: {{ ${nodeId}.analysis_core }} → "${desc}"`)
placeholders.push({
placeholder: `{{ ${nodeId}.analysis_core }}`,
description: `${nodeLabel} (${nodeId}) - Hauptausgabe`,
description: desc,
icon: getNodeIcon(node.type),
category: 'Workflow - Node Outputs'
})