Clicking output control throws error in JS console

[novwhisky]

Iris version

3.61.1

Operating system(s) affected

• Windows
• MacOS
• iOS
• Android
• Linux
• Other

Browser(s) affected

• Firefox
• Chrome
• Edge
• Other

What happened?

After upgrading to snapserver 0.26.0 from a mistaken Debian repo install, clicking on the outputs speaker icon causes the Iris UI to go blank and a TypeError to be thrown in the web console when Snapcast is enabled. Refreshing the page will bring the controls back, but AFAICT there's no way to configure outputs as had worked previously. Is this a JSON RPC version issue?

Here's a screen recording of the error

Iris-Snapcast-error.mov

Logs

TypeError: Cannot read properties of undefined (reading 'scheme')
    at A (app.min.js?v=1643875123:79:192392)
    at Wa (app.min.js?v=1643875123:95:57930)
    at bs (app.min.js?v=1643875123:95:104169)
    at uc (app.min.js?v=1643875123:95:96717)
    at sc (app.min.js?v=1643875123:95:96642)
    at Zs (app.min.js?v=1643875123:95:93672)
    at app.min.js?v=1643875123:95:45314
    at t.unstable_runWithPriority (app.min.js?v=1643875123:103:3844)
    at Hi (app.min.js?v=1643875123:95:45023)
    at Gi (app.min.js?v=1643875123:95:45259)

[bendschs]

i get a black screen when i tap on outputs on latest IOS in safari.

[novwhisky]

I was able to go deeper into debugging Iris by going to "Settings", clicking "<> Debug" in the top-right corner, enabling "Test mode", checking "Log actions" and reloading Iris. That turned on verbose console output and allowed me to better inspect the React/Redux componentry.

Looks like this was an issue with orphaned snapcast client entries, possibly from prior to upgrading snapserver. The web console will log a persist/REHYDRATE action object with key: 'snapcast'. If you expand payload.clients there's probably a lot of random hex strings where connected: false. I noted down a list of all these IDs and used the JSON-RPC to delete each them one-by-one, i.e.

$ telnet localhost 1705

> {"id":2,"jsonrpc":"2.0","method":"Server.DeleteClient","params":{"id":"target-id-to-delete-1"}}
> {"id":2,"jsonrpc":"2.0","method":"Server.DeleteClient","params":{"id":"target-id-to-delete-2"}}
> {"id":2,"jsonrpc":"2.0","method":"Server.DeleteClient","params":{"id":"target-id-to-delete-3"}}

Successful requests will respond with a large client object. I also added a meaningful --hostID name argument to all of my snapclients in /etc/default/snapclient (NOT the snapcast server) and restarted so I can distingush them more easily.

Reloading Iris after that I can now control Snapcast by clicking the speaker icon again. For @jaedb I would recommend using componentDidCatch around the OutputControl component to prevent the entire app from unmounting in scenarios like this. Also a way to delete groups from web client UI would be helpful.

[jaedb]

@novwhisky awesome sleuthing - nice work. It would be nice to more gracefully handle historical clients, but your suggestion for a ErrorBoundary is a great idea in the meantime.

[bendschs]

would also be nice, to add a button for cleaning up old disconnected clients.

@novwhisky: thx, i was able to manually clean my list, now the blackscreen-error when tapping devices on ios and macos is gone.

cheers
bendsch

[novwhisky]

Thanks @jaedb 😁 . I see you have error boundaries already implemented elsewhere, are you interested in me opening a PR for this?