repro.fyi — The Art of the Minimal Reproduction

\n\n \n\n \n \n \n );\n}\n\nexport default function Template(props: TemplateProps): string {\n return \"\" + renderToString(TemplateComponent(props));\n}\n","/** @jsx h */\n/** @jsxFrag Fragment */\nimport { h, Fragment } from \"npm:preact@10\";\nimport { renderToString } from \"npm:preact-render-to-string@6\";\n\nexport interface TemplateProps {\n content: string;\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 {/* Water.css with theme switching */}\n \n \n\n \n \n \n \n 🌙\n \n\n

\n\n \n\n \n \n \n );\n}\n\nexport default function Template(props: TemplateProps): string {\n return \"\" + renderToString(TemplateComponent(props));\n}\n","createdAt",["D",1769263503635],"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":193,"_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":194,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":195,"_84":196,"_86":197,"_88":25},"tree",[176,177,178,179],"files",[176,177,178,179],"counts",{"_165":166,"_167":162,"_168":166,"_169":170,"_171":172},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":129},"repro.fyi",{"_42":157,"_32":158,"_30":159,"_135":-5,"_40":41,"_39":160,"_136":25,"_37":161,"_13":162,"_33":20,"_34":163,"_24":25,"_139":-5,"_27":164},{"_42":149,"_32":150,"_30":151,"_135":-5,"_40":41,"_39":152,"_136":25,"_37":153,"_13":154,"_33":20,"_34":155,"_24":25,"_139":-5,"_27":156},{"_42":141,"_32":142,"_30":57,"_135":-5,"_40":41,"_39":143,"_136":25,"_37":144,"_13":145,"_33":146,"_34":147,"_24":25,"_139":-5,"_27":148},{"_42":134,"_32":28,"_30":31,"_135":-5,"_40":41,"_39":14,"_136":25,"_37":137,"_13":138,"_33":20,"_34":36,"_24":25,"_139":-5,"_27":140},"ae001c58-f92d-11f0-9329-42dde27851f2","parentId","latest",["D",1769263503635],3,"label",[28],"f09cae24-f927-11f0-9ea2-42dde27851f2","main.ts",17,["D",1769261038417],12,"http","import { marked } from \"npm:marked@15\";\nimport { readFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport Template from \"./template.tsx\";\n\nconst markdown = await readFile(\"/index.md\", import.meta.url);\nconst content = await marked(markdown);\nconst html = Template({ content });\nexport default function (_req: Request): Response {\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}",[142],"78f5731e-f92d-11f0-bfad-42dde27851f2","index.md","44b62868-f924-11f0-8e22-42dde27851f2",42,["D",1769263414650],23,"# repro.fyi\n\n## The Art of the Minimal Reproduction\n\nMinimal repros are key to debugging, both by yourself and with others.\n\n## What is a minimal repro?\n\n1. It is **minimal**. It contains the least amount of details to be sufficient.\n Anything can that can be removed, is removed.\n2. It reliably **reproduces** the issue. \"If you follow these steps exactly, you\n too will see the issue.\"\n\n## Why make a minimal repro?\n\n### 🪞 For Yourself\n\nFirst-and-foremost, you make repros for you.\n\n**Debugging is isolating**. You cannot address what you cannot isolate. How can\nyou fix a bug if you don't know where it is.\n\nYou can't fix what you can't repro: how would you know if you even fixed it?\nThis point is profound, so let me spell it out for you:\n\n1. You have a bug\n2. You don't first establish a repro.\n3. You try to fix the bug.\n4. Now what? Did you even fix the bug? How could you tell?\n5. Now you have to go back, undo your fix, and see if the bug comes back. In\n other words, you go back and create a reverse-repro.\n\nYou can only declare a bug \"fixed\" when it the repro no longer repros.\n\nThis is similar to the maxim that you should never optimize without first\nmeasuring. If you try to make something faster without first measuring how fast\nit is, how will you know if you succeeded or made things worse? More\nimportantly: how will you make sexy graphs you can post online to brag about\nyour achievement?\n\n### 🤝 For Others (When You Need Help)\n\n\n\nWhen you ask for help with a messy, complex codebase, you're essentially saying:\n_\"Here's my whole room. Find my keys.\"_\n\nA minimal repro says: _\"Here are my keys on an empty table. Why won't they turn\nin this lock?\"_\n\n**Asking someone to isolate your bug for you is like asking a painter to clean\nyour room before they can paint the walls.** That's your job. The isolation work\nis the prerequisite to getting help—not part of the help itself.\n\nPeople who help in forums, Discord servers, and GitHub issues are volunteering\ntheir time. Respect it.\n\n> **The XY Problem:** Sometimes while making a minimal repro, you'll realize\n> you're asking for help with the wrong problem entirely. You thought you had a\n> CSS bug, but actually you're fighting the browser's default styles.\n> [Read more about the XY Problem →](https://xyproblem.info/)\n\n### 🤖 For AI Tools\n\nGot ChatGPT, Claude, or Copilot? A minimal repro is _perfect_ for pasting into\nan AI assistant.\n\nThe smaller and more focused your code, the better the AI can understand and\nhelp. A 2000-line file will confuse it. A 20-line reproduction will get you a\nprecise answer. **Minimal repros aren't just for humans anymore.**\n\n---\n\n## What Makes a Good Repro?\n\nA great repro **puts the other person into the bug** as fast as possible. Here's\nwhat that looks like:\n\n### 📝 Steps to Reproduce\n\nWrite out the exact steps. Don't assume anything is obvious.\n\n

