Navigation Not Blocked When Peer Active

[dallen4]

Description

Currently, the beforeunload event is used to block navigation away from a /drop or /grab page when an active peer connection is open. This is to avoid weird UX and dropped or dangling WebRTC and WebSocket connections.

However, because of how Next.js navigates within its framework, it does not trigger the beforeunload event when navigating and thus doesn't block navigation or cleanup peer connections before leaving the page.

Solution

A blocking approaching using an event listener on Next.js' Router should be able to provide the desired functionality.

[dallen4]

Comment discussing a way to intercept events and block navigation with Next.js' Router: vercel/next.js#2694 (comment)