Removed too verbose error messages in UI

Updated FAQ
Handled connection closure on refresh

src/helpers/useSession.js

@@ -21,6 +21,20 @@ function useSession(
 
   const [peers, setPeers] = useState({});
 
+  // Signal connected peers of a closure on refresh
+  useEffect(() => {
+    function handleUnload() {
+      for (let peer of Object.values(peers)) {
+        peer.connection.send({ id: "close" });
+      }
+    }
+    window.addEventListener("beforeunload", handleUnload);
+
+    return () => {
+      window.removeEventListener("beforeunload", handleUnload);
+    };
+  }, [peers]);
+
   // Setup event listeners for peers
   useEffect(() => {
     let peerEvents = [];
@@ -37,6 +51,10 @@ function useSession(
       }
 
       function handleDataComplete(data) {
+        if (data.id === "close") {
+          // Close connection when signaled to close
+          peer.connection.destroy();
+        }
         onPeerData && onPeerData({ peer, data });
       }
 
@@ -53,7 +71,6 @@ function useSession(
 
       function handleError(error) {
         onPeerError && onPeerError({ peer, error });
-        console.error(error);
       }
 
       peer.connection.on("signal", handleSignal);

src/routes/FAQ.js

@@ -62,10 +62,10 @@ function FAQ() {
           on the Mozilla Developer Network.
         </Text>
         <Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}>
-          Connection Failed
+          Connection
         </Text>
         <Text my={1} variant="heading" as="h3">
-          Ice connection failed / Connection failed.
+          Connection failure.
         </Text>
         <Text variant="body2" as="p">
           If you are getting a Connection failed error when trying to connect to
@@ -120,6 +120,14 @@ function FAQ() {
           </Link>
           .
         </Text>
+        <Text my={1} variant="heading" as="h3">
+          WebRTC not supported.
+        </Text>
+        <Text variant="body2" as="p">
+          Owlbear Rodeo uses WebRTC to communicate between players. Ensure your
+          browser supports WebRTC. A list of supported browsers can be found{" "}
+          <Link href="https://caniuse.com/#feat=rtcpeerconnection">here</Link>.
+        </Text>
       </Flex>
       <Footer />
     </Flex>

src/routes/Game.js

@@ -122,11 +122,22 @@ function Game() {
 
   const [peerError, setPeerError] = useState(null);
   function handlePeerError({ error, peer }) {
-    setPeerError(
-      `${
-        peer.id === socket.id ? "" : `(${partyNicknames[peer.id] || "Unknown"})`
-      } ${error.message || "Unknown Error Occurred."}`
-    );
+    console.error(error.code);
+    if (
+      error.code === "ERR_ICE_CONNECTION_FAILURE" ||
+      error.code === "ERR_CONNECTION_FAILURE"
+    ) {
+      setPeerError(
+        `${
+          peer.id === socket.id
+            ? ""
+            : `(${partyNicknames[peer.id] || "Unknown"})`
+        } Connection failure`
+      );
+    }
+    if (error.code === "ERR_WEBRTC_SUPPORT") {
+      setPeerError("WebRTC not supported");
+    }
   }
 
   function handlePeerTrackAdded({ peer, stream: remoteStream }) {