{"slug": "when-ai-fails-to-smash-the-bug", "title": "When AI Fails to Smash the Bug ๐ชฒ", "summary": "A developer encountered a frustrating bug when deploying a local e-commerce shop through Cloudflare, where the site appeared broken despite working locally. After troubleshooting with AI assistance and checking cache settings, the issue remained unresolved. The developer eventually took a break, highlighting the challenges of debugging deployment-specific issues.", "body_md": "*This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry.*\n\nMy most recent project is a local small e-commerce shop that allows guest artists and myself to sell handcrafted items to amazing customers. I wanted a shop completely different from Shopify, easy to maintain, and a way to automate drop shipping for artists.\n\nMy issue started when I implemented Cloudflare. At least that was what I thought. The site locally seemed to work perfectly. The shop was performing well, working correctly against Neon Database for the product pulls, and styles were showing correctly. So I thought I could share this with a friend, get some advice.\n\nSo I started to implement Cloudflare locally with my website. I wanted a tunnel used with one of my domains that I could eventually point to my Jetson Orin Nano and make use of that as a locally hosted server with some nice AI features. This will be a post for later, lets get back to a masterfully crafted confusion that AI helped put in place but never solved.\n\nGoing to the URL of my server, I went to the shop. BROKEN! What's this? My featured card is gone and my cards are not pulling styles correctly. But everything looks ok locally. WAIT! This has got to be cache issue. That would make sense right? And even after feeding these screenshots to AI, that was it's assumption. I didn't know Cloudflare stores Cache and does not pick up the local site right away. This has got to be the solve.\n\nSo I went to Cloudflare, flipped off the toggle under the cache settings under my domain, and thought, HA! SOLVED! So i go back, refresh the site and it's still the same thing. No issue has been solved. Well, this could be a local cache issue, right? Just to be safe... Clear browser cache and.... Hard Reload. Nothing. Still the same. This is starting to bother me now. Time to ask AI again to resolve the issue. ๐ค\n\n```\nWhat's happening\n\nCloudflare sits between your phone/browser and localhost:3030, and it's\n doing two things to the shop that don't happen on localhost:\n\n1. Caching your JS/CSS for 4 hours. Your server says Cache-Control: max-age=3600 (1 hr), \nbut Cloudflare rewrote it to max-age=14400 (4 hrs) and is serving cached\n copies (cf-cache-status: HIT). So your browser is holding an older cached\n version of the shop's code from an earlier visit to home.trickell.digital\n โ from partway through today's edits, before the current featured-ad\n state. localhost never goes through that cache, so it's always live.\n That's why the featured product shows on one and not the other.\n\n2. Email Obfuscation โ Cloudflare is rewriting an email-looking string in\n your boot animation and injecting email-decode.min.js. Cosmetic, not the\n cause here, but it is modifying your HTML. (Rocket Loader is not on โ \nyour script tags are untouched.)\n\nConfirm it in 10 seconds\n```\n\nNow it's telling me to check in an incognito window, because surely it has something to do with the way the code is being served up because everything in the DOM with both sites is the same. There were some issues with the way certain CSS files were loading, so it fixed those real issues and said after reloading the entire site it should pull up cleanly now. So at this point, I'm like sure why not. I throw up an incog-window and pull up the site, and still to my bewilderment it's broken.\n\nI'm thinking \"Opus, your soooo dumb. I'm going to Fable\", but at this point, I considered it needed a more hands approach. The styles are what have to be breaking in some form. So I started playing with the featured Items styles in the DOM. Let's center it dead in the browser, and give it a `z-index of 9999`\n\nwith a `position of fixed`\n\nand `top: 50%`\n\nwith `margin: 0 auto`\n\n. How would anyone miss that? Still not showing....\n\n10.... 9..... 8.... 7.... 6.... 5..... Deep Breaths...\n\nI did not get why a bug was ruining my weekend and why it JUST DID NOT WORK?! Locally, the shop works perfect. So WHYYYY!?! I took the night to break from the project because I could not think straight anymore.\n\nThe next morning, I started considering what would happen if I pulled it up on a different platform other then chrome. So I went to my phone and it pulled up ok with the site. Nothing broken.... Nothing. So to confirm I was not dreaming, I hopped on my Mac Book Pro and same thing, Safari is pulling it up correctly. Did my AI Self Heal it over night? ๐ I hopped on my computer and pulled it back up on Chrome and still broken. ๐ฑ\n\nAt this point, that started pointing directly to the browser. But how could that be? It's broken on Cloudflare only? So I start killing my extensions. DarkReader? It changes CSS. Killed. Nope, still broken. Metamask? Nope. TamperMonkey? Maybe some code got loaded up I didn't know?... Still nothing. AdBlockPlus?.. N... Wait. It's working. WHAT?! At this point I had the most dumbfounded look on myself. What in the hell would cause AdBlockPlus to break my page.\n\nAI does a poor job naming div elements. Looking harder at my code, strictly for that featured component, I realized the AI named the div \"featured-ad\". Now this is ok and all, until AdBlockPlus with EasyList picks that direct name up and filters any styles directly related with that name out of the page.\n\n```\n`;\n```\n\nSo as complicated as the bug was, the fix was a simple name change to each div named with the class \"featured-ad\" over to \"shop-featured\".\n\n```\n