Performance Monitoring

The WhatzBug SDK tracks app launch times, screen load times, UI and JS thread FPS, stall detection, and custom performance traces — all automatically.

What Gets Tracked

The Performance feature uses dedicated collectors for each metric category:

MetricCollectorDescription
App LaunchAppLaunchCollectorCold and warm start times, time to first render
Screen LoadScreenLoadCollectorNavigation-based screen load timing
Auto Screen LoadAutoScreenLoadCollectorAutomatic screen transition timing
FPSFrame metricsUI thread and JS thread frame rates
JS StallsJsStallCollectorDetects JS thread freezes and long tasks
Custom TracesstartTrace / stopTraceDeveloper-defined performance spans

Enabling Performance Monitoring

Performance monitoring is enabled by default:

App.tsxtypescript
await WhatzBug.init({
  projectId: 'your-project-id',
  publishableKey: 'pk_your_key',
  features: {
    performance: true, // default: true
  },
});

Custom Traces

You can create your own performance traces to measure specific operations:

// Start a named trace
WhatzBug.startTrace('checkout_flow');

// ... perform the operation ...

// Stop the trace — duration is calculated automatically
WhatzBug.stopTrace('checkout_flow');

Screen Load Markers

Mark screen load start and end points for automatic timing:

// In your screen component
WhatzBug.markScreenLoadStart('ProductDetail');

// After content has loaded
WhatzBug.markScreenLoadEnd('ProductDetail');

Viewing Performance Data

The Desktop App provides a dedicated Performance Panel with:

  • KPI Cards — At-a-glance metrics for FPS, launch time, screen loads
  • App Launch view — Cold vs warm start analysis
  • Screen Loads view — Per-screen load time distribution
  • Diagnostics — JS stall detection and thread analysis
  • Regression detection — Automatic alerting when metrics degrade
Tip
The Performance Panel includes a regression engine that compares current metrics against baselines and alerts you to degradations. No configuration required.

Disabling Performance Monitoring

await WhatzBug.init({
  projectId: 'your-project-id',
  features: {
    performance: false,
  },
});

Related