dyad:debug-minified-error

Maps minified production error stack traces back to original TypeScript source using source maps.

21.4k|2.6k|Updated Apr 11, 2025
One-click install
npx skills add https://github.com/dyad-sh/dyad --skill dyad-debug-minified-error
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: dyad:debug-minified-error
Source: https://github.com/dyad-sh/dyad/tree/main/.claude/skills/debug-minified-error
Command: npx skills add https://github.com/dyad-sh/dyad --skill dyad-debug-minified-error

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires source-map, @electron/asar.

What problem does it solve?

Production builds of the Dyad Electron app ship minified JavaScript bundles, so error stack traces from users reference unreadable function names and bundle positions instead of real source files, making bug reports nearly impossible to act on.

Core Features & Use Cases

  • Release-Accurate Rebuilds: Checks out the exact GitHub release commit for the reported Dyad version and rebuilds the app so the analysis matches the code that produced the error.
  • Source Map Resolution: Builds the renderer bundle with source maps and uses the source-map package to translate minified function names and positions into original TypeScript file, line, and column.
  • Root Cause Identification: Distinguishes application frames from React internals, locates the throwing expression, and shows the offending source code with surrounding context.
  • Use Case: A user reports "TypeError: Invalid URL at FOt (index-a1b2.js:1432:7223)" from Dyad v0.20.0. The skill checks out that release, rebuilds with source maps, and traces the crash to an unguarded new URL() call in PreviewIframe.tsx.

Quick Start

Paste the full minified error stack trace along with the Dyad release version it occurred in and ask to map it back to the original source code.

Frequently Asked Questions about dyad:debug-minified-error

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

FAQPage Schema
How do I debug a minified JavaScript stack trace from a production build?

Rebuild the exact release version of the app with source maps enabled, find each minified function name in the new bundle, then use the source-map package's originalPositionFor API to resolve each position to the original TypeScript file, line, and column.

How to map minified function names to original source with source maps?

Search the rebuilt bundle for each minified name to get line and column positions, then pass them to SourceMapConsumer.originalPositionFor. Match by function name rather than the error's line numbers, since build hashes differ between builds.

Why do I need the exact Dyad release version to debug the error?

Minified names and bundle contents change between releases, so the analysis must run against the exact commit that produced the user's build. The skill checks out the release tag from GitHub and rebuilds before resolving source map positions.

What if the production build has no source map files?

Production asar archives typically lack .js.map files, so the skill runs a renderer-only Vite build with the --sourcemap flag into a temp directory. The resulting map is used to resolve positions matched by minified function names.

How do I find the root cause frame in a React error stack trace?

React internals like renderWithHooks and beginWork bubble up from the actual throw site, so focus on the topmost non-React frame. For that frame, map all candidate throwing expressions, such as new URL() calls, to pinpoint the exact source line.