Added error handling for peer errors when socket is fine

src/docs/faq/connection.md

@@ -17,3 +17,7 @@ The good news is that Safari will still work if the two devices are connected to
 ### WebRTC not supported.
 
 Owlbear Rodeo uses WebRTC to communicate between players. Ensure your browser supports WebRTC. A list of supported browsers can be found [here](https://caniuse.com/#feat=rtcpeerconnection).
+
+### Unable to connect to party.
+
+This can happen when your internet connection is stable but a peer to peer connection wasn't able to be established between party members. Refreshing the page can help in fixing this.

src/helpers/Peer.js

@@ -46,16 +46,19 @@ class Peer extends SimplePeer {
   }
 
   send(data) {
-    const packedData = encode(data);
-
-    if (packedData.byteLength > MAX_BUFFER_SIZE) {
-      const chunks = this.chunk(packedData);
-      for (let chunk of chunks) {
-        super.send(encode(chunk));
+    try {
+      const packedData = encode(data);
+      if (packedData.byteLength > MAX_BUFFER_SIZE) {
+        const chunks = this.chunk(packedData);
+        for (let chunk of chunks) {
+          super.send(encode(chunk));
+        }
+        return;
+      } else {
+        super.send(packedData);
       }
-      return;
-    } else {
-      super.send(packedData);
+    } catch (error) {
+      console.error(error);
     }
   }
 

src/helpers/useSession.js

@@ -143,16 +143,19 @@ function useSession(
   // Setup event listeners for the socket
   useEffect(() => {
     function addPeer(id, initiator, sync) {
-      const connection = new Peer({
-        initiator,
-        trickle: true,
-        config: { iceServers },
-      });
-
-      setPeers((prevPeers) => ({
-        ...prevPeers,
-        [id]: { id, connection, initiator, sync },
-      }));
+      try {
+        const connection = new Peer({
+          initiator,
+          trickle: true,
+          config: { iceServers },
+        });
+        setPeers((prevPeers) => ({
+          ...prevPeers,
+          [id]: { id, connection, initiator, sync },
+        }));
+      } catch (error) {
+        onPeerError && onPeerError({ error });
+      }
     }
 
     function handlePartyMemberJoined(id) {
@@ -214,7 +217,7 @@ function useSession(
       socket.off("signal", handleSignal);
       socket.off("auth error", handleAuthError);
     };
-  }, [peers, setAuthenticationStatus, iceServers, joinParty]);
+  }, [peers, setAuthenticationStatus, iceServers, joinParty, onPeerError]);
 
   return { peers, socket, connected };
 }

src/routes/Game.js

@@ -423,6 +423,8 @@ function Game() {
     console.error(error.code);
     if (error.code === "ERR_WEBRTC_SUPPORT") {
       setPeerError("WebRTC not supported");
+    } else if (error.code === "ERR_CREATE_OFFER") {
+      setPeerError("Unable to connect to party");
     }
   }