FIX - clone custom app frame messages

frontend/src/components/CustomAppFrame.vue

@@ -33,6 +33,7 @@ import {
   getLbPhoneCallbackResource,
   usesLbPhoneHostRuntime,
 } from '@/utils/lbPhoneAppBridge'
+import { cloneJsonData } from '@/utils/clone'
 import { nuiCall } from '@/utils/nui'
 
 const props = defineProps<{
@@ -150,7 +151,7 @@ function postToFrame(payload: unknown): boolean {
   if (!target) return false
 
   try {
-    target.postMessage(payload, postMessageOrigin.value)
+    target.postMessage(cloneJsonData(payload), postMessageOrigin.value)
     return true
   } catch (error) {
     console.error(`[Custom apps] Could not message ${props.app.id}.`, error)

frontend/src/utils/clone.test.ts

@@ -0,0 +1,20 @@
+import { reactive } from 'vue'
+import { describe, expect, it } from 'vitest'
+
+import { cloneJsonData } from '@/utils/clone'
+
+describe('JSON data cloning', () => {
+  it('turns reactive custom app payloads into structured-cloneable data', () => {
+    const payload = reactive({
+      action: 'setSpeedCameras',
+      data: [{ id: 1, label: 'Alta Street' }],
+    })
+
+    expect(() => structuredClone(payload)).toThrow()
+
+    const cloned = cloneJsonData(payload)
+
+    expect(cloned).toEqual(payload)
+    expect(() => structuredClone(cloned)).not.toThrow()
+  })
+})