heartbeatList different on page load

[stephenpapierski]

⚠️ Please verify that this bug has NOT been raised before.

• I checked and didn't find similar issue

🛡️ Security Policy

• I agree to have read this project Security Policy

📝 Describe your problem

If I log the last item in this.$root.heartbeatList, I get something different when the page loads versus every time after when a new heartbeat happens. It seems that the first one is just a raw dump of the database entries, whereas subsequent heartbeats appear to have called toJSON().

As an example, I added a console.log() to chartData() in PingChart.vue (see below).

     chartData() {
            let pingData = [];  // Ping Data for Line Chart, y-axis contains ping time
            let downData = [];  // Down Data for Bar Chart, y-axis is 1 if target is down (red color), under maintenance (blue color) or pending (orange color), 0 if target is up
            let colorData = []; // Color Data for Bar Chart

            let heartbeatList = this.heartbeatList ||
             (this.monitorId in this.$root.heartbeatList && this.$root.heartbeatList[this.monitorId]) ||
             [];

            console.log(heartbeatList.at(-1); // This is the added line

The result on page load is...

down_count: 0
duration: 0
end_time: "2023-11-15 04:04:35.634"
id: 50
important: 0
monitor_id: 1
msg: "200 - OK"
ping: 244
status: 1
time: "2023-11-15 04:04:35.367"

But after the next heartbeat...

important: false
monitorID: 1
msg: "200 - OK"
ping: 262
status: 1
time: "2023-11-15 04:04:55.368"

This doesn't end up causing any issues for single word variable names, but does cause issues if you're trying to access variables like monitorID instead of monitor_id. I'm running into this issue while trying to add some slow response monitoring information to the GUI. As an example, I added a ping_threshold to the database, but the toJSON() returns pingThreshold. I can get around the first one being different with the code below, but it feels a little hacky. Seems to me like something is going wrong with the first call, but I'm having trouble tracking it down. Any ideas? Or am I going about this incorrectly?

            let lastBeat = heartbeatList.at(-1);
            // TODO: Simplify? When page loads, lastBeat contains ping_threshold,
            // but after the following heartbeat it has pingThreshold.
            if (lastBeat?.hasOwnProperty("pingThreshold")) {
                return lastBeat.pingThreshold;
            } else if (lastBeat?.hasOwnProperty("ping_threshold")) {
                return lastBeat.ping_threshold;
            } else {
                return undefined;
            }

📝 Error Message(s) or Log

No response

🐻 Uptime-Kuma Version

1.23.4

💻 Operating System and Arch

Linux Mint 21.2

🌐 Browser

Google Chrome 119.0.6045.105

🐋 Docker Version

No response

🟩 NodeJS Version

18.18.2

[stephenpapierski]

It seems like the function sending the most recent 100 heartbeats in the "wrong" format is sendHeartbeatList() in server/client.js.

[stephenpapierski]

This did the trick.

async function sendHeartbeatList(socket, monitorID, toUser = false, overwrite = false) {
    let list = await R.getAll(`
        SELECT * FROM heartbeat
        WHERE monitor_id = ?
        ORDER BY time DESC
        LIMIT 100
    `, [
        monitorID,
    ]);

-    let result = list.reverse();
+    let result = R.convertToBeans("heartbeat", list.reverse());

    if (toUser) {
        io.to(socket.userID).emit("heartbeatList", monitorID, result, overwrite);
    } else {
        socket.emit("heartbeatList", monitorID, result, overwrite);
    }
}

[github-actions]

We are clearing up our old help-issues and your issue has been open for 60 days with no activity.
If no comment is made and the stale label is not removed, this issue will be closed in 7 days.