Skip to content

feat: add resource timing metrics for API calls and image loads#485

Open
DeePrincipal-dev-lang wants to merge 3 commits into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/resource-timing-metrics
Open

feat: add resource timing metrics for API calls and image loads#485
DeePrincipal-dev-lang wants to merge 3 commits into
rinafcode:mainfrom
DeePrincipal-dev-lang:feat/resource-timing-metrics

Conversation

@DeePrincipal-dev-lang
Copy link
Copy Markdown
Contributor

feat: Resource Timing Metrics

Implements resource timing tracking to identify performance bottlenecks in API
calls and image loading.

Changes:

  • src/utils/performanceTiming.ts (new) — Core timing tracker. Records duration,
    success/failure, and HTTP status for each resource. Maintains a rolling window
    of 200 entries and computes aggregated metrics (p50, p95, avg, min, max, error
    rate) per resource type (api | image). Exposes startTiming, timeAsync,
    getMetrics, getEntries, subscribe, and clearEntries.
  • src/utils/trackingEvents.ts — Adds API_TIMING, IMAGE_TIMING,
    RESOURCE_TIMING_SUMMARY to AnalyticsEvent enum, and a new ResourceTimingMetric
    enum for structured metric names.
  • src/services/api/axios.config.ts — Hooks startTiming into the existing
    request interceptor and records the result (success + status code) in the
    response interceptor, so every API call is timed automatically with zero
    changes at call sites.

Remaining tasks (not yet pushed):

  • Instrument imageCache.ts for image load timing
  • usePerformanceTiming hook
  • PerformanceDashboard component
  • Unit tests

Closes #336

- Add performanceTiming.ts: rolling window tracker with p50/p95/avg/min/max/errorRate
- Add API_TIMING, IMAGE_TIMING, RESOURCE_TIMING_SUMMARY events and ResourceTimingMetric enum
- Instrument axios interceptors to auto-time every API request

Closes rinafcode#31 rinafcode#32 rinafcode#33 rinafcode#34
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 29, 2026

@DeePrincipal-dev-lang Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

- useRequestTimeout: tick-based countdown hook (100ms interval), exposes
  progress (0-1), remaining ms, isTimedOut, start, reset
- RequestTimeoutOverlay: progress bar + remaining seconds + Retry button,
  auto-starts when loading=true, shows retry on timeout
- Exported from hooks/index.ts and components/mobile/index.ts

Closes rinafcode#11 rinafcode#20
@RUKAYAT-CODER
Copy link
Copy Markdown
Contributor

Kindly resolve conflict and fix workflow.

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.

Implement resource timing API integration for monitoring

2 participants