Bug in dashboard chart "Group by" with identical values

Good evening,

I’m submitting what I think is a bug :sweat_smile:

In fact, when I create a chart of this type with this device in particular:


And when I save the page, the data is saved correctly but I then end up on a page like this which stays stuck:

I can press back in the browser and return to the edit window, and when I select « Do not group »:

image

And when I save the page, the data is saved correctly and I get to my page properly loaded:

The other charts are configured the same with grouping by hour and those work fine.

The only difference is that the value hasn’t changed for a while on this sensor (I will investigate because that’s not normal), but I think the problem comes from here :thinking:

Thanks :slightly_smiling_face:

Edit: I was able to fix my value sending problem by reintegrating the module.
A new value was sent and I was able to restore grouping by hour and it’s OK

Thanks for the reply! If you can reproduce it, do you see the error in the browser console? (Right-click → Inspect → Console)

Otherwise, I’ll try to reproduce it :slight_smile:

I couldn’t reproduce the bug under the same conditions, but I got this:

{
    "response": {
        "status": 500,
        "data": {
            "status": 500,
            "code": "SERVER_ERROR",
            "error": {}
        }
    }
}
index.js:652 Gladys Gateway, connected in 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
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
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
1 Like

Ok thanks that should be enough for me to reproduce!

I created a GitHub issue with the details:

I’ll keep you posted

1 Like

@prohand I couldn’t reproduce it :smiley: I tried exactly the same case as you, and everything works. Can you give me more details on how to reproduce it?

In the meantime, I improved the error handling of this widget to display exactly the error coming from the server instead of just continuing to spin indefinitely :slight_smile:

An example with a dummy error for testing:

Edit: The PR:

1 Like

Thanks for the PR :slight_smile:

Right now I can’t reproduce the problem ^^

Did you try having a single value in the graph, I suppose, and grouping it by hour?

Otherwise I’ll see when the PR is in Prod if it shows me an error message :innocent:

Yes! I tried several cases: no values and with a single value.

[quote="prohand, post:6, topic:9558

I managed to reproduce it with this chart using only a temperature value :slight_smile:

No errors in the Gladys logs

The console doesn’t show me any more errors than before because when saving the screen freezes and I have to press F5 to return to the editor window.

Can you describe the steps to follow to reproduce it?

Le problème ne semble pas se produire sur tous les appareils.

J’ai réussi à reproduire le problème comme ceci :

Ici j’ai sélectionné un capteur de température sur une sonde qui détecte s’il y a une fuite d’eau (Capteur eau lave linge (Température))

Ajout d’un graphique.
On selectionne un appareil avec une température qui a qu’une seul valeur
Selection du type graphique : Aire
fficher les aces : Oui
Fonction d’agrégation : Moyenne
Grouper par : Heure (Testé aussi avec Ne pas grouper)
Afficher la variation : Oui
Intervalle par défaut : 24h

Et Sauvegarder

J’ai pu voir ceci dans la console :

{
    "response": {
        "status": 422,
        "data": {
            "status": 422,
            "code": "UNPROCESSABLE_ENTITY",
            "properties": [
                {
                    "message": "\"[2][4].chart_type\" is not allowed to be empty",
                    "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": [
                                    "percent"
                                ],
                                "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": "Températures chambres",
                                "device_feature_names": [
                                    "Capteur température chambre 1 (Température)",
                                    "Capteur température chambre 2 (Température)"
                                ],
                                "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": [
                                    "percent",
                                    "percent"
                                ],
                                "title": "Humidité chambres",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Capteur température chambre 1 (Humidité (pourcentage))",
                                    "Capteur température chambre 2 (Humidité (pourcentage))"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "title": "Température salon",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Capteur température salon (Température)"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "percent"
                                ],
                                "title": "Humidité salon",
                                "chart_type": "area",
                                "display_axes": true,
                                "interval": "last-day",
                                "display_variation": true,
                                "colors": [
                                    "#d63031"
                                ],
                                "device_feature_names": [
                                    "Capteur température salon (Humidité (pourcentage))"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Capteur eau lave linge (Température)"
                                ],
                                "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"
                }
            ]
        }
    }
}

In my opinion it’s something else, you just haven’t selected a chart type, apparently? [2][4].chart_type\\\" is not allowed to be empty

That doesn’t look like the error you had before

Indeed, sorry :frowning:

I can’t reproduce the issue again at the moment

However, whenever I save I get quite a few errors like this, even though it doesn’t reproduce the bug:

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

Do you have, in the « Network » tab, the request that shows this error?

In the Network tab I don’t have a 500 status code:

But I do have the message in the console

You’re on Gladys Plus, that’s normal — can you run the same test locally? :slight_smile:

I can’t reproduce the problem locally
I really feel like it’s related to Gladys Plus

We’re making progress :slight_smile:

I tried on my end to reproduce it on Gladys Plus, without success.

I created a temperature sensor, added it to the dashboard in a chart with all the same settings, and it works well:

Are you sure you don’t have any logs in Gladys? If there’s a 500 error, there’s usually an error log

I’ve tried several times to reproduce the original problem but I haven’t been able to :frowning:
It seems the problem is intermittent and I can’t find a common denominator…

As for the 500 error, yes I’m sure I don’t have any error logs in docker logs glagys :wink:

I went to check, and indeed the « log level » of a 500 error is not high enough for it to be visible in production logs, I changed that in a PR because it should be more easily visible:

Don’t worry with the 2 changes I’ve made:

  • Error message displayed in the interface
  • Full 500 error displayed in the logs

You should be able to debug that better after the next release :wink:

1 Like

Perfect :slight_smile:

Thank you very much, I’ll get back to you after the next release

1 Like