开源的用户管理解决方案,自带前端组件和管理后台。
Go to file
Armaan Jain eba479b7cc
Fix session replay playback freezing the page (#1727)
Fixes the session replay player making the page laggy/unresponsive
during playback. Four compounding main-thread bottlenecks:

1. **Mini-tab re-seek every tick (main freeze cause).** Every 200ms TICK
emitted `sync_mini_tabs`, which calls `replayer.pause(offset)` on every
non-active tab. In rrweb v1 that's a full synchronous seek (rebuild from
last FullSnapshot + fast-forward all events), easily 100ms–1s+ of
blocking work per tab, 5×/sec. Now throttled to
`MINI_TAB_SYNC_INTERVAL_MS` (2s) in the state machine, reset on SEEK so
seeks re-sync promptly, and the executor skips tabs that aren't actually
rendered as mini thumbnails.

2. **Full-page re-render every 200ms.** Every dispatch force-rendered
the whole page component. Added `areStatesRenderEquivalent()` —
dispatches that only change playback bookkeeping fields
(`currentGlobalTimeMsForUi`, etc.) skip the React re-render; mini-tab
visibility is refreshed at the throttled sync cadence instead.

3. **Timeline re-rendered at 60fps.** The transport bar rAF loop used
`setState(currentTime)`, re-rendering the whole bar including up to 2000
marker divs every frame. Current time / progress are now written
directly to DOM refs, and the markers lane is extracted into a memoized
`TimelineMarkersLane`.

4. **Synchronous `addEvent` floods.** Background chunk processing now
yields to the event loop between chunks so feeding large batches into
live replayers doesn't block playback.

Added machine tests for the sync throttle, seek re-sync, and render
equivalence (117 passing).

Link to Devin session:
https://app.devin.ai/sessions/7d53fb70217d4ebaa77b9dbac2ba1f54
Requested by: @Developing-Gamer

<!-- This is an auto-generated description by cubic. -->
---
## Summary by cubic
Fixes session replay playback freezing by removing main-thread
bottlenecks in the player and timeline. Playback stays smooth and
responsive; background loads finish faster in hidden tabs.

- **Bug Fixes**
- Throttled mini-tab syncing to `MINI_TAB_SYNC_INTERVAL_MS` (2s);
re-syncs on the next tick after seeks and when buffering resumes
(regardless of page age); skips non-rendered tabs to avoid `rrweb` full
seeks; refreshes mini-tab visibility on the throttled cadence.
- Skipped React re-renders for playback bookkeeping via
`areStatesRenderEquivalent`.
- Stopped 60fps timeline re-renders by writing time/progress to DOM refs
and memoizing the markers lane.
- Yield between event chunks only when the tab is visible; skip yields
in hidden tabs to avoid clamped timers and speed up background loads.
- Added tests for sync throttling, post-seek re-sync (immune to page
age), and render-equivalence.

<sup>Written for commit 4abc80c5f7.
Summary will update on new commits.</sup>

<a
href="https://cubic.dev/pr/hexclave/hexclave/pull/1727?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>

