Error Storing Complex DOM Object like VideoTrack (Circular Structure to JSON error)

[alexivaner]

🐞 Describe the bug

I got this error when storing complex objects like for example video track. It is about circular structure to JSON. Is it possible if we can do a persistent store on a complex object like this? Also is it possible to rehydrate every time the store changes? In this case, I do not need to refresh another window every time.

📚 To Reproduce
Use vuex-electron-store library, then commit a complex object to vuex storage for example videoTracks

💡 Expected behavior
We are able to store and access complex object values like video track or another DOM Object

🖼️ Screenshots

Uncaught TypeError: Converting circular structure to JSON
->
starting at object with constructor
'Strophe. Connection'
property
proto
->
object with constructor
'Strophe$2. Websocket'
property
.conn'
closes the circle
at Object.stringify (<anonymous>)
at ElectronStore.Conf. _serialize (index.js?c282:68)
at ElectronStore. write (index.js?c282:361)
at ElectronStore.set store [as store] (index.js?c282:296)
at ElectronStore.st (index.js?c282:189)
at PersistedState.setState(index_js?e628:53)
at eval (index.js?e628:86)
at eval (vuex.esm.js?2f62:472)
at Array. forEach (<anonymous>)
at Store.commit (vuex.esm.js?2f62:472)
at Store.boundCommit [as commit] (vuex.esm.js?2f62:409)
at VueComponent. stompMsgHandler (User. vue?8255:1021)
SockJS.onmessage(/Users/ivanhutomo/DO…js/lib/stomp.js:296/
at SockS. EventTarget.dispatchEvent(eventtarget.js?97a2:51)
at eval (main.js?486c:282)
at Array. forEach (<anonymous>)
at SockS._transportMessage (main.js?486c:280)
at WebSocketTransport.emit (node:events:394)
at WebSocketTransport.ws.onmessage(websocket.js?397f:35)

⚙️ Environment

• Library Version [v1.4.26]
• Electron Version: [v15.3.0]
• OS: [MacOS Monterey 12.3]

📋 Additional context

Add any other context about the problem here.