Files
Jordi Enric 1545df1fe6 feat(dev-tools): add resource warnings tab to dev toolbar (#44857)
## Problem

There was no way to trigger resource warning banners in the dev toolbar,
making it hard to test different warning states (warn/critical,
read-only mode) without manually mocking API responses or waiting for
real exhaustion events.

## Fix

- Adds an ExtraTab extension point to DevToolbar so Studio can inject
custom tabs without coupling the package to app-specific hooks
- Adds a ResourceWarningsTab in Studio with per-type off/warn/crit
toggles for disk IO, CPU, memory, disk space, and auth rate limit
warnings, plus a read-only mode toggle
- Auth rate limit only exposes warn (no crit) since critical is not a
valid API return value
- The tab component is dynamically imported so it stays out of
production bundles, controlled by the same NEXT_PUBLIC_ENVIRONMENT guard
used by the toolbar

## How to test

1. Run Studio locally or open a Vercel preview deployment
2. Open the browser console and run window.devTelemetry() to enable the
toolbar
3. Click the toolbar trigger to open the panel
4. Switch to the "Warnings" tab
5. Toggle any warning type to "Warn" or "Crit" and confirm the banner
appears at the top of the page
6. Toggle read-only mode on and confirm the read-only banner appears
7. Click "Reset to real data" and confirm banners return to their actual
state
8. Confirm the Auth Rate Limit row only has Off and Warn buttons (no
Crit)

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

* **New Features**
* New "Warnings" tab in the developer toolbar (enabled in local and
staging) for managing resource warning banners.
* Per-resource severity overrides (Off / Warning / Critical) with
immediate preview in the toolbar.
  * Local "read-only" toggle to simulate read-only mode.
* "Reset to real data" clears overrides, disables the local toggle, and
refreshes server state.
* Tab loads lazily and shows a disabled/loading state if org/project
context is unavailable.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-15 11:09:47 +02:00

42 lines
936 B
TypeScript

import type { Dispatch, ReactNode, SetStateAction } from 'react'
export interface DevTelemetryEvent {
id: string
timestamp: number
source: 'client' | 'server'
eventType: string
eventName: string
distinctId?: string
properties?: Record<string, unknown>
}
export interface ServerTelemetryEvent {
id: string
timestamp: number
sessionId: string
eventType: 'capture' | 'identify' | 'groupIdentify' | 'alias'
eventName: string
distinctId: string
properties?: Record<string, unknown>
groups?: Record<string, string | number>
}
export interface DevToolbarConfig {
apiUrl: string
}
export interface ExtraTab {
id: string
label: string
content: ReactNode
}
export interface DevTelemetryToolbarContextType {
isEnabled: boolean
isOpen: boolean
setIsOpen: (open: boolean) => void
events: DevTelemetryEvent[]
setEvents: Dispatch<SetStateAction<DevTelemetryEvent[]>>
dismissToolbar: () => void
}