<!-- End of auto-generated description by cubic. -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Performance / UX**
* Session replay playback during rapid timeline changes is smoother,
with fewer unnecessary UI refreshes.
* Timeline progress/time updates are more immediate, and event markers
render more efficiently.
* **Bug Fixes**
* Mini-tab syncing is now throttled while playing and correctly re-syncs
after seeking to keep thumbnails accurate.
* Event/chunk loading now yields between batches to reduce main-thread
blocking.
* **Tests**
* Expanded session replay mini-tab sync tests to cover throttling and
post-seek resynchronization.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: armaan <armaan@stack-auth.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
2026-07-05 21:18:16 -07:00
.agents/skills feat(hexclave): PR 2 — visible rebrand (Hexclave brand goes public) (#1481) 2026-05-26 19:18:20 -07:00
.changeset Disable changesets changelogs 2026-01-12 15:21:56 -08:00
.claude refactor: migrate config parsing from Babel AST to jiti (#1661) 2026-06-29 10:25:11 -07:00
.cursor Update pre-push.md 2026-06-04 10:44:39 -07:00
.devcontainer feat(hexclave): PR 2 — visible rebrand (Hexclave brand goes public) (#1481) 2026-05-26 19:18:20 -07:00
.github [Feat] [Refactor]: Implement Bulldozer JS (#1700) 2026-07-02 10:09:46 -07:00
.vscode Make it clear there are more SDK packages 2026-06-16 10:37:58 -07:00
apps Fix session replay playback freezing the page (#1727) 2026-07-05 21:18:16 -07:00
configs Use tsdown -W --watch (workspace mode) for dev builds (#1689) 2026-06-30 15:40:08 -07:00
docker Base64 self-hosted project key initialization 2026-06-30 10:58:40 -07:00
docs chore: update package versions 2026-07-06 03:17:30 +00:00
docs-mintlify chore: update package versions 2026-07-06 03:17:30 +00:00
examples chore: update package versions 2026-07-06 03:17:30 +00:00
packages Gate usage limit banners behind HEXCLAVE_DISABLE_PLAN_LIMITS (#1728) 2026-07-05 21:17:21 -07:00
patches Fix MS OAuth (#457) 2025-02-21 19:39:22 +01:00
scripts [codex] Add skill context to Ask Hexclave (#1605) 2026-06-18 11:40:02 -07:00
sdks chore: update package versions 2026-07-06 03:17:30 +00:00
skills/hexclave feat(hexclave): PR 5 — internal symbol/path/package renames + brand strings (#1547) 2026-06-03 18:57:09 -07:00
.dockerignore feat(hexclave): PR 5 — internal symbol/path/package renames + brand strings (#1547) 2026-06-03 18:57:09 -07:00
.gitignore [Feat] [Refactor]: Implement Bulldozer JS (#1700) 2026-07-02 10:09:46 -07:00
.gitmodules Update GitHub URL 2026-05-19 10:27:53 -07:00
AGENTS.md Update AGENTS.md 2026-06-30 11:06:32 -07:00
CHANGELOG.md Add 6/19/26 changelog entry (#1629) 2026-06-19 17:20:19 -07:00
CLAUDE.md feat(hexclave): PR 2 — visible rebrand (Hexclave brand goes public) (#1481) 2026-05-26 19:18:20 -07:00
CONTRIBUTING.md Rename port prefix envvar 2026-05-27 18:09:52 -07:00
LICENSE feat(hexclave): PR 2 — visible rebrand (Hexclave brand goes public) (#1481) 2026-05-26 19:18:20 -07:00
package.json [Feat] [Refactor]: Implement Bulldozer JS (#1700) 2026-07-02 10:09:46 -07:00
pnpm-lock.yaml [Feat] [Refactor]: Implement Bulldozer JS (#1700) 2026-07-02 10:09:46 -07:00
pnpm-workspace.yaml [Feat] [Refactor]: Implement Bulldozer JS (#1700) 2026-07-02 10:09:46 -07:00
README.md Add "For AI agents" section to README (#1563) 2026-06-05 17:01:13 -07:00
skills-lock.json Auth app redesign (#1367) 2026-05-19 23:03:46 -07:00
turbo.json feat(cli): fetch RDE dashboard from GitHub Releases instead of bundling (#1682) 2026-06-30 16:12:13 -07:00
vitest.shared.ts Fix tests 2026-02-17 19:57:08 -08:00
vitest.workspace.ts Hosted components (#1229) 2026-03-10 11:29:05 -07:00

Hexclave

Hexclave

The user infrastructure platform.

Hexclave handles everything around your users: authentication, teams, payments, emails, analytics, and much more. Start in minutes on the hosted cloud. Your data is always yours to export and self-host.

Website · Docs · Dashboard · Discord

License SDKs Deploy


Where Hexclave fits in the infrastructure stack

Get started

Setting up Hexclave is one prompt. Paste this into your coding agent of choice:

Read skill.hexclave.com and help me setup hexclave in this project

For AI agents

If you're an AI coding agent, use your web fetch tool or curl the skill documentation for up-to-date integration instructions:

curl -sSL "https://skill.hexclave.com?question=<your-question>&context=<your-context>"

What's included

Hexclave ships as a catalog of apps you switch on as your product needs them. Each one is built on the same user model, and new apps land regularly.

  Authentication

Authentication that just works with passkeys, OAuth, and CLI auth. Drop in one component and ship the whole flow; auth methods toggle from the dashboard with no code changes needed.

Authentication

  Teams

Build for teams, not just users, with workspaces, email invites, and roles that actually gate the work. The workspace switcher remembers selection, invites auto sign up new users, and permissions hold up under audit.

Teams

  RBAC

Permissions, sorted: roles that nest and one permission check that works the same on server or client. Define them in the dashboard, check them anywhere in your code.

RBAC

  API Keys

API keys without the footguns: leaked keys get auto-revoked, work for users and teams, and show the full secret only once. We never keep the plaintext after creation.

API Keys

  Payments

Payments without the plumbing for subscriptions, one-time charges, and usage metering with credits. Bill a person or a whole team with one model, no separate codepath.

Payments

  Emails

Email that delivers and tells you so, handling transactional and marketing sends from one API. Edit templates with an AI editor, theme once, and track every open and click.

Emails

  Analytics

Know your users with no data stack required, with live active user counts and session replays out of the box. Ask in plain English to build dashboards or write SQL to save queries, all with one flag enabled.

Analytics

  Webhooks

React to every user event in real time with signed, tamper-proof webhooks. Retries and backoff are handled for you; verify in five lines and manage endpoints from the dashboard.

Webhooks

  Data Vault

A safe for the secrets your users hand you, locked with your secret so we never see the plaintext. Store and retrieve tokens in two lines each, server-only by design.

Data Vault

  Launch Checklist

Run through the must-do checks before flipping to production: domain setup, callbacks locked, secrets rotated. The progress tracker keeps your team aligned so nothing critical slips through on launch day.

Launch Checklist

Contributing

Hexclave is open source, and contributions are welcome. Read CONTRIBUTING.md to get started, and say hello in Discord before picking up anything large. Found a security issue? Email security@hexclave.com.

❤ Contributors

Contributors