S7_snap7_Stremer_n_Recorder/STREAMING_TROUBLESHOOTING.md

🔧 Troubleshooting Chart.js Streaming - Guía de Resolución

🚨 Problema Reportado

Síntomas:

• ✅ Status muestra "Active"
• ✅ Variables cambia de 0 a 1
• ❌ Data Points se mantiene en 0
• ❌ No se ve ningún plot dentro de la grilla
• ❌ La línea de tiempo no se mueve
• ⚠️ La escala Y cambia pero es lo único que funciona

🔍 Diagnóstico Paso a Paso

Paso 1: Verificar que se cargó chartjs-plugin-streaming

Abrir Consola del Navegador (F12) y ejecutar:

verifyStreamingIntegration()

Resultado esperado:

🧪 Verificando integración de Chart.js Streaming...
✅ Chart.js cargado: true
✅ ChartStreaming cargado: true
✅ PlotManager cargado: true
✅ Sesiones de streaming activas: 1

Si ChartStreaming cargado: false:

1. Verificar que chartjs-plugin-streaming.js se carga correctamente
2. Revisar errores en la consola
3. Recargar la página

Paso 2: Habilitar Debug Detallado

enablePlotDebug()

Paso 3: Forzar Actualización de Datos

forceStreamingUpdate()

Buscar en consola:

📈 Plot plot_13: Fetching data from backend...
📈 Plot plot_13: Received data: {...}
📈 Plot plot_13: Processing X datasets for streaming

Paso 4: Verificar Datos del Backend

Ejecutar en consola:

fetch('/api/plots/plot_13/data')
  .then(r => r.json())
  .then(data => {
    console.log('📊 Backend data:', data);
    console.log('📊 Datasets:', data.datasets?.length || 0);
    console.log('📊 Data points per dataset:', 
      data.datasets?.map(d => d.data?.length || 0) || []);
  });

Resultado esperado:

📊 Backend data: {session_id: "plot_13", datasets: [...], data_points_count: X}
📊 Datasets: 1
📊 Data points per dataset: [5, 8, 12]

Paso 5: Verificar Configuración del Chart

// Para la sesión activa (ej: plot_13)
const sessionData = plotManager.sessions.get('plot_13');
console.log('📈 Chart config:', {
  hasChart: !!sessionData?.chart,
  scaleType: sessionData?.chart?.scales?.x?.type,
  hasRealTimeScale: sessionData?.chart?.scales?.x?.constructor?.name,
  streamingEnabled: !!sessionData?.chart?.$streaming?.enabled,
  datasets: sessionData?.chart?.data?.datasets?.length || 0
});

Resultado esperado:

📈 Chart config: {
  hasChart: true,
  scaleType: "realtime", 
  hasRealTimeScale: "RealTimeScale",
  streamingEnabled: true,
  datasets: 1
}

🛠️ Soluciones Comunes

Problema: ChartStreaming no está cargado

Causa: El archivo chartjs-plugin-streaming.js no se carga correctamente.

Solución:

1. Verificar que el archivo existe en static/js/chartjs-streaming/chartjs-plugin-streaming.js
2. Revisar que el HTML incluye: <script src="/static/js/chartjs-streaming/chartjs-plugin-streaming.js"></script>
3. Verificar orden de carga (debe ser después de Chart.js y antes de plotting.js)

Problema: Backend devuelve datos pero no aparecen en el chart

Causa: Error en el procesamiento de datos o timestamps incorrectos.

Solución:

// Verificar timestamps de los datos
fetch('/api/plots/plot_13/data')
  .then(r => r.json())
  .then(data => {
    const firstDataset = data.datasets[0];
    const firstPoint = firstDataset.data[0];
    console.log('📊 First point timestamp:', firstPoint.x);
    console.log('📊 Current time:', Date.now());
    console.log('📊 Time difference (sec):', (Date.now() - firstPoint.x) / 1000);
  });

Si la diferencia de tiempo es muy grande (>60 segundos), el punto puede estar fuera de la ventana de tiempo.

Problema: Escala realtime no funciona

