🐞 Unhandled Runtime Error: There is no timeout scheduled with the given id "21"

[thechee]

What happened?

We currently get this error when refreshing the browser.
Uncaught Error: There is no timeout scheduled with the given id "14". at Worker.eval (index.esm.js:1:3217)

Seems similar to #337

Here's our implementation

"use client"
import * as React from "react"
import {
  DEFAULT_EVENTS,
  IdleTimerProvider as ReactIdleTimer,
  useIdleTimer,
  workerTimers,
} from "react-idle-timer"
import { useAuth } from "@denari/nextjs/argentari/state"
import { useParams, usePathname } from "next/navigation"
import { createUserActivity } from "@denari/nextjs/argentari/actions"

const IDLE_TIMEOUT =
  parseInt(process.env.NEXT_PUBLIC_USER_ACTIVITY_TIMEOUT_MS || "", 10) || 5_000

export function IdleTimerProvider({ children }: { children: React.ReactNode }) {
  const { currentUser } = useAuth()
  const path = usePathname()
  const { projectId } = useParams()
  const previousPath = React.useRef<string | null>(null)
  const previousProjectId = React.useRef<string | null>(null)
  const isDisabled = process.env.NODE_ENV === "development"

  const { getActiveTime, reset, pause, isIdle } = useIdleTimer({
    timeout: IDLE_TIMEOUT,
    timers: workerTimers,
    onActive: () => reset(),
    onIdle: () => handleActivity("idle"),
    events: DEFAULT_EVENTS.filter((event) => event !== "visibilitychange"),
  })

  const handleActivity = React.useCallback(
    async (action: "idle" | "page change") => {
      if (isDisabled) return
      const active_time = getActiveTime()
      const project_id = Array.isArray(projectId) ? projectId[0] : projectId

      if (action === "page change") {
        await createUserActivity({
          user_id: currentUser?.id || "",
          project_id: previousProjectId.current,
          path: previousPath.current || path,
          active_time,
        })
      }
      if (action === "idle") {
        await createUserActivity({
          user_id: currentUser?.id || "",
          project_id,
          path,
          active_time,
        })
      }
    },
    [currentUser, path, getActiveTime, projectId, isDisabled]
  )

  const handleVisibilityChange = React.useCallback(() => {
    if (isDisabled) return

    if (currentUser) {
      if (document.visibilityState === "hidden" && !isIdle()) {
        const active_time = getActiveTime()
        const project_id = Array.isArray(projectId) ? projectId[0] : projectId
        const data = JSON.stringify({
          user_id: currentUser.id,
          project_id,
          path,
          active_time,
        })
        navigator.sendBeacon("/api/beacon", data)
        pause()
      } else if (document.visibilityState === "visible") {
        reset()
      }
    }
  }, [
    currentUser,
    path,
    getActiveTime,
    projectId,
    pause,
    reset,
    isIdle,
    isDisabled,
  ])

  // records all path changes
  React.useEffect(() => {
    handleActivity("page change")
    reset()
    previousPath.current = path
    previousProjectId.current = Array.isArray(projectId)
      ? projectId[0]
      : projectId
  }, [handleActivity, path, reset, projectId])

  // event listener for visibility change
  React.useEffect(() => {
    document.addEventListener("visibilitychange", handleVisibilityChange)
    return () => {
      document.removeEventListener("visibilitychange", handleVisibilityChange)
    }
  }, [handleVisibilityChange])

  if (!currentUser) return <>{children}</>

  return <ReactIdleTimer>{children}</ReactIdleTimer>
}

Reproduction Steps

1. Login to app
2. Refresh the page
3. Get uncaught error
...

Module Version

5.7.2

What browsers are you seeing the problem on? Select all that apply.

Chrome

What devices are you seeing the problem on?

Desktop

Verification

• I have checked for existing closed issues and discussions.

[NoahCardoza]

Update (12/08/25)

It appears my changes didn't eradicate the issue. BugSnag has picked it up in the wild. Interestingly, it seem to only happen once per user. I'm wondering if it could be some race condition when initialize the worker?

---

Not sure if this is any help but I found that when two useIdleTimeout hooks were being called in different places, it lead to the issue. There was also some code spreading timeout into the config if it was non-zero. Instead, I passed disabled: true, timeout: 0 and it seems to have fixed it.

Before

const idleTimerDisabled = !serviceWorkerEnable || !serviceWorkerUpdateIsAvailable || idleTimerTimeout < 0;
  const onIdle = useCallback(() => {
    if (!idleTimerDisabled) {
      activateUpdatedAppRef.current?.('idle');
    }
  }, [idleTimerDisabled]);

  useIdleTimer({
    ...(idleTimerTimeout >= 0 && { timeout: idleTimerTimeout }),
    onIdle,
    stopOnIdle: true,
  });

After

  const idleTimerDisabled = !serviceWorkerEnable || !serviceWorkerUpdateIsAvailable || idleTimerTimeout < 0;
  const onIdle = () => {
    activateUpdatedAppRef.current?.('idle');
  };

  useIdleTimer({
    disabled: idleTimerDisabled,
    timeout: idleTimerTimeout,
    onIdle,
    stopOnIdle: true,
  });