Removed too verbose error messages in UI

Updated FAQ
Handled connection closure on refresh
This commit is contained in:
Mitchell McCaffrey 2020-04-14 11:49:45 +10:00
parent 7d046c0a1a
commit 021d794d67
3 changed files with 44 additions and 8 deletions

View File

@ -21,6 +21,20 @@ function useSession(
const [peers, setPeers] = useState({}); 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 // Setup event listeners for peers
useEffect(() => { useEffect(() => {
let peerEvents = []; let peerEvents = [];
@ -37,6 +51,10 @@ function useSession(
} }
function handleDataComplete(data) { function handleDataComplete(data) {
if (data.id === "close") {
// Close connection when signaled to close
peer.connection.destroy();
}
onPeerData && onPeerData({ peer, data }); onPeerData && onPeerData({ peer, data });
} }
@ -53,7 +71,6 @@ function useSession(
function handleError(error) { function handleError(error) {
onPeerError && onPeerError({ peer, error }); onPeerError && onPeerError({ peer, error });
console.error(error);
} }
peer.connection.on("signal", handleSignal); peer.connection.on("signal", handleSignal);

View File

@ -62,10 +62,10 @@ function FAQ() {
on the Mozilla Developer Network. on the Mozilla Developer Network.
</Text> </Text>
<Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}> <Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}>
Connection Failed Connection
</Text> </Text>
<Text my={1} variant="heading" as="h3"> <Text my={1} variant="heading" as="h3">
Ice connection failed / Connection failed. Connection failure.
</Text> </Text>
<Text variant="body2" as="p"> <Text variant="body2" as="p">
If you are getting a Connection failed error when trying to connect to If you are getting a Connection failed error when trying to connect to
@ -120,6 +120,14 @@ function FAQ() {
</Link> </Link>
. .
</Text> </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> </Flex>
<Footer /> <Footer />
</Flex> </Flex>

View File

@ -122,11 +122,22 @@ function Game() {
const [peerError, setPeerError] = useState(null); const [peerError, setPeerError] = useState(null);
function handlePeerError({ error, peer }) { function handlePeerError({ error, peer }) {
setPeerError( console.error(error.code);
`${ if (
peer.id === socket.id ? "" : `(${partyNicknames[peer.id] || "Unknown"})` error.code === "ERR_ICE_CONNECTION_FAILURE" ||
} ${error.message || "Unknown Error Occurred."}` 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 }) { function handlePeerTrackAdded({ peer, stream: remoteStream }) {