惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

aimingoo的专栏
aimingoo的专栏
Engineering at Meta
Engineering at Meta
有赞技术团队
有赞技术团队
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
Vercel News
Vercel News
G
Google Developers Blog
Blog — PlanetScale
Blog — PlanetScale
IT之家
IT之家
MongoDB | Blog
MongoDB | Blog
Y
Y Combinator Blog
B
Blog
The GitHub Blog
The GitHub Blog
M
MIT News - Artificial intelligence
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
Stack Overflow Blog
Stack Overflow Blog
C
Check Point Blog
Microsoft Azure Blog
Microsoft Azure Blog
D
DataBreaches.Net
I
InfoQ
Recent Announcements
Recent Announcements
阮一峰的网络日志
阮一峰的网络日志
腾讯CDC
H
Help Net Security

DEV Community

Authentication Security Deep Dive: From Brute Force to Salted Hashing (With Java Examples) Why AI Systems Don’t Fail — They Drift Spilling beans for how i learn for exam😁"Reinforcement Learning Cheat Sheet" I Replaced Chrome with Safari for AI Browser Automation. Here's What Broke (and What Finally Worked) How Python Borrows Other People's Work The $40 Architecture: Processing 1 Billion API Requests with 99.99% Uptime Vibe Coding: A Workflow Guide (From Zero to SaaS) Most webhook security guides protect the wrong side. The scary part is delivery. Headless CMS for TanStack Start: Build a Blog with Cosmic EU Age Verification App "Hacked in 2 Minutes" — What Actually Happened Comfy Cloud’s delete function does not actually remove files Running AI Models on GPU Cloud Servers: A Beginner Guide Event-driven media intelligence with AWS Step Functions and Bedrock I scored 500 AI prompts across 8 quality dimensions — here's what broke How to Call Google Gemini API from Next.js (Free Tier, No Backend Needed) The Portal Protocol: Reclaiming Human Connection in the Age of AI How to Fix Your Team's Scattered Knowledge Problem With a Self-Hosted Forum Intro to tc Cloud Functors: A Graph-First Mental Model for the Modern Cloud Designing Multi-Tenant Backends With Both Ownership and Team Access I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned PostgreSQL Performance Optimization: Why Connection Pooling Is Critical at Scale Cómo construí un SaaS multi-rubro para gestionar expensas en Argentina con FastAPI + Vue 3 🚀 I Built an Ethical Hacking Scanner Tool – Open Source Project I Replaced /usage and /context in Claude Code With a Single Statusline A Pythonic Way to Handle Emails (IMAP/SMTP) with Auto-Discovery and AI-Ready Design I Collected 8.9 Million Polymarket Price Points — Here's What I Found About How Markets Really Move EcoTrack AI — Carbon Footprint Tracker & Dashboard Everyone's Using AI. No One Agrees How. 5 self-hosted ebook managers worth trying in 2026 Building Your First AI Agent with LangChain: From Chatbot to Autonomous Assistant
WebLLM Works in Dev But Fails on Vercel: The CSP Directiv...
Michael Stel · 2026-05-07 · via DEV Community

WebGPU was detected, the consent dialog appeared, the user granted consent, and the network tab showed a clean 200 OK on the WASM fetch. Then nothing. No console output, no progress events. The UI showed "Enhanced analysis unavailable. Try again." In npm run dev, against the same code on the same browser, everything worked.

I almost spent an afternoon on the wrong theory. The reason I didn't is the reason for this post.

When you're debugging, anomalies are easier to chase than absences. The 200 OK had a body of 0.3 KB, which is anomalous for a binary asset that should be a few megabytes. The console was silent, which is an absence. I led with the anomaly. That was the mistake.


The Wrong Hypothesis

The 0.3 KB number had a tidy explanation. A Git LFS pointer file is roughly 130 bytes plus HTTP overhead. raw.githubusercontent.com is well known for not serving LFS content from some repos: instead of redirecting to media.githubusercontent.com (which actually serves the binary), it returns the pointer text. If you fetch what you think is a 50 MB asset and get back 130 bytes of YAML-looking text, that's why.

The story almost wrote itself. WebLLM downloads the WASM. The WASM is actually an LFS pointer. The worker tries to call WebAssembly.instantiateStreaming() on the pointer text, fails immediately, and the fallback chain swallows the error. Plausible, mechanical, and it explained both the response size and the silent failure.

It was also wrong.

I pulled the .gitattributes from mlc-ai/binary-mlc-llm-libs/main. The entire file:

app-release.apk filter=lfs diff=lfs merge=lfs -text
mlc-chat.apk filter=lfs diff=lfs merge=lfs -text

Enter fullscreen mode Exit fullscreen mode

Two lines. Only .apk files are LFS-tracked. WASM files are stored as regular Git blobs, which means raw.githubusercontent.com serves them directly with no pointer indirection. The theory was elegant and irrelevant.

This took thirty seconds to disprove. I'd been ready to spend hours on it.

The 0.3 KB number itself is still unexplained. Most likely a transient, a misread, or a path that 404'd with a small body served as 200 by an intermediary. Once the actual bug was fixed, the file fetched at the expected size and never showed up small again.

