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

Ok thanks that should be enough for me to reproduce!

I created a GitHub issue with the details:

I’ll keep you posted

@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:

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?

The issue does not seem to occur on all devices.

I was able to reproduce the problem as follows:

Here I selected a temperature sensor on a probe that detects if there is a water leak (Water Leak Sensor (Temperature))

Adding a chart.
Select a device with a temperature that has only one value
Select chart type: Area
Show axes: Yes
Aggregation function: Average
Group by: Hour (Also tested with Do not group)
Show variation: Yes
Default interval: 24h

And Save

I was able to see this in the 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": "bedroom-2",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "children's room",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "bathroom",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "office",
                                "temperature_use_custom_value": true,
                                "temperature_min": 17,
                                "temperature_max": 30
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "kitchen",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "living room",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "entrance",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "temperature-in-room",
                                "room": "toilet",
                                "temperature_use_custom_value": true
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-bathroom-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "chart_type": "area",
                                "display_variation": true,
                                "interval": "last-day",
                                "display_axes": true,
                                "title": "Bathroom Temperature",
                                "device_feature_names": [
                                    "Bathroom Temperature Sensor (Temperature)"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Kitchen Temperature Sensor (Temperature)"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-kitchen-temperature-sensor-decimal-temperature"
                                ],
                                "title": "Kitchen Temperature",
                                "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": "bedroom-2",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "children's room",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "bathroom",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "office",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "kitchen",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "living room",
                                "humidity_use_custom_value": true,
                                "humidity_min": 45,
                                "humidity_max": 60
                            },
                            {
                                "type": "humidity-in-room",
                                "room": "entrance",
                                "humidity_use_custom_value": true
                            },
                            {
                                "type": "humidity-in-room",
                                "humidity_use_custom_value": true,
                                "room": "toilet"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-bathroom-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "percent"
                                ],
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "title": "Bathroom Humidity",
                                "colors": [
                                    "#d63031"
                                ],
                                "device_feature_names": [
                                    "Bathroom Temperature Sensor (Humidity (percentage))"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Kitchen Temperature Sensor (Humidity (percentage))"
                                ],
                                "device_features": [
                                    "zigbee2mqtt-kitchen-humidity-sensor-decimal-humidity"
                                ],
                                "title": "Kitchen Humidity"```,
                                "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": "Bedroom Temperatures",
                                "device_feature_names": [
                                    "Bedroom 1 Temperature Sensor (Temperature)",
                                    "Bedroom 2 Temperature Sensor (Temperature)"
                                ],
                                "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": "Bedroom Humidity",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Bedroom 1 Temperature Sensor (Humidity (Percentage))",
                                    "Bedroom 2 Temperature Sensor (Humidity (Percentage))"
                                ],
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-temperature-sensor-decimal-temperature"
                                ],
                                "units": [
                                    "celsius"
                                ],
                                "title": "Living Room Temperature",
                                "chart_type": "area",
                                "display_axes": true,
                                "display_variation": true,
                                "interval": "last-day",
                                "device_feature_names": [
                                    "Living Room Temperature Sensor (Temperature)"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_features": [
                                    "zigbee2mqtt-capteur-temperature-salon-humidity-sensor-decimal-humidity"
                                ],
                                "units": [
                                    "percent"
                                ],
                                "title": "Living Room Humidity",
                                "chart_type": "area",
                                "display_axes": true,
                                "interval": "last-day",
                                "display_variation": true,
                                "colors": [
                                    "#d63031"
                                ],
                                "device_feature_names": [
                                    "Living Room Temperature Sensor (Humidity (Percentage))"
                                ],
                                "aggregate_function": "avg",
                                "group_by": "hour"
                            },
                            {
                                "type": "chart",
                                "device_feature_names": [
                                    "Washing Machine Water Sensor (Temperature)"
                                ],
                                "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:

Perfect :slight_smile:

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