skills.rest
lightdash
lightdashOFFICIAL
Explore all skills by this author →
Website𝕏@lightdash_devsGitHub

har-replay

Replays HAR files as a mock backend to reproduce frontend performance issues.

6.1k|768|Updated Mar 19, 2021
Search Tags:#frontend debugging#Performance#typeScript#replay#har#lightdash#mock server
One-click install
npx skills add https://github.com/lightdash/lightdash --skill har-replay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: har-replay
Source: https://github.com/lightdash/lightdash/tree/main/.claude/skills/har-replay
Command: npx skills add https://github.com/lightdash/lightdash --skill har-replay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debugging frontend performance issues with production data normally requires a database, warehouse, and authentication. This Skill replays a captured HAR file as a mock Lightdash backend so the frontend renders with exact production data, letting you reproduce dashboard issues locally without any infrastructure.

Core Features & Use Cases

  • HAR Analysis: Parses the HAR file to extract the page path, origin, project and dashboard UUIDs, and identifies POST endpoints that need body-based request matching.
  • Tailored Replay Server: Generates a Node.js/TypeScript server that indexes HAR responses, handles base64 decoding, skips pending query polls, normalizes 304s, and matches POST requests by body fields like chartUuid.
  • Local Reproduction: Starts the replay server on port 3001 alongside the Vite frontend dev server and provides the exact URL to open the captured page.
  • Use Case: A user reports a slow dashboard in production. Capture a HAR from Chrome DevTools, then replay it locally to profile the frontend rendering with the exact API responses the user experienced.

Quick Start

Replay the attached HAR file as a mock backend so I can reproduce the dashboard performance issue locally.

Frequently Asked Questions about har-replay

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I replay a HAR file as a mock backend server?▼

Analyze the HAR to extract the origin and API entries, then generate a Node.js server that indexes responses by method and path. Run it with npx tsx on port 3001 and point the frontend dev server at it.

How to reproduce frontend performance issues with production data?▼

Capture a HAR file from Chrome DevTools Network tab using 'Save all as HAR with content', then replay it as a mock backend. The frontend renders with exact production API responses without needing a database or authentication.

How do I handle POST requests to the same endpoint when replaying a HAR?▼

Index POST entries by a distinguishing field in the request body, such as chartUuid for dashboard-chart endpoints or savedSqlUuid for dashboard-sql-chart. Match incoming requests by parsing their body against the indexed values.

Why does HAR replay return 404 for some requests?▼

404s occur when the HAR lacks a matching entry, often due to pending query poll responses being skipped or requests outside the captured origin. Check the replay server logs for unmatched paths and re-capture the HAR if entries are missing.

What are the limitations of replaying a HAR file locally?▼

The replay only serves captured responses, so navigating away from the captured pages returns 404. HAR files may contain session cookies and sensitive data, so they must not be committed to version control.

Related Skills

Explore More Software Engineering Skills→
jmolzjmolz

chrome-devtools

Automate and debug web pages via the Chrome DevTools MCP protocol.

Community
Advanced
ref-docsref-docs

performance-optimizer

Analyzes bottlenecks and generates optimization plans for software applications.

Official
Advanced
duc01226duc01226
7

performance-optimization

Diagnose performance bottlenecks in API endpoints, database queries, and frontend rendering.

Community
Advanced
WhaleylawWhaleylaw

mock-data-specialist

Generate Faker-based mock data and MSW API responses for testing environments.

Community
Advanced