clone/kvm
1
0
Fork 0
mirror of https://github.com/luckfox-eng29/kvm.git synced 2026-01-18 03:28:19 +01:00
Code Issues Packages Projects Releases Wiki Activity

Improve error handling when RTCPeerConnection throws (#289)

Browse Source 
* fix(WebRTC): improve error handling during peer connection creation and add connection error overlay

* refactor: update peer connection state handling and improve type definitions across components
This commit is contained in:
Adam Shiervani
2025-03-25 14:54:04 +01:00
committed by GitHub
parent 3b711db781
commit a3580b5465
4 changed files with 34 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
ui/src/routes/devices.$id.tsx
View File

@@ -126,7 +126,7 @@ export default function KvmIdRoute() {
const setIsTurnServerInUse = useRTCStore(state => state.setTurnServerInUse);
const peerConnection = useRTCStore(state => state.peerConnection);
const peerConnectionState = useRTCStore(state => state.peerConnectionState);
const setPeerConnectionState = useRTCStore(state => state.setPeerConnectionState);
const setMediaMediaStream = useRTCStore(state => state.setMediaStream);
const setPeerConnection = useRTCStore(state => state.setPeerConnection);
@@ -153,6 +153,7 @@ export default function KvmIdRoute() {
// However, the onconnectionstatechange event doesn't fire when close() is called manually
// So we need to explicitly update our state to maintain consistency
// I don't know why this is happening, but this is the best way I can think of to handle it
// ALSO, this will render the connection error overlay linking to docs
setPeerConnectionState("closed");
},
[peerConnection, setPeerConnectionState],
@@ -255,12 +256,19 @@ export default function KvmIdRoute() {
setStartedConnectingAt(new Date());
setConnectedAt(null);
const pc = new RTCPeerConnection({
// We only use STUN or TURN servers if we're in the cloud
...(isInCloud && iceConfig?.iceServers
? { iceServers: [iceConfig?.iceServers] }
: {}),
});
let pc: RTCPeerConnection;
try {
pc = new RTCPeerConnection({
// We only use STUN or TURN servers if we're in the cloud
...(isInCloud && iceConfig?.iceServers
? { iceServers: [iceConfig?.iceServers] }
: {}),
});
} catch (e) {
console.error(`Error creating peer connection: ${e}`);
closePeerConnection();
return;
}
// Set up event listeners and data channels
pc.onconnectionstatechange = () => {
@@ -296,8 +304,10 @@ export default function KvmIdRoute() {
setPeerConnection(pc);
} catch (e) {
console.error(`Error creating offer: ${e}`);
closePeerConnection();
}
}, [
closePeerConnection,
iceConfig?.iceServers,
sdp,
setDiskChannel,
@@ -315,9 +325,8 @@ export default function KvmIdRoute() {
if (location.pathname.includes("other-session")) return;
// If we're already connected or connecting, we don't need to connect
if (
["connected", "connecting", "new"].includes(peerConnection?.connectionState ?? "")
) {
// We have to use the state from the store, because the peerConnection.connectionState doesnt trigger a value change, if called manually from .close()
if (["connected", "connecting", "new"].includes(peerConnectionState ?? "")) {
return;
}
@@ -331,12 +340,7 @@ export default function KvmIdRoute() {
connectWebRTC();
}, 3000);
return () => clearInterval(interval);
}, [
connectWebRTC,
connectionFailed,
location.pathname,
peerConnection?.connectionState,
]);
}, [connectWebRTC, connectionFailed, location.pathname, peerConnectionState]);
// On boot, if the connection state is undefined, we connect to the WebRTC
useEffect(() => {