fix(demo): build and route client source maps so Faro can symbolicate stack traces#2047
Open
o6ivp wants to merge 2 commits intografana:mainfrom
Open
fix(demo): build and route client source maps so Faro can symbolicate stack traces#2047o6ivp wants to merge 2 commits intografana:mainfrom
o6ivp wants to merge 2 commits intografana:mainfrom
Conversation
… stack traces
The demo's `vite build` doesn't emit source maps, and Alloy's
`faro.receiver.sourcemaps { }` is left as the default — so on a
client-side error Alloy logs:
err="Get http://localhost:5173/.../...js: dial tcp [::1]:5173: connect: refused"
Two minimal changes:
- `demo/vite.config.ts`: set `build.sourcemap: true` so each chunk
is emitted alongside its `*.js.map`.
- `infra/alloy/config/config.alloy`: add a `sourcemaps.location` block
mapping the browser-facing `http://localhost:${DEMO_PORT}/` to the
compose-internal `http://${DEMO_HOST}:${DEMO_PORT}`, reusing existing
env vars.
After the fix, stack frames in Loki resolve to the original TypeScript
source (e.g. `ErrorInstrumentation.tsx:7:5`).
Closes grafana#2043.
Adds a Cypress regression test that clicks the "Throw an error" button on `/features`, intercepts the `/collect` POST, reads the first stack frame's filename, and `cy.request`s both that URL and its `.map` sibling. If `build.sourcemap: true` ever gets dropped from `demo/vite.config.ts`, the `.map` request returns 404 and this test fails — preventing a silent regression of the Faro symbolication path. The existing CI matrix (`yarn quality:e2e:ci`) does not run the LGTM stack, so this test is intentionally limited to the browser-side prerequisite (sourcemap is built and served). The Alloy-side URL rewrite added in the same commit is not exercisable from CI today.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
The demo's
vite build --outDir dist/clientdoes not emit any*.js.mapfiles becausedemo/vite.config.tsdoes not setbuild.sourcemap, so Vite's default (false) applies. Even if it did, Alloy'sfaro.receiver.sourcemaps { }is left as the empty default — it would fetch the source map from the URL the browser sends (http://localhost:5173/...), butlocalhostinside the Alloy container is the container's own loopback, not the demo's published port.When a client-side error reaches Faro (e.g. by clicking the "Throw an error" button at
/features/error-instrumentation), Alloy logs:Stack traces still land in Loki, but minified — the developer cannot tell which
.tsxfile or line threw, defeating Faro's signature symbolication feature.What
Two minimal, paired changes (and one Cypress regression test):
demo/vite.config.ts: setbuild.sourcemap: trueso each chunk is emitted alongside its*.js.map.infra/alloy/config/config.alloy: replacesourcemaps { }with alocationblock mapping the browser-facing URL prefix (http://localhost:${DEMO_PORT}/) to the compose-internal hostname (http://${DEMO_HOST}:${DEMO_PORT}). Both env vars are already defined in.env.cypress/e2e/demo/sourceMaps.cy.ts: a new regression test that clicks the "Throw an error" button, reads the first stack frame's filename from the/collectPOST, andcy.requests both that URL and its.mapsibling. Ifbuild.sourcemap: trueever gets dropped fromdemo/vite.config.ts, the.mapreturns 404 and this test fails.The two config changes are coupled — neither is useful without the other — so they ship together.
Verification
Run locally on
main+ this branch (and on top of #2035 / #2037 / #2038 to bring up the full stack).Source maps are now built:
Reachable from inside the Alloy container's network:
Alloy parses the source map:
End-to-end symbolication — a Faro POST mimicking the demo's "Throw an error" path lands in Loki with the stack frame resolved to the original TypeScript source:
That matches
demo/src/client/pages/Features/ErrorInstrumentation.tsx:7wherethrow new Error('This is a thrown error');lives.Cypress regression suite (existing 5 errors tests + new sourceMaps test) all pass:
The new test deliberately scopes to the browser-side prerequisite (sourcemap is built and served) because the existing CI matrix does not run Loki / Alloy / Tempo / Mimir. The Alloy-side URL rewrite is verified manually above and protected from accidental removal by the explicit
locationblock.Links
Closes #2043
Checklist
build.sourcemapis droppedrelease-pleasevia the conventional commit message