Gráfico del panel de errores „Agrupar por“ con valor idéntico

Buenas noches,

Vengo a reportar lo que creo que es un error :sweat_smile:

De hecho, cuando creo un gráfico de este tipo con este dispositivo en particular:


Y guardo la página, los datos se guardan correctamente, pero luego me encuentro con una página como esta que se queda congelada:

Puedo hacer clic en « Atrás » en el navegador y volver a la ventana de edición, y cuando selecciono « No agrupar »:

image

Y guardo la página, los datos se guardan correctamente y me encuentro con mi página cargada correctamente:

Los otros gráficos están configurados de la misma manera con el agrupamiento por hora y esos funcionan bien.

La única diferencia es que el valor no ha cambiado en un tiempo en este sensor (voy a investigar porque no es normal), pero creo que el problema viene de aquí :thinking:

Gracias :slight_smile:

Edición: Pude corregir mi problema de envío de valor reintegrando el módulo.
Se envió un nuevo valor y pude volver a poner el agrupamiento por hora y está todo bien

¡Gracias por la respuesta! Si puedes reproducirlo, ¿tienes el error en la consola del navegador? (Clic derecho → Inspeccionar → Consola)

Si no, voy a intentar reproducirlo :slight_smile:

No he podido reproducir el error con las mismas condiciones, pero he obtenido esto:

