Skip to content

feat(studio): add debug indicator with error capture and copy bundle - #267

Open
SaadNiaziDev wants to merge 3 commits into
hapyco:mainfrom
SaadNiaziDev:feat/studio-debug-bar
Open

feat(studio): add debug indicator with error capture and copy bundle#267
SaadNiaziDev wants to merge 3 commits into
hapyco:mainfrom
SaadNiaziDev:feat/studio-debug-bar

Conversation

@SaadNiaziDev

@SaadNiaziDev SaadNiaziDev commented Sep 3, 2026

Copy link
Copy Markdown
Collaborator

Summary

Closes #250

Adds a dev-only Studio debug indicator — a floating badge in the bottom-left corner (Next.js style) that expands into a contextual debug panel.

What's included

Indicator

  • Floating d badge fixed to bottom-left, only rendered when import.meta.env.DEV is true
  • Clicking opens a panel; clicking outside or pressing Close collapses it back to the badge
  • Red dot on the badge when captured errors are present

Debug panel

  • Route name and full path
  • Current entity and record (when present in route params)
  • Signed-in user email and role
  • Boot store status

Error capture

  • onErrorCaptured wired at App.vue root — uncaught Vue component errors are collected (up to 5, newest first)
  • Each error is an expandable row showing its full stack trace
  • Clear button to dismiss

Copy bundle

  • One click copies a full JSON snapshot: route, entity, record, user, boot status, and all captured error stacks
  • Useful for pasting into bug reports or sharing context

Files

  • features/debug/DebugBar.vue — component
  • features/debug/captured-errors.ts — shared error capture composable
  • features/debug/studio-debug.tsisStudioDebugBarAvailable guard
  • features/debug/index.ts — barrel
  • app/App.vue — mounts <DebugBar> and wires onErrorCaptured
  • Tests for availability helper and mount assertion
image

- Add DebugBar component as a floating bottom-left indicator (Next.js style)
- Add captured-errors composable with onErrorCaptured wired in App.vue
- Copy bundle action exports route, user, boot, and captured error stacks
- Red dot on trigger badge when errors are present
- Indicator always visible in dev, close collapses to badge only
- Add studio-debug.ts with isStudioDebugBarAvailable guard
- Add unit tests for availability helper

Closes hapyco#250

Co-authored-by: Cursor <cursoragent@cursor.com>
@SaadNiaziDev
SaadNiaziDev marked this pull request as draft September 3, 2026 15:20
@SaadNiaziDev
SaadNiaziDev marked this pull request as ready for review September 3, 2026 18:19
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add Studio debug bar

1 participant