[tech-debt 2/5 medium-low risk] Fix leaked listeners and unhandled rejections

packages/common/src/utils/uid.ts

@@ -147,19 +147,13 @@ export const getNumericIdFromUid = (uid: string) =>
 
 export const uuid = () => {
   // https://stackoverflow.com/questions/105034/create-guid-uuid-in-javascript/873856#873856
-  const s = []
+  const s: string[] = []
   const hexDigits = '0123456789abcdef'
-  // all the ts-ignores are needed so the mobile package types things correctly
-  // remove when upgrading to latest typescript
   for (let i = 0; i < 36; i++) {
-    // @ts-ignore
     s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1)
   }
-  // @ts-ignore
   s[14] = '4' // bits 12-15 of the time_hi_and_version field to 0010
-  // @ts-ignore
-  s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
-  // @ts-ignore
+  s[19] = hexDigits.substr((parseInt(s[19], 16) & 0x3) | 0x8, 1) // bits 6-7 of the clock_seq_hi_and_reserved to 01
   s[8] = s[13] = s[18] = s[23] = '-'
 
   const uuid = s.join('')

packages/harmony/src/components/modal/Modal.tsx

@@ -228,22 +228,21 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(
   }, [isOpenProp, modalState])
 
   useEffect(() => {
-    if (isOpen) {
-      if (bgModal) {
-        bgModal.classList.add('bgModalVisible')
-      }
+    if (!isOpen) {
+      if (bgModal) bgModal.classList.remove('bgModalVisible')
+      return
+    }
 
-      // Need to prevent safari iOS bounce
-      // overscroll effect by intercepting
-      // touchmove events.
-      if (modalRoot) modalRoot.addEventListener('touchmove', onTouchMove)
-      return () => {
-        if (bgModal) bgModal.classList.remove('bgModalVisible')
-      }
+    if (bgModal) bgModal.classList.add('bgModalVisible')
+
+    // Need to prevent safari iOS bounce
+    // overscroll effect by intercepting
+    // touchmove events.
+    if (modalRoot) modalRoot.addEventListener('touchmove', onTouchMove)
+    return () => {
+      if (bgModal) bgModal.classList.remove('bgModalVisible')
+      if (modalRoot) modalRoot.removeEventListener('touchmove', onTouchMove)
     }
-    if (bgModal) bgModal.classList.remove('bgModalVisible')
-    if (modalRoot) modalRoot.removeEventListener('touchmove', onTouchMove)
-    return () => {}
   }, [isOpen, bgModal, onTouchMove, modalRoot])
 
   const transition = useTransition(isOpenProp, null, {

packages/harmony/src/components/scrubber/Slider.tsx

@@ -228,6 +228,24 @@ export const Slider = ({
     setDragPercentTouch(e)
   }
 
+  // Detach any in-progress drag listeners if unmounted mid-drag
+  useEffect(() => {
+    return () => {
+      if (mouseMoveRef.current) {
+        document.removeEventListener('mousemove', mouseMoveRef.current)
+      }
+      if (mouseUpRef.current) {
+        document.removeEventListener('mouseup', mouseUpRef.current)
+      }
+      if (touchMoveRef.current) {
+        document.removeEventListener('touchmove', touchMoveRef.current)
+      }
+      if (touchEndRef.current) {
+        document.removeEventListener('touchend', touchEndRef.current)
+      }
+    }
+  }, [])
+
   // Watch interactions to the scrubber and call to animate
   useEffect(() => {
     if (!dragPercent.current) {

packages/mobile/src/components/audio/Airplay.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useRef } from 'react'
 
 import { castActions } from '@audius/common/store'
+import type { EmitterSubscription } from 'react-native'
 import {
   requireNativeComponent,
   NativeEventEmitter,
@@ -36,7 +37,7 @@ export const useAirplay = () => {
  * codebase.
  */
 const Airplay = () => {
-  const listenerRef = useRef<any>(null)
+  const listenerRef = useRef<EmitterSubscription | null>(null)
   const dispatch = useDispatch()
 
   useEffect(() => {
@@ -68,7 +69,7 @@ const Airplay = () => {
     )
 
     return () => {
-      listenerRef.current?.stop?.()
+      listenerRef.current?.remove()
     }
   }, [listenerRef, dispatch])
 

packages/mobile/src/components/audio/GoogleCast.tsx

@@ -18,7 +18,7 @@ import {
 } from 'react-native-google-cast'
 import TrackPlayer, { Event } from 'react-native-track-player'
 import { useDispatch, useSelector } from 'react-redux'
-import { useAsync, usePrevious } from 'react-use'
+import { usePrevious } from 'react-use'
 
 const { setIsCasting } = castActions
 const { getPlaying, getSeek, getCounter } = playbackSelectors
@@ -118,16 +118,23 @@ export const useChromecast = () => {
   }, [prevTrack, track, counter, internalCounter, setInternalCounter])
 
   // Load media when the cast connects
-  useAsync(async () => {
-    if (castState === CastState.CONNECTED) {
+  useEffect(() => {
+    if (castState !== CastState.CONNECTED) return
+    let cancelled = false
+    let activeTrackSubscription:
+      | ReturnType<typeof TrackPlayer.addEventListener>
+      | undefined
+
+    const load = async () => {
       const { position: currentPosition } = await TrackPlayer.getProgress()
       const currentPlaying = await TrackPlayer.getActiveTrack()
+      if (cancelled) return
       if (currentPlaying) {
         loadCast(track, currentPosition, currentPlaying?.url)
       } else {
         // If nothing is currently playing, listen for something to start
         // playing and then load it to cast.
-        TrackPlayer.addEventListener(
+        activeTrackSubscription = TrackPlayer.addEventListener(
           Event.PlaybackActiveTrackChanged,
           async () => {
             const { position: currentPosition } =
@@ -138,6 +145,14 @@ export const useChromecast = () => {
         )
       }
     }
+    load().catch((e) => {
+      console.error('Failed to load media onto cast device', e)
+    })
+
+    return () => {
+      cancelled = true
+      activeTrackSubscription?.remove()
+    }
   }, [castState, track, loadCast])
 
   // Play & pause the cast device

packages/mobile/src/screens/chat-screen/ChatScreen.tsx

@@ -220,7 +220,7 @@ const useGetLatestMessages = (
 
     // Remove listener on unmount
     return () => handle.remove()
-  })
+  }, [fetchLatestMessagesCallback])
 }
 
 const ChatScreenContent = () => {

packages/mobile/src/screens/form-screen/useRevertOnCancel.ts

@@ -13,14 +13,11 @@ export const useRevertOnCancel = (active?: boolean) => {
 
   useEffect(() => {
     if (!active || !initialValues) return
-    const listener = navigation.addListener('beforeRemove', ({ data }) => {
+    // addListener returns an unsubscribe function (not the listener itself)
+    return navigation.addListener('beforeRemove', ({ data }) => {
       if (data.action.type === 'POP') {
         setValues(initialValues)
       }
     })
-
-    return () => {
-      navigation.removeListener('beforeRemove', listener)
-    }
   }, [navigation, initialValues, setValues, active])
 }

packages/mobile/src/services/sdk/audius-sdk.ts

@@ -60,7 +60,7 @@ const initSdk = async () => {
 export const audiusSdk = async () => {
   if (inProgress) {
     await new Promise((resolve) => {
-      sdkEventEmitter.addListener(SDK_LOADED_EVENT_NAME, resolve)
+      sdkEventEmitter.once(SDK_LOADED_EVENT_NAME, resolve)
     })
     return sdkInstance
   } else if (!sdkInstance) {

packages/web/src/components/stripe-on-ramp-modal/StripeOnRampModal.tsx

@@ -38,6 +38,9 @@ const MountStripeSession = ({ session }: { session: OnrampSession }) => {
     }
     session.mount('#stripe-onramp-modal')
     session.addEventListener('onramp_session_updated', handleSessionUpdate)
+    return () => {
+      session.removeEventListener('onramp_session_updated', handleSessionUpdate)
+    }
   }, [session, handleSessionUpdate])
 
   return (
@@ -78,7 +81,11 @@ export const StripeOnRampModal = () => {
           clientSecret: stripeClientSecret
         })
       }
-      initializeStripeSession().then(setSession)
+      initializeStripeSession()
+        .then(setSession)
+        .catch((e) => {
+          console.error('Failed to initialize Stripe onramp session', e)
+        })
     }
   }, [isOpen, stripeClientSecret])
 

packages/web/src/utils/sagaPollingDaemons.ts

@@ -21,33 +21,36 @@ export function* foregroundPollingDaemon(
   const isNativeMobile = yield* getContext('isNativeMobile')
 
   let isBrowserInBackground = false
+  const handleVisibilityChange = () => {
+    isBrowserInBackground = document.hidden
+  }
   if (!isNativeMobile) {
-    document.addEventListener(
-      'visibilitychange',
-      () => {
-        if (document.hidden) {
-          isBrowserInBackground = true
-        } else {
-          isBrowserInBackground = false
-        }
-      },
-      false
-    )
+    document.addEventListener('visibilitychange', handleVisibilityChange, false)
   }
 
-  while (true) {
-    if (!isBrowserInBackground || isElectron() || isNativeMobile) {
-      yield put(action)
-    }
-    if (customDelayTimeConfig && !isNativeMobile) {
-      const currentRoute: string = yield select(getLocationPathname)
-      if (customDelayTimeConfig[currentRoute]) {
-        yield delay(customDelayTimeConfig[currentRoute])
+  try {
+    while (true) {
+      if (!isBrowserInBackground || isElectron() || isNativeMobile) {
+        yield put(action)
+      }
+      if (customDelayTimeConfig && !isNativeMobile) {
+        const currentRoute: string = yield select(getLocationPathname)
+        if (customDelayTimeConfig[currentRoute]) {
+          yield delay(customDelayTimeConfig[currentRoute])
+        } else {
+          yield delay(defaultDelayTimeMs)
+        }
       } else {
         yield delay(defaultDelayTimeMs)
       }
-    } else {
-      yield delay(defaultDelayTimeMs)
+    }
+  } finally {
+    if (!isNativeMobile) {
+      document.removeEventListener(
+        'visibilitychange',
+        handleVisibilityChange,
+        false
+      )
     }
   }
 }