{
    "response": {
        "status": 500,
        "data": {
            "status": 500,
            "code": "SERVER_ERROR",
            "error": {}
        }
    }
}
index.js:652 Gladys Gateway, conectado en websocket
main.js:56 {response: {…}}response: data: code: "SERVER_ERROR"error: {}status: 500[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()status: 500[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()[[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
refreshTabletMode @ main.js:56
await in refreshTabletMode
checkSession @ main.js:71
await in checkSession
(anonymous) @ index.js:60
componentWillMount @ app.jsx:383
E @ index.js:150
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
k @ render.js:42
t @ entry.js:60
Pq/i @ entry.js:66
i @ bootstrap:68
(anonymous) @ bootstrap:252
(anonymous) @ bundle.995e6.esm.js:1
SetTabletMode.jsx:34 {response: {…}}
(anonymous) @ SetTabletMode.jsx:34
await in (anonymous)
(anonymous) @ SetTabletMode.jsx:63
await in (anonymous)
componentDidMount @ SetTabletMode.jsx:81
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ async.js:36
(anonymous) @ index.js:7
Promise.then
(anonymous) @ index.js:5
i.componentWillMount @ async.js:34
E @ index.js:150
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
k @ render.js:42
t @ entry.js:60
Pq/i @ entry.js:66
i @ bootstrap:68
(anonymous) @ bootstrap:252
(anonymous) @ bundle.995e6.esm.js:1
apexcharts.common.js:6 Uncaught (in promise) RangeError: Invalid array length
    at Array.push (<anonymous>)
    at e.value (apexcharts.common.js:6:166933)
    at e.value (apexcharts.common.js:6:168998)
    at e.value (apexcharts.common.js:6:175666)
    at e.value (apexcharts.common.js:6:171632)
    at e.value (apexcharts.common.js:6:427093)
    at e.value (apexcharts.common.js:14:38538)
    at e.create (apexcharts.common.js:6:5550)
    at apexcharts.common.js:14:37073
    at new Promise (<anonymous>)
    at e.value (apexcharts.common.js:14:21768)
    at t.c.displayChart (ApexChartComponent.jsx:218:18)
    at t.c.componentDidMount (ApexChartComponent.jsx:222:10)
    at index.js:358:8
    at Array.some (<anonymous>)
    at index.js:356:16
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:6
value @ apexcharts.common.js:14
(anonymous) @ apexcharts.common.js:6
(anonymous) @ apexcharts.common.js:14
value @ apexcharts.common.js:14
(anonymous) @ ApexChartComponent.jsx:218
componentDidMount @ ApexChartComponent.jsx:222
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ Chart.jsx:326
await in (anonymous)
componentDidMount @ Chart.jsx:357
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ index.js:98
await in (anonymous)
(anonymous) @ index.js:123
await in (anonymous)
componentDidMount @ index.js:224
(anonymous) @ index.js:358
(anonymous) @ index.js:356
x @ index.js:351
p @ component.js:149
Promise.then
h @ component.js:210
c.setState @ component.js:54
(anonymous) @ async.js:36
(anonymous) @ index.js:7
Promise.then
(anonymous) @ index.js:5
i.componentWillMount @ async.js:34
E @ index.js:150
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
_ @ index.js:527
E @ index.js:321
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
f @ children.js:96
E @ index.js:262
k @ render.js:42
t @ entry.js:60
Pq/i @ entry.js:66
i @ bootstrap:68
(anonymous) @ bootstrap:252
(anonymous) @ bundle.995e6.esm.js:1

¡Vale, gracias, eso debería bastarme para reproducirlo!

He creado una issue en Github con los detalles:

Te mantendré informado.

@prohand No he podido reproducirlo :smiley: He probado exactamente el mismo caso que tú, y todo funciona. ¿Podrías darme más detalles sobre cómo reproducirlo?

Mientras tanto, he mejorado la gestión de errores de este widget para mostrar exactamente el error que llega del servidor en lugar de seguir girando en vacío :slight_smile:

Un ejemplo con un error falso para probar:

Edición: La PR:

Gracias por la PR :slight_smile:

Actualmente no puedo reproducir el problema ^^

¿Has probado a tener un solo valor en el gráfico, supongo, y agruparlo por hora?

Si no, lo veré cuando la PR esté en producción si me muestra un mensaje de error :innocent:

¡Sí! He probado varios casos: sin valores y con un solo valor.

También funciona :slight_smile: Si vuelves a tener el error, revisa también los registros de Gladys, porque según el error es un error del lado del servidor

He logrado reproducirlo con este gráfico solo con un valor de temperatura :slight_smile:

No hay errores en los registros de Gladys

La consola no me muestra más errores que antes, ya que al guardar la pantalla se congela y tengo que hacer F5 para volver a la ventana de edición.

¿Puedes describirme los pasos a seguir para reproducirlo?

El problema no parece ocurrir en todos los dispositivos.

He logrado reproducir el problema de la siguiente manera:

Aquí he seleccionado un sensor de temperatura en una sonda que detecta si hay una fuga de agua (Sensor de agua del lavavajillas (Temperatura))

Añadir un gráfico.
Se selecciona un dispositivo con una temperatura que solo tiene un valor
Seleccionar el tipo de gráfico: Área
Mostrar los ejes: Sí
Función de agregación: Promedio
Agrupar por: Hora (También probado con No agrupar)
Mostrar la variación: Sí
Intervalo por defecto: 24h

Y guardar

He podido ver esto en la consola:

{
    "response": {
        "status": 422,
        "data": {
            "status": 422,
            "code": "UNPROCESSABLE_ENTITY",
            "properties": [
                {
                    "message": "\"[2][4].chart_type\" no puede estar vacío",
                    "attribute": "boxes",
                    "value": [
                        [
                            {
                                "type": "temperature-in-room",
                                "room": "chambre-2",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "chambre-enfants",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "salle-de-bain",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "informatique",
                                "temperature_use_custom_value": true,
                                "temperature_min": 17,
                                "temperature_max": 30
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "cuisine",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "salon",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "entree",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "toilettes",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salle-de-bain-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "chart_type": "area",
                                "display_variation": true,
                                "interval": "last-day",
                                "display_axes": true,
                                "title": "Température salle de bain",
                                "device_feature_names": [
                                    "Capteur température salle de bain (Température)"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Capteur température cuisine (Température)"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-cuisine-temperature-sensor-decimal-temperature"
                                ],
                                "title": "Température cuisine",
                                "chart_type": "area",
                                "units": [
                                    "celsius"
                                ],
                                "aggregate_function": "avg",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "group_by": "hour"
                            }
                        ],
                        [
                            {
                                "type": "humidity-in-room",
                                "room": "chambre-2",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "chambre-enfants",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "salle-de-bain",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "informatique",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "cuisine",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "salon",
                                "humidity_use_custom_value": true,
                                "humidity_min": 45,
                                "humidity_max": 60
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "entree",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "humidity_use_custom_value": true,
                                "room": "toilettes"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salle-de-bain-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "percent"
                                ],
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "title": "Humidité salle de bain",
                                "colors": [
                                    "#d63031"
                                ],
                                "device_feature_names": [
                                    "Capteur température salle de bain (Humidité (pourcentage))"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Capteur température cuisine (Humidité (pourcentage))"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-cuisine-humidity-sensor-decimal-humidity"
                                ],
                                "title": "Humidité cuisine",
                                "units": [
                                    "porcentaje"
                                ],
                                "aggregate_function": "avg",
                                "chart_type": "area",
                                "colors": [
                                    "#d63031"
                                ],
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "group_by": "hour"
                            }
                        ],
                        [
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-chambre-1-temperature-sensor-decimal-temperature",
                                    "zigbee2mqtt-capteur-temperature-chambre-2-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius",
                                    "celsius"
                                ],
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "title": "Temperaturas habitaciones",
                                "device_feature_names": [
                                    "Sensor temperatura habitación 1 (Temperatura)",
                                    "Sensor temperatura habitación 2 (Temperatura)"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-chambre-1-humidity-sensor-decimal-humidity",
                                    "zigbee2mqtt-capteur-temperature-chambre-2-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "porcentaje",
                                    "porcentaje"
                                ],
                                "title": "Humedad habitaciones",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Sensor temperatura habitación 1 (Humedad (porcentaje))",
                                    "Sensor temperatura habitación 2 (Humedad (porcentaje))"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "title": "Temperatura salón",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Sensor temperatura salón (Temperatura)"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "porcentaje"
                                ],
                                "title": "Humedad salón",
                                "chart_type": "area",
                                "display_axes": true,
                                "interval": "last-day",
                                "display_variation": true,
                                "colors": [
                                    "#d63031"
                                ],
                                "device_feature_names": [
                                    "Sensor temperatura salón (Humedad (porcentaje))"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Sensor agua lavadora (Temperatura)"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-capteur-eau-lave-linge-device-temperature-sensor-decimal-device-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "aggregate_function": "avg",
                                "chart_type": "",
                                "display_axes": true,
                                "group_by": "hour",
                                "interval": "last-day",
                                "display_variation": true
                            }
                        ]
                    ],
                    "type": "Validation error"
                }
            ]
        }
    }
}

En mi opinión es otra cosa, simplemente no has seleccionado un tipo de gráfico, ¿verdad? [2][4].chart_type\" no puede estar vacío

No se parece al error que tenías antes

Efectivamente, lo siento :frowning:

No logro reproducir el problema de nuevo por el momento

Sin embargo, cada vez que guardo tengo varios errores como este sin reproducir el error, sin embargo:

{
    "status": 500,
    "data": {
        "status": 500,
        "code": "SERVER_ERROR",
        "error": {}
    }
}

¿Tienes en la pestaña « Red » la solicitud que muestra este error?

En la pestaña de red no tengo un código de estado 500:

Pero sí tengo el mensaje en la consola

Estás en Gladys Plus, es normal, ¿puedes hacer la misma prueba en local? :slight_smile:

No puedo reproducir el problema localmente
Tengo la sensación de que está relacionado con Gladys Plus

¡Vamos avanzando! :slight_smile:

Por mi parte, intenté reproducirlo en Gladys Plus, pero sin éxito.

Creé un sensor de temperatura, lo añadí al panel de control en un gráfico con los mismos parámetros, y funciona bien:

¿Estás seguro de que no tienes ningún registro en Gladys? Si hay un error 500, generalmente hay un registro de error.

He intentado varias veces reproducir el problema base, pero no lo he conseguido :frowning:
Tengo la impresión de que el problema es aleatorio y no logro encontrar un denominador común…

Para el error 500, sí, estoy seguro de que no hay registros de errores en los logs de docker de glagys :wink:

Fui a ver, y efectivamente el « log level » de un error 500 no es lo suficientemente alto como para que sea visible en los logs de producción, lo he cambiado en una PR porque debería ser más fácil de ver:

No te preocupes con los 2 cambios que he hecho:

  • Mensaje de error mostrado en la interfaz
  • Error 500 completo mostrado en los logs

Deberías poder depurar esto mejor después del próximo lanzamiento :wink:

Perfecto :slight_smile:

Muchas gracias, haré un seguimiento después del próximo lanzamiento