Causa: La escala no se inicializó correctamente.

Solución:

// Re-inicializar plot
const sessionId = 'plot_13'; // Cambiar por tu session ID
plotManager.controlPlot(sessionId, 'stop');
setTimeout(() => {
  plotManager.controlPlot(sessionId, 'start');
}, 1000);

Problema: Data Points siempre en 0

Causa: Los datos no se están agregando al chart o se eliminan inmediatamente.

Solución verificar:

1. TTL Configuration: Los datos pueden estar expirando muy rápido
2. Timestamp Format: Los timestamps pueden estar en formato incorrecto
3. Dataset Index: Los datos se pueden estar agregando al dataset incorrecto

// Agregar punto de prueba manualmente
const sessionData = plotManager.sessions.get('plot_13');
if (sessionData?.chart) {
  window.ChartStreaming.addStreamingData(sessionData.chart, 0, {
    x: Date.now(),
    y: Math.random() * 100
  });
  console.log('📈 Test point added');
}

🎯 Test de Resolución Rápida

Ejecutar este script completo en consola:

// Test completo de diagnóstico
console.log('🔧 DIAGNÓSTICO COMPLETO');
console.log('='.repeat(50));

// 1. Verificar componentes básicos
console.log('1️⃣ COMPONENTES:');
console.log('Chart.js:', typeof Chart !== 'undefined' ? '✅' : '❌');
console.log('ChartStreaming:', typeof window.ChartStreaming !== 'undefined' ? '✅' : '❌');
console.log('PlotManager:', typeof plotManager !== 'undefined' ? '✅' : '❌');

// 2. Verificar sesiones activas
if (plotManager && plotManager.sessions.size > 0) {
  console.log('\n2️⃣ SESIONES ACTIVAS:');
  for (const [sessionId, sessionData] of plotManager.sessions) {
    console.log(`📈 ${sessionId}:`, {
      hasChart: !!sessionData.chart,
      scaleType: sessionData.chart?.scales?.x?.type,
      datasets: sessionData.chart?.data?.datasets?.length || 0,
      dataPoints: sessionData.chart?.data?.datasets?.reduce((total, d) => total + (d.data?.length || 0), 0) || 0
    });
  }
}

// 3. Test de backend data
console.log('\n3️⃣ BACKEND DATA TEST:');
if (plotManager && plotManager.sessions.size > 0) {
  const firstSessionId = Array.from(plotManager.sessions.keys())[0];
  fetch(`/api/plots/${firstSessionId}/data`)
    .then(r => r.json())
    .then(data => {
      console.log('📊 Backend response:', {
        success: !!data.datasets,
        datasets: data.datasets?.length || 0,
        totalPoints: data.data_points_count || 0,
        firstDatasetPoints: data.datasets?.[0]?.data?.length || 0
      });
    })
    .catch(err => console.log('❌ Backend error:', err.message));
}

console.log('\n4️⃣ NEXT STEPS:');
console.log('- enablePlotDebug() para logs detallados');
console.log('- forceStreamingUpdate() para forzar actualización');
console.log('- Si persiste el problema, revisar configuración del backend');

📞 Contacto de Soporte

Si después de estos pasos el problema persiste:

1. Compartir resultado completo del diagnóstico en consola
2. Verificar logs del backend en la terminal donde corre python main.py
3. Revisar Network tab en DevTools para errores de red

---

🎉 Resultado Esperado

Cuando funcione correctamente verás:

📈 Chart.js Streaming Plugin loaded successfully
📈 RealTimeScale initialized: {duration: 60000, refresh: 500, pause: false}
📈 Plot plot_13: Successfully initialized 1 streaming datasets
📈 Plot plot_13: Fetching data from backend...
📈 Plot plot_13: Adding 3 new points for UR29_Brix
📈 Added point to dataset 0 (UR29_Brix): x=1642598234567, y=54.258

Y el gráfico mostrará:

• ✅ Línea de tiempo deslizándose automáticamente
• ✅ Data Points incrementándose
• ✅ Líneas de variables dibujándose en tiempo real
• ✅ Escala Y ajustándose a los datos