From 428b4b7f581f20040e8d0dd640573509bf37a73c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ant=C3=B4nio=20Cardoso?= <joao.maker@gmail.com>
Date: Sat, 25 Jul 2026 11:28:46 -0300
Subject: [PATCH] frontend: health: Discard tray MAVLink listeners on destroy

Store HEARTBEAT/GPS listeners with markRaw and discard them in
beforeDestroy so remounts do not stack callbacks on shared endpoints.
---
 .../src/components/health/GpsTrayMenu.vue     | 42 ++++++++++++-------
 .../src/components/health/HealthTrayMenu.vue  | 10 +++--
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/core/frontend/src/components/health/GpsTrayMenu.vue b/core/frontend/src/components/health/GpsTrayMenu.vue
index 3cfd2d30b8..df20392165 100644
--- a/core/frontend/src/components/health/GpsTrayMenu.vue
+++ b/core/frontend/src/components/health/GpsTrayMenu.vue
@@ -78,9 +78,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { markRaw } from 'vue'
 
 import mavlink2rest from '@/libs/MAVLink2Rest'
+import Listener from '@/libs/MAVLink2Rest/Listener'
 import { GpsFixType } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
 import {
   GlobalPositionInt,
@@ -105,6 +106,7 @@ export default Vue.extend({
       gps_detected: false,
       global_position_int: undefined as undefined | GlobalPositionInt,
       gps_raw_int: undefined as undefined | GpsRawInt,
+      listeners: [] as Listener[],
     }
   },
   computed: {
@@ -266,25 +268,33 @@ export default Vue.extend({
     },
   },
   mounted() {
-    mavlink2rest.startListening('GLOBAL_POSITION_INT').setCallback((message) => {
-      if (message?.header.system_id !== autopilot_data.system_id || message?.header.component_id !== 1) {
-        return
-      }
+    // markRaw: Listener → Endpoint.latestData must not be deep-observed per GPS frame.
+    this.listeners.push(
+      markRaw(mavlink2rest.startListening('GLOBAL_POSITION_INT').setCallback((message) => {
+        if (message?.header.system_id !== autopilot_data.system_id || message?.header.component_id !== 1) {
+          return
+        }
 
-      this.last_message_date = new Date()
-      this.global_position_int = message?.message as GlobalPositionInt
-    }).setFrequency(0)
+        this.last_message_date = new Date()
+        this.global_position_int = message?.message as GlobalPositionInt
+      }).setFrequency(0)),
+    )
 
     const message_name = this.instance === 1 ? 'GPS_RAW_INT' : 'GPS2_RAW'
-    mavlink2rest.startListening(message_name).setCallback((message) => {
-      if (message?.header.system_id !== autopilot_data.system_id || message?.header.component_id !== 1) {
-        return
-      }
+    this.listeners.push(
+      markRaw(mavlink2rest.startListening(message_name).setCallback((message) => {
+        if (message?.header.system_id !== autopilot_data.system_id || message?.header.component_id !== 1) {
+          return
+        }
 
-      this.last_message_date = new Date()
-      this.gps_raw_int = message?.message as GpsRawInt | Gps2Raw
-      this.gps_detected = this.gps_raw_int?.fix_type?.type !== GpsFixType.GPS_FIX_TYPE_NO_GPS
-    }).setFrequency(0)
+        this.last_message_date = new Date()
+        this.gps_raw_int = message?.message as GpsRawInt | Gps2Raw
+        this.gps_detected = this.gps_raw_int?.fix_type?.type !== GpsFixType.GPS_FIX_TYPE_NO_GPS
+      }).setFrequency(0)),
+    )
+  },
+  beforeDestroy() {
+    this.listeners.forEach((listener) => listener.discard())
   },
 })
 </script>
diff --git a/core/frontend/src/components/health/HealthTrayMenu.vue b/core/frontend/src/components/health/HealthTrayMenu.vue
index a2fe4f330b..a1f1d22e63 100644
--- a/core/frontend/src/components/health/HealthTrayMenu.vue
+++ b/core/frontend/src/components/health/HealthTrayMenu.vue
@@ -134,9 +134,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { markRaw } from 'vue'
 
 import mavlink2rest from '@/libs/MAVLink2Rest'
+import Listener from '@/libs/MAVLink2Rest/Listener'
 import { MavModeFlag, MavType } from '@/libs/MAVLink2Rest/mavlink2rest-ts/messages/mavlink2rest-enum'
 import autopilot_data from '@/store/autopilot'
 import mavlink from '@/store/mavlink'
@@ -153,6 +154,7 @@ export default Vue.extend({
     return {
       time_limit_heartbeat: 3000,
       last_heartbeat_date: new Date(),
+      heartbeat_listener: undefined as Listener | undefined,
     }
   },
   computed: {
@@ -211,7 +213,8 @@ export default Vue.extend({
   },
   mounted() {
     system_information.subscribeSystemInformation(FETCH_TYPES)
-    mavlink2rest.startListening('HEARTBEAT').setCallback((message) => {
+    // markRaw: Listener → Endpoint.latestData must not be deep-observed per HEARTBEAT.
+    this.heartbeat_listener = markRaw(mavlink2rest.startListening('HEARTBEAT').setCallback((message) => {
       if (!this.is_vehicle(message?.message.mavtype.type) || message?.header.component_id !== 1) {
         return
       }
@@ -219,10 +222,11 @@ export default Vue.extend({
       autopilot_data.setAutopilotType(message?.message.autopilot.type)
       autopilot_data.setVehicleArmed(Boolean(message?.message.base_mode.bits & MavModeFlag.MAV_MODE_FLAG_SAFETY_ARMED))
       this.last_heartbeat_date = new Date()
-    }).setFrequency(0)
+    }).setFrequency(0))
   },
   beforeDestroy() {
     system_information.unsubscribeSystemInformation(FETCH_TYPES)
+    this.heartbeat_listener?.discard()
   },
   methods: {
     heartbeat_age(): number {