Self-Hosting Core Web Vitals Collection for a Quiet Blog
Moved a Core Web Vitals collection setup designed for shared observability infrastructure to my personal blog. Fixed a dashboard left empty by sparse traffic and changed when metrics are collected for ordinary browsers. This post records the changes from October 17 to 22, query omissions investigated on October 23, and what five days of data can support.
·32 min read
◆ Core Web Vitals 직접 수집하기 · Part 3
#web-performance#devops#debugging
Sending the Core Web Vitals of an App Webview to a Shared Observability Platform
Sent the Core Web Vitals measured in an app webview to an observability platform shared by many teams. The webview gave no signal on leaving, and tail sampling, delta-to-cumulative conversion and Tempo queries each dropped values in their own way without raising an error. For every setting that could not be changed, re-measured what was lost in a reproduction environment.
·Updated ·37 min read
◆ Core Web Vitals 직접 수집하기 · Part 2
#web-performance#debugging#browser
Sending Core Web Vitals at the Moment of Leaving the Page
Traced why CLS and INP go missing when the page is left, through the transport of OTel JS and the order in which flush runs.
·Updated ·22 min read
◆ Core Web Vitals 직접 수집하기 · Part 1
#web-performance#debugging#browser
When Does web-vitals Report Core Web Vitals
Checked the conditions under which web-vitals 6.2.3 reports each metric, and why INP goes missing when the page is left right after a click.
·Updated ·33 min read
◆ Building coldpath · Part 4
#bundler#debugging#compiler
How Bundlers Remember Imports
Tracing a coldpath misclassification that read every synchronous dependency in the Turbopack analysis file as a static import. This post compares the graph information and build output of webpack, Turbopack, Vite, and esbuild, and looks at which clues reveal the original syntax and which cases cannot be recovered.
·29 min read
#nextjs#react#debugging
Pages You Leave Don't Die, They Hide: Next.js cacheComponents and React Activity
Next.js 16's cacheComponents hides the pages you leave with React Activity instead of unmounting them. Following a three.js canvas that went blank after a back navigation, I read the router, React, and react-three-fiber source and reproduced it in a browser.
·34 min read
◆ Building coldpath · Part 3
#debugging#web-performance
Tracing Toss Securities JavaScript Without Source Maps
Chuseok side quest, part 3: with love, to Toss Securities
·26 min read
◆ Building coldpath · Part 2
#web-performance#bundler#debugging
Building a Bundle Analyzer with V8 Coverage and Source Maps
Chuseok side quest, part 2: building a V8 coverage analyzer, one dead end after another.
·24 min read
◆ Building coldpath · Part 1
#web-performance#bundler#blogging
Tracing When This Blog's JavaScript Actually Runs
Chuseok side quest, part 1: starting with my own blog
·20 min read
#bundler#web-performance#debugging
Tearing Apart a Third-Party SDK and Rebuilding It My Way: Without Touching a Single Line of Logic
I imported one constant and 97.7% of the bundle came along with it. The vendor had no timeline for a fix, so I pried open the published source maps, recovered over 400 TypeScript files, and rewrote the build, the entry points, and the dependencies however I wanted. Everything except the logic. That got /send to -77.5% raw. The hard part came after. All 1,932 tests passed, and a few of them were watching nothing at all.
·41 min read
◆ Service Worker Caching Deep Dive · Part 3
#service-worker#web-performance#caching
Measuring the Cost of Going Through a Service Worker: Building in the Lab the Control Group GA4 Could Not Give Me
I set out to confirm the 500 ms hint that part 2 left behind, but the hard reloads that would form the control group arrive at under one a day. So I built the control group myself, with Playwright and a shaping proxy, and found that going through the worker costs 2 ms on a navigation, and that the cost is not latency but the bytes the worker fetches in the background on every click. The gap I had left between the lab and the field turned out, only after the post was written, to be a measurement definition difference created by 103 Early Hints. Third part of the service worker caching deep dive series.
·Updated ·50 min read
#debugging#bundler#nextjs
Next.js Turbopack Turned One Singleton into Two: A Scope Hoisting Bug and a Circular Import
In a Next.js 16 Turbopack production build, a module-scope singleton became two live instances at runtime. Inside the same synchronous block, one condition contradicted the other, and responses that arrived in 30ms still timed out. This is the record of tracing the cause through the bundle output: a partial scope hoisting merge, a circular import, an upstream bug that had already been fixed, and the single-variable experiment I ran too late.
·16 min read
#animation#web-performance#debugging
Killing Frame Drops in a framer-motion Banner: Two Wrong Turns and One Easing Function
A banner built with framer-motion made the entire home screen stutter for the 0.6 seconds it took to open. The record of guessing the cause from the code, having that guess overturned twice by measurement, and finally removing the reflow with a single easing function. Plus what the work left behind: the gap between declaration and execution, the principle that properties decide performance, preserving mechanisms, suspecting your instruments first, and proving sameness with a curve.
·30 min read
#typescript#blogging#npm
What Happens When You Install typescript@7: A Blog Monorepo Migration Log
I dropped typescript 7.0.2 into a monorepo where pnpm lint took 12 minutes 32 seconds. Type checking passed quietly, but next build broke and lint crashed. A record of the chain reaction from one day of swapping eslint and prettier for oxlint and oxfmt, with before-and-after measurements. To say it up front, the build did not get any faster.
·11 min read
◆ Kubernetes for Frontend Developers · Part 4
#kubernetes#devops#debugging
How Do Pods Terminate? Measuring the Causes and Fixes of Deploy-Time Errors
Even a deploy that changes not a single line of code leaks errors. This is a measured record of tagging every failure that leaks during rolling deploys by type and timestamp, performing an autopsy on four causes, and stacking prescriptions one layer at a time until the count reaches zero. Includes the actual Next.js shutdown code, hostage draining, and the real CrashLoopBackOff timetable. Part 4 of the Kubernetes for frontend developers series.
·Updated ·20 min read
◆ Kubernetes for Frontend Developers · Part 3
#kubernetes#networking#devops
How Does Traffic Reach My Pod? From ClusterIP to port-forward
A Service's ClusterIP is an IP attached to no machine, yet curl reaches it. iptables rules and conntrack, EndpointSlice, cluster DNS and ndots, Gateway, and port-forward: a record of opening up the entire path a request takes to a pod, directly in a kind cluster. Part 3 of the Kubernetes for frontend developers series.
·27 min read
#memory#nodejs#v8
A Guide to Node.js Memory Limits and Leak Tracking
A look at V8's generational garbage collection, adjusting heap memory limits, and practical ways to diagnose memory leaks.
·7 min read
#error-handling#javascript#async
Handling Uncaught Async Errors in JavaScript Correctly
Why try...catch misses errors thrown in async functions, and how to handle every case: IIFEs, forEach, promise chains, constructors, event listeners, and global safety nets.
·12 min read
#ci-cd#git#devops
Why GitHub Actions Cron Jobs Run Late, and What to Use Instead
Why GitHub Actions scheduled workflows get delayed by dozens of minutes: the structural causes, and free alternatives that actually run on time.