repro.fyi — The Art of the Minimal Reproduction

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_199":200,"_201":202},"routes/_app.x.$handle.$name",{"_100":99,"_32":44,"_108":90,"_27":54,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":59,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",70,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":20,"_34":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":20,"_34":35},"deleted",false,"deletedHere","path","index.md","latestPath","fileId","44b62868-f924-11f0-8e22-42dde27851f2","name","fileType","content","# repro.fyi\n\nA minimal repro is the smallest set of steps that reliably reproduces your bug.\n\n## Why bother?\n\n**1. You need it anyway.** Without a repro, how would you know when the bug is\nfixed?\n\n**2. It's your job, not theirs.** When you ask for help with a messy codebase,\nyou're asking someone to clean your room before they can help you find your\nkeys. First clean your room. You might find your keys while you do! If not, then\nask for help.\n\n**3. You'll probably fix it yourself.** If you can reproduce the bug in a fresh\nenvironment with minimal code, it's the platform's fault. If you can't... it's\nyours. The process of minimizing _is_ isolating the bug, which is key to\ndebugging, regardless of who's fault it was.\n\n## How to make one\n\n**Start fresh:** Create a new file or sandbox. Add only what's needed to show\nthe bug. If you can't reproduce it in isolation, that tells you something — the\nbug is in the stuff you left out.\n\n**Or strip down:** Copy your project, delete half. Still broken? Delete half\nagain. Fixed? The bug was in what you deleted — put it back, delete the _other_\nhalf. Repeat until nothing's left to remove.\n\n**When to ask for help:** Keep isolating until you hit someone else's black box\n— a platform, library, or API you can't see inside. That's when you've earned\nthe right to ask.\n\n## Good vs bad\n\n> Chrome, macOS.\n>\n> **To Repro:**\n>\n> 1. Open `/dashboard`\n> 2. Click \"Export\"\n> 3. Select CSV\n>\n> **Expected:** File downloads.\n>\n> **Actual:** Console shows `TypeError: Cannot read property 'map' of undefined`\n\nvs.\n\n> \"File exports are broken, please fix ASAP\"\n\n## Common mistakes\n\n- **Sharing your whole codebase.** The goal is to get someone into the bug as\n fast as possible. A fresh sandbox with just the error beats a link to your\n repo.\n- **Skipping the steps.** \"It's broken\" isn't actionable. Include a list of\n numbered steps to repro the bug.\n- **Not including versions.** Or not upgrading first. Half of all bugs are fixed\n in the next release.\n- **Browser extensions.** Try incognito mode before reporting. Extensions break\n more things than you'd think.\n\n---\n\n_[Edit on Val Town →](https://www.val.town/x/stevekrouse/repro-fyi/branch/minimal/code/index.md)_","# repro.fyi\n\nA minimal repro is the smallest set of steps that reliably reproduces your bug.\n\n## Why bother?\n\n**1. You need it anyway.** Without a repro, how would you know when the bug is\nfixed?\n\n**2. It's your job, not theirs.** When you ask for help with a messy codebase,\nyou're asking someone to clean your room before they can help you find your\nkeys. First clean your room. You might find your keys while you do! If not, then\nask for help.\n\n**3. You'll probably fix it yourself.** If you can reproduce the bug in a fresh\nenvironment with minimal code, it's the platform's fault. If you can't... it's\nyours. The process of minimizing _is_ isolating the bug, which is key to\ndebugging, regardless of who's fault it was.\n\n## How to make one\n\n**Start fresh:** Create a new file or sandbox. Add only what's needed to show\nthe bug. If you can't reproduce it in isolation, that tells you something — the\nbug is in the stuff you left out.\n\n**Or strip down:** Copy your project, delete half. Still broken? Delete half\nagain. Fixed? The bug was in what you deleted — put it back, delete the _other_\nhalf. Repeat until nothing's left to remove.\n\n**When to ask for help:** Keep isolating until you hit someone else's black box\n— a platform, library, or API you can't see inside. That's when you've earned\nthe right to ask.\n\n## Good vs bad\n\n> Chrome, macOS.\n>\n> **To Repro:**\n>\n> 1. Open `/dashboard`\n> 2. Click \"Export\"\n> 3. Select CSV\n>\n> **Expected:** File downloads.\n>\n> **Actual:** Console shows `TypeError: Cannot read property 'map' of undefined`\n\nvs.\n\n> \"File exports are broken, please fix ASAP\"\n\n## Common mistakes\n\n- **Sharing your whole codebase.** The goal is to get someone into the bug as\n fast as possible. A fresh sandbox with just the error beats a link to your\n repo.\n- **Skipping the steps.** \"It's broken\" isn't actionable. Include a list of\n numbered steps to repro the bug.\n- **Not including versions.** Or not upgrading first. Half of all bugs are fixed\n in the next release.\n- **Browser extensions.** Try incognito mode before reporting. Extensions break\n more things than you'd think.\n\n## Further reading\n\n- [How to Report a Bug](https://macwright.com/sites/polite.technology/reportabug) — Tom MacWright's guide to polite bug reporting\n- [SSCCE](https://sscce.org/) — Short, Self-Contained, Correct Example\n- [How to Report Bugs Effectively](https://www.chiark.greenend.org.uk/~sgtatham/bugs.html) — Simon Tatham's classic guide\n\n---\n\n_[Edit on Val Town →](https://www.val.town/x/stevekrouse/repro-fyi/branch/minimal/code/index.md)_","createdAt",["D",1769618344215],"branchVersion","branchId","1d735096-bd83-11f0-9811-42dde27851f2","id","1d72fe7a-bd83-11f0-9811-42dde27851f2","repro-fyi",["D",1762703128089],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Infosite on how to make a minimal repro","imageUrl","","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","1d753a28-bd83-11f0-9811-42dde27851f2","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",2,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","1d72fe7abd8311f0981142dde27851f2","tursoHostname","1d72fe7abd8311f0981142dde27851f2-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789615253173],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_107":103},"org",{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":89,"_32":90,"_42":41,"_91":43,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":44,"_98":99},"isOwned",74,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_32":44,"_37":194,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":54,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":195,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":196,"_84":197,"_86":198,"_88":25},"tree",[177,178,179,180],"files",[177,178,179,180],"counts",{"_165":166,"_167":168,"_169":166,"_170":171,"_172":173},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":129},"repro.fyi",{"_42":157,"_32":158,"_30":159,"_137":-5,"_40":41,"_39":160,"_139":59,"_37":161,"_13":162,"_33":20,"_34":163,"_24":25,"_143":-5,"_27":164},{"_42":153,"_32":28,"_30":31,"_137":-5,"_40":41,"_39":14,"_139":25,"_37":154,"_13":155,"_33":20,"_34":36,"_24":25,"_143":-5,"_27":156},{"_42":145,"_32":146,"_30":57,"_137":-5,"_40":41,"_39":147,"_139":59,"_37":148,"_13":149,"_33":150,"_34":151,"_24":25,"_143":-5,"_27":152},{"_42":134,"_32":135,"_30":136,"_137":-5,"_40":41,"_39":138,"_139":25,"_37":140,"_13":141,"_33":20,"_34":142,"_24":25,"_143":-5,"_27":144},"53e21826-f931-11f0-a8ad-42dde27851f2","template.tsx","bf625aac-f927-11f0-88b5-42dde27851f2","parentId",53,"latest",["D",1769265070412],6,"/** @jsx h */\n/** @jsxFrag Fragment */\nimport { h, Fragment } from \"npm:preact@10.25.4\";\nimport { renderToString } from \"npm:preact-render-to-string@6.5.11\";\n\nexport interface TemplateProps {\n content: string;\n}\n\nconst themeScript = `\n(function() {\n const toggle = document.getElementById('theme-toggle');\n const lightCSS = document.getElementById('theme-light');\n const darkCSS = document.getElementById('theme-dark');\n\n function getPreferredTheme() {\n const saved = localStorage.getItem('theme');\n if (saved) return saved;\n return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n }\n\n function setTheme(theme) {\n if (theme === 'dark') {\n lightCSS.disabled = true;\n darkCSS.disabled = false;\n toggle.textContent = '☀️';\n toggle.title = 'Switch to light mode';\n } else {\n lightCSS.disabled = false;\n darkCSS.disabled = true;\n toggle.textContent = '🌙';\n toggle.title = 'Switch to dark mode';\n }\n localStorage.setItem('theme', theme);\n }\n\n setTheme(getPreferredTheme());\n\n toggle.addEventListener('click', function() {\n const current = darkCSS.disabled ? 'light' : 'dark';\n setTheme(current === 'dark' ? 'light' : 'dark');\n });\n\n window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {\n if (!localStorage.getItem('theme')) {\n setTheme(e.matches ? 'dark' : 'light');\n }\n });\n})();\n`;\n\nconst tocScript = `\n(function() {\n const headings = document.querySelectorAll('main h2, main h3');\n if (headings.length === 0) return;\n \n const toc = document.createElement('nav');\n toc.className = 'toc';\n \n const title = document.createElement('div');\n title.className = 'toc-title';\n title.textContent = 'Contents';\n toc.appendChild(title);\n \n const ul = document.createElement('ul');\n \n headings.forEach(function(h) {\n if (!h.id || h.closest('details')) return;\n \n const li = document.createElement('li');\n li.className = 'toc-' + h.tagName.toLowerCase();\n \n const a = document.createElement('a');\n a.href = '#' + h.id;\n a.textContent = h.textContent;\n \n li.appendChild(a);\n ul.appendChild(li);\n });\n \n toc.appendChild(ul);\n \n const h1 = document.querySelector('main h1');\n if (h1 && h1.nextSibling) {\n h1.parentNode.insertBefore(toc, h1.nextSibling);\n }\n})();\n`;\n\nfunction TemplateComponent({ content }: TemplateProps) {\n return (\n \n \n \n \n repro.fyi — The Art of the Minimal Reproduction\n \n \n 🔬\" />\n\n {/* Open Graph / Facebook */}\n \n \n \n \n\n {/* Twitter */}\n \n \n \n \n\n {/* Water.css with theme switching */}\n \n \n\n \n \n \n \n 🌙\n \n\n

\n\n

Diff · v70