Example of good steps

\n\n1. Go to the login page\n2. Enter any email address\n3. Leave password blank\n4. Click \"Submit\"\n5. **Expected:** Validation error appears\n6. **Actual:** Page crashes with white screen\n\n

\n\n### 🔍 Debug Information\n\nInclude the context that helps diagnose:\n\n- **Error messages** — Copy the full text, not just \"it says error\"\n- **Console logs** — Open DevTools (F12) → Console tab\n- **Network requests** — DevTools → Network tab (look for red/failed requests)\n- **Crash reports** — Stack traces, error codes, anything the system tells you\n- **Incognito test** — Try in a private/incognito window to rule out browser\n extensions\n\n

Tools that capture this automatically

\n\n- [Jam.dev](https://jam.dev) — Captures console logs, network requests, and more\n in one click\n- Browser DevTools — Your built-in best friend\n- Screen recording with voiceover — Walk through what you're seeing\n\n

\n\n### 🎬 Show, Don't Just Tell\n\nA video of you recreating the issue while talking through it is incredibly\nvaluable. Describe:\n\n- What you're clicking\n- What you expect to happen\n- What actually happens\n\n### ⚡ One-Click Repros (The Gold Standard)\n\nThe absolute best repro is one someone can run instantly:\n\n- **[JSBin](https://jsbin.com)** / **[CodePen](https://codepen.io)** /\n **[JSFiddle](https://jsfiddle.net)** — For frontend issues\n- **[Val Town](https://val.town)** — For backend/API issues\n- **[TypeScript Playground](https://www.typescriptlang.org/play)** — For\n TypeScript type issues\n- **[Rollup REPL](https://rollupjs.org/repl/)** — For bundler issues\n- **GitHub repo** — For complex setups (but keep it minimal!)\n\nIf someone can click a link and _see_ your bug, you've done the work for them.\n\n---\n\n## Good Repro vs Bad Repro\n\n\n\n

❌ Bad bug report

\n\n> \"The app is broken. When I click the button nothing happens. Please fix ASAP.\"\n\nWhat's wrong with this?\n\n- No steps to reproduce\n- No error messages\n- No expected vs actual behavior\n- No environment info\n- \"Nothing happens\" could mean 100 different things\n\n

\n\n

✅ Good bug report

\n\n> **Environment:** Chrome 120, macOS Sonoma, Node 20.10.0\n>\n> **Steps:**\n>\n> 1. Open the dashboard (`/dashboard`)\n> 2. Click \"Export Data\" button\n> 3. Select \"CSV\" format\n> 4. Click \"Download\"\n>\n> **Expected:** CSV file downloads\n>\n> **Actual:** Nothing happens. Console shows:\n> `TypeError: Cannot read property 'map' of undefined at ExportService.js:42`\n>\n> **Minimal repro:** [CodeSandbox link]\n>\n> **Notes:** Works fine with \"JSON\" format. Only fails with CSV.\n\nWhy this is better:\n\n- Exact steps anyone can follow\n- Clear expected vs actual\n- Full error message with line number\n- Environment specified\n- Narrowed down to CSV-specific issue\n- Includes runnable reproduction\n\n

\n\n---\n\n## How to Make a Minimal Repro\n\n### Option A: Start Fresh (Recommended)\n\n1. Create a new project/file/sandbox\n2. Add only the code needed to show the bug\n3. If you can't reproduce it, that tells you something!\n\n### Option B: Strip Down\n\n1. Make a copy of your project\n2. Delete half the code\n3. Does the bug still happen?\n - **Yes:** Delete half of what remains\n - **No:** The bug was in what you deleted—put it back and delete the _other_\n half\n4. Repeat until you have the smallest possible code that shows the bug\n\nAnother similar debugging technique is `git bisect` until you find the offending\ncommit.\n\n

What to remove first

\n\n- Unrelated features and buttons\n- Styling and CSS (unless it's a styling bug)\n- Authentication and API calls (replace with hardcoded data)\n- Extra dependencies\n- Comments and dead code\n- Configuration files (use defaults)\n\n

\n\n### 🎉 Plot Twist: You Might Fix It Yourself\n\nSomewhere in this process, you'll often go: _\"Wait, why did I write it that\nway?\"_\n\nThat's the magic. **The minimal repro process forces you to understand your own\ncode.** And understanding is 90% of fixing.\n\n---\n\n## When a Minimal Repro Isn't Enough\n\nSometimes context matters. A minimal repro might not capture:\n\n- **Race conditions** — Timing-dependent bugs that only appear under load\n- **Environment-specific issues** — Bugs that only occur on specific\n OS/browser/hardware combinations\n- **Security vulnerabilities** — Where the full context is needed to understand\n the attack vector\n- **Data-dependent bugs** — Issues that only appear with specific data shapes or\n volumes\n\nIn these cases, be upfront: _\"I couldn't reproduce this in isolation, but here's\nwhat I've tried...\"_ and provide as much context as you can about when/how it\noccurs.\n\n\n\n---\n\n## The Checklist\n\nBefore sharing your repro, verify each item. _Click any item to link directly to\nit._\n\n### ✅ Do This\n\n

\n\n- **[Self-contained](#self-contained)** — Can someone copy-paste-run it without\n setup?\n\n

\n\n- **[Include the error](#include-error)** — Full error message, not \"it doesn't\n work\"\n\n

\n\n- **[Include versions](#include-versions)** — Node version, browser, OS, package\n versions\n\n

\n\n- **[Steps to reproduce](#steps-to-reproduce)** — Numbered list of exactly what\n to do\n\n

\n\n- **[Expected vs Actual](#expected-vs-actual)** — What should happen? What\n happens instead?\n\n

\n\n- **[Actually minimal](#minimal)** — Could you remove anything else? Try.\n\n### ❌ Don't Do This\n\n

\n\n- **[No screenshots of code](#no-screenshots)** — I can't copy-paste an image.\n Give me text.\n\n

\n\n- **[No partial code](#no-partial-code)** — \"Here's the relevant part\" often\n hides the bug\n\n

\n\n- **[No entire codebases](#no-entire-codebase)** — Your 50-file project isn't a\n repro\n\n

\n\n- **[\"It doesn't work\"](#no-it-doesnt-work)** — Doesn't work _how_? What did you\n expect?\n\n

\n\n- **[Nothing is \"obvious\"](#no-assume-obvious)** — State your environment,\n steps, everything\n\n---\n\n## Quick Links\n\n- 📚 [SSCCE](https://sscce.org/) — The original guide that inspired this page\n- 🐛 [Jam.dev](https://jam.dev/) — Capture bug reports with full context\n- 📖\n [How to Report Bugs Effectively](https://www.chiark.greenend.org.uk/~sgtatham/bugs.html)\n — Simon Tatham's classic guide\n\n---\n\n",[150],"1f21c0cc-f928-11f0-b254-42dde27851f2","README.md","5dce4b64-f924-11f0-8e22-42dde27851f2",18,["D",1769261116458],1,"# repro.fyi\n\n**A minimal reproduction guide hosted on Val Town.**\n\n🔗 **Live site:** [repro.fyi](https://repro.fyi)\n\n## How It Works\n\nThis val is a simple HTTP server that:\n\n1. **Reads `index.md`** — The content file with all the guide text\n2. **Renders to HTML** — Uses `marked` to convert markdown to HTML\n3. **Wraps in a template** — `template.tsx` provides the HTML shell, styling, and theme toggle\n4. **Serves to the browser** — `main.ts` ties it all together\n\n## Architecture\n\n```\nmain.ts - HTTP handler, reads markdown, renders template\ntemplate.tsx - Preact component that outputs HTML (JSX rendered to string)\nindex.md - Markdown content\nREADME.md - This file\n```\n\n## Key Technologies\n\n- **Val Town** — Serverless hosting\n- **Deno** — Runtime\n- **Preact** — Lightweight component rendering (JSX → HTML string)\n- **Marked** — Markdown to HTML\n- **Water.css** — Classless CSS framework\n- **std/utils** — Val Town stdlib for file I/O\n\n## Development\n\nTo edit the content, modify `index.md`.\n\nTo edit the styling or HTML structure, modify `template.tsx`.\n\nTo change how the server works, modify `main.ts`.\n\nThe site automatically deploys when you save changes.\n\n## Theme Switching\n\nThe template includes a light/dark mode toggle button (🌙/☀️) that:\n- Uses Water.css's light and dark variants\n- Saves preference to localStorage\n- Respects system preference on first load\n- Responds to system preference changes\n\n## License\n\nPublic domain. Copy it, remix it, make it better.\n\n---\n\n*Built with ❤️ on [Val Town](https://val.town)*\n",[158],"pulls",0,"branches","forks","envVars",{"_173":166,"_175":166},"connections",{"_173":166,"_174":166},"count","unfilledCount","emptyCount",{"_42":157,"_32":158,"_30":159,"_135":-5,"_40":41,"_39":160,"_136":25,"_37":190,"_13":162,"_33":20,"_34":163,"_24":25,"_139":-5,"_181":191,"_27":192},{"_42":149,"_32":150,"_30":151,"_135":-5,"_40":41,"_39":152,"_136":25,"_37":187,"_13":154,"_33":20,"_34":155,"_24":25,"_139":-5,"_181":188,"_27":189},{"_42":141,"_32":142,"_30":57,"_135":-5,"_40":41,"_39":143,"_136":25,"_37":184,"_13":145,"_33":146,"_34":147,"_24":25,"_139":-5,"_181":185,"_27":186},{"_42":134,"_32":28,"_30":31,"_135":-5,"_40":41,"_39":14,"_136":25,"_37":180,"_13":138,"_33":20,"_34":36,"_24":25,"_139":-5,"_181":182,"_27":183},["D",1769263503635],"children",[],[28],["D",1769261038417],[],[142],["D",1769263414650],[],[150],["D",1769261116458],[],[158],["D",1762703128089],["D",1789615253173],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":55,"_104":105,"_106":25},{"_13":89,"_32":90,"_42":41,"_91":43,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":44,"_98":99},"ctx",{"_82":-5,"_126":231,"_232":233,"_234":235,"_236":25,"_237":25,"_238":25,"_239":59,"_240":-5,"_241":-7,"_242":-7,"_243":166,"_244":25,"_245":25,"_246":-5,"_247":25,"_248":25,"_249":25,"_250":-5},"ENV",{"_202":203,"_204":205,"_206":90,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","a3e067d4463eea85f6334f8e583e8516ae58c4f6","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v43