This is a submission for DEV's Summer Bug Smash: Clear the Lineup powered by Sentry.
Project Overview
My 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.
Bug Fix or Performance Improvement
My 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.
So 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.
Going 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.
So 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. 🤞
What's happening
Cloudflare sits between your phone/browser and localhost:3030, and it's
doing two things to the shop that don't happen on localhost:
1. Caching your JS/CSS for 4 hours. Your server says Cache-Control: max-age=3600 (1 hr),
but Cloudflare rewrote it to max-age=14400 (4 hrs) and is serving cached
copies (cf-cache-status: HIT). So your browser is holding an older cached
version of the shop's code from an earlier visit to home.trickell.digital
— from partway through today's edits, before the current featured-ad
state. localhost never goes through that cache, so it's always live.
That's why the featured product shows on one and not the other.
2. Email Obfuscation — Cloudflare is rewriting an email-looking string in
your boot animation and injecting email-decode.min.js. Cosmetic, not the
cause here, but it is modifying your HTML. (Rocket Loader is not on —
your script tags are untouched.)
Confirm it in 10 seconds
Now 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.
My Improvements
I'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 with a position of fixed and top: 50% with margin: 0 auto. How would anyone miss that? Still not showing....
10.... 9..... 8.... 7.... 6.... 5..... Deep Breaths...
I 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.
The 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. 😱
At 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.
Code
AI 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.
<aside class="featured-ad" aria-label="Featured product">
<span class="ad-banner">As seen on TV</span>
<p class="ad-eyebrow">★ Featured Transmission ★</p>
<h2>${esc2(p.name)}</h2>
<div class="ad-screen">${p.image_url
? imageFill(p.image_url, p.name, { zoom: true })
: `<span class="ad-glyph">${glyph}</span>`}</div>
<p class="ad-tagline">${esc2(p.tagline)}</p>
<p class="ad-desc">${esc2(p.description)}</p>
<div class="ad-priceline">
<span class="ad-price"><small>ONLY</small>${A().money(p.price_cents)}</span>
<button class="tbtn mg" data-add="${p.id}">Add to Cart ▸</button>
</div>
<p class="ad-footnote">Operators standing by · ${p.stock} unit${p.stock === 1 ? "" : "s"} in the vault · no CODs</p>
</aside>`;
So 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".
<aside class="shop-featured" aria-label="Featured product">
This simple change fixed everything. I did learn a lot about AdBlockPlus and what EasyList will filter out going through this challenge and 24 hours. Be careful what you name your div kids. 💀 A name on one end, will look different to the person coming to your page if not handled correctly.
Top comments (0)