The lesson was sitting in plain sight the whole time. The console was silent. Silent. Not silent-after-an-error, not silent-with-a-warning, but silent across an entire failure path that was supposed to log progress events, then a model load completion, then inference timing. None of those fired. The anomaly told me where the bytes went. The absence told me the worker never got far enough to log anything.

If I'd led with the absence, I would have been looking for "what stops a worker from logging anything at all" within minutes. Instead I spent an hour on a theory about a domain I happened to find interesting.


The Actual Bug

The CSP deployed to Vercel, abridged:

default-src 'self';
script-src 'self' https://analytics.example.com;
worker-src 'self' blob:;
connect-src https://analytics.example.com
            https://huggingface.co
            https://*.huggingface.co
            https://raw.githubusercontent.com;

Enter fullscreen mode Exit fullscreen mode

Notice what's missing from script-src. From MDN:

By default, if a CSP contains a default-src or a script-src directive, then a page won't be allowed to compile WebAssembly using functions like WebAssembly.compileStreaming(). The wasm-unsafe-eval keyword can be used to undo this protection.

WebLLM's worker calls WebAssembly.instantiateStreaming() on the model_lib WASM as part of engine initialization. With no 'wasm-unsafe-eval' in script-src, the browser refuses to compile and throws a CompileError inside the worker. The worker's onerror is caught by the CoachingProvider fallback chain, which is designed to fail gracefully: WebLLM fails, try Ollama, then fall back to rule-based. The architecture was handling errors correctly. The errors should not have been swallowed in the first place.

There were no diagnostic logs because every one of them was gated on import.meta.env.DEV and stripped from the production build. I'd treated error-path logging as production noise, which is the same as not having it.

The fix is one directive:

script-src 'self' 'wasm-unsafe-eval' https://analytics.example.com;

Enter fullscreen mode Exit fullscreen mode

The directive is narrower than 'unsafe-eval' and is the safe choice for this case. The fix worked.


Why This Pattern is Treacherous

Three things composed to hide the failure.

The dev/prod CSP asymmetry is structural. Vite's dev server doesn't apply vercel.json headers. Any CSP-gated capability is unrestricted locally and enforced remotely. The same code path produces different runtime behavior across environments. "Works on my machine" is the literal truth.

Worker errors don't surface like main-thread errors. They propagate only through the worker's onerror event. If something catches that event for graceful degradation, the error is invisible unless the catch block logs it.

Production console hygiene fights you. Stripping logs is a defensible default, but error-path logs are not noise. They're the only signal that lets you debug failures users are actually hitting. When a try/catch lives inside a fallback handler, the catch block's logging is production-relevant even when the surrounding info logs aren't.

Each of these alone is benign. The intersection makes a failure mode that's invisible from both ends: no error in the user's UI, no error in the developer's console, no error in the deploy logs. The bug was actively being handled correctly by code that didn't know it was the bug.


What Changed After

Three changes landed in the fix PR.

The CSP directive. One line in vercel.json. Adding 'wasm-unsafe-eval' to script-src permits WebAssembly compilation and nothing else. WASM runs in its own sandbox, has no DOM access, and can only call back into JavaScript through imports the host page explicitly provides. It's the directive CSP3 added specifically so libraries like WebLLM wouldn't have to ask for 'unsafe-eval', which is genuinely riskier.

Removed import.meta.env.DEV gating from error-path logs in the WebLLM worker and the CoachingProvider fallback chain. Info and progress logs stay DEV-gated. Errors and fallback transitions surface in production. The principle, now written into the project conventions doc: gating an error log on DEV is the same as not having it. Treat it as the exception that needs justification, not the default.

Wired CSP violation reporting through Umami custom events. The securitypolicyviolation event fires regardless of whether report-to is configured in the CSP. Subscribing in the main entry point routes future violations into existing analytics:

document.addEventListener('securitypolicyviolation', (e) => {
  if (window.umami) {
    window.umami.track('csp-violation', {
      directive: e.violatedDirective,
      blockedURI: e.blockedURI,
      effectiveDirective: e.effectiveDirective,
    });
  }
});

Enter fullscreen mode Exit fullscreen mode

No new infrastructure. The next CSP issue will be diagnosable in seconds.


The Takeaway

If you're debugging a WebLLM failure that works in dev and fails silently on Vercel, the answer is almost certainly 'wasm-unsafe-eval'. That's the practical takeaway.

The deeper one: when something fails, look at what's missing before you look at what's strange. Anomalies attract attention because they're concrete. You can hold a 0.3 KB response in your head and build theories about it. Absences are harder to notice because they're, by definition, not there. But the absence is usually the more honest signal. The anomaly tells you something happened. The absence tells you something didn't, which is closer to where the failure actually lives.

The thirty-second check almost always exists. Run it.


I'm building Holocron, a browser-based combat log analyzer for Star Wars: The Old Republic. The earlier WebLLM spike post covers why I chose this stack. Holocron is free and requires no install — try it at holocronparse.com.