perfViz/types/trace.ts
Michael Mainguy 1f12b143ef Initial commit: Performance Trace Analyzer with comprehensive features
🚀 Features implemented:
- IndexedDB local database for trace storage and management
- Drag & drop trace file upload with validation
- HTTP Request viewer with advanced filtering and analysis
- CDN provider detection (Cloudflare, Akamai, CloudFront, etc.)
- Queue time analysis with bottleneck detection
- Visual highlighting for file sizes and request durations
- Priority-based request analysis
- Phase event viewer with detailed trace exploration
- Filmstrip screenshot integration (with debugging)
- 3D Babylon.js viewer component

📊 Analysis capabilities:
- HTTP/1.1 vs HTTP/2 performance comparison
- CDN edge vs origin detection
- Connection limit bottleneck identification
- Priority queue analysis
- Visual correlation with network requests
- Performance bottleneck identification

🛠️ Technical stack:
- React 19.1.0 + TypeScript 5.8.3
- Vite build system
- IndexedDB for local storage
- Babylon.js 8+ for 3D visualization
- Chrome DevTools trace format support

🎨 User experience:
- Clean, professional interface design
- Color-coded performance indicators
- Expandable detailed views
- Search and filtering capabilities
- Responsive grid layouts
- Intuitive navigation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-08-06 19:27:12 -05:00

161 lines
3.2 KiB
TypeScript

/**
* Chrome DevTools Performance Trace Format
* Based on the Trace Event Format specification
*/
// Main trace file structure
export interface TraceFile {
metadata: TraceMetadata
traceEvents: TraceEvent[]
}
// Metadata section
export interface TraceMetadata {
source: string
startTime: string
hardwareConcurrency: number
dataOrigin: string
modifications: TraceModifications
}
export interface TraceModifications {
entriesModifications: {
hiddenEntries: unknown[]
expandableEntries: unknown[]
}
initialBreadcrumb: {
window: {
min: number
max: number
range: number
}
child: null | unknown
}
annotations: {
entryLabels: unknown[]
labelledTimeRanges: unknown[]
linksBetweenEntries: unknown[]
}
}
// Base trace event structure
export interface BaseTraceEvent {
/** Event arguments - varies by event type */
args: Record<string, unknown>
/** Category */
cat: string
/** Event name */
name: string
/** Phase type */
ph: TraceEventPhase
/** Process ID */
pid: number
/** Thread ID */
tid: number
/** Timestamp in microseconds */
ts: number
/** Thread timestamp in microseconds (optional) */
tts?: number
}
// Specific event types
export interface MetadataEvent extends BaseTraceEvent {
ph: 'M'
args: {
name?: string
uptime?: string
[key: string]: unknown
}
}
export interface DurationEvent extends BaseTraceEvent {
ph: 'X'
/** Duration in microseconds */
dur: number
/** Thread duration in microseconds (optional) */
tdur?: number
}
export interface InstantEvent extends BaseTraceEvent {
ph: 'I'
/** Scope (optional) */
s?: 't' | 'p' | 'g'
/** Layer tree ID (optional) */
layerTreeId?: number
/** Layer ID (optional) */
layerId?: number
}
export interface BeginEvent extends BaseTraceEvent {
ph: 'B'
}
export interface EndEvent extends BaseTraceEvent {
ph: 'E'
}
// Union type for all trace events
export type TraceEvent = MetadataEvent | DurationEvent | InstantEvent | BeginEvent | EndEvent
// Phase type enumeration
export type TraceEventPhase =
| 'M' // Metadata
| 'X' // Complete (duration)
| 'I' // Instant
| 'B' // Begin
| 'E' // End
| 'D' // Deprecated
| 'b' // Nestable start
| 'e' // Nestable end
| 'n' // Nestable instant
| 'S' // Async start
| 'T' // Async instant
| 'F' // Async end
| 'P' // Sample
| 'C' // Counter
| 'R' // Mark
// Common argument types found in trace events
export interface TracingStartedArgs {
data: {
frameTreeNodeId: number
frames: Array<{
frame: string
isInPrimaryMainFrame: boolean
isOutermostMainFrame: boolean
name: string
processId: number
url: string
}>
persistentIds: boolean
}
}
export interface UpdateLayerArgs {
layerId: number
layerTreeId: number
}
export interface NeedsBeginFrameChangedArgs {
data: {
needsBeginFrame: number
}
layerTreeId: number
}
export interface RunTaskArgs {
[key: string]: unknown
}
// Thread and process name arguments
export interface ThreadNameArgs {
name: string
}
export interface ProcessNameArgs {
name: string
}
export interface ProcessUptimeArgs {
uptime: string
}