Add an "apply source map" button to the profile info panel - #6200
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #6200 +/- ##
==========================================
+ Coverage 83.63% 83.65% +0.02%
==========================================
Files 346 348 +2
Lines 37153 37339 +186
Branches 10315 10376 +61
==========================================
+ Hits 31073 31237 +164
- Misses 5652 5674 +22
Partials 428 428 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| * text (fetched alongside the source maps). Used for scope-tree-based function | ||
| * name resolution. | ||
| */ | ||
| export type SourceMapSymbolicationResult = 'applied' | 'no-match' | 'error'; |
There was a problem hiding this comment.
We can use TS enum classes these days, but this is fine too
There was a problem hiding this comment.
Ah yeah, I always forget that we support them now.
mstange
left a comment
mstange
left a comment
There was a problem hiding this comment.
Seems fine. The UI can probably be improved but it also doesn't cause any harm. Thanks!
| * mappings / sources), and for index maps (which carry a `sections` field and | ||
| * are not supported here). |
There was a problem hiding this comment.
What's an index map? Can you link to a spec or to MDN docs?
There was a problem hiding this comment.
An index map is an alternative format to source maps actually, which is also part of the source map spec: https://tc39.es/ecma426/#sec-index-source-map If I understand correctly, they have sections array as a top level field instead of mappings.
But we currently don't support it because it's not supported by any web bundlers. And I'm not so sure about others, but I think it's safe to say that it's not used that much at all. We can consider adding that support if we notice that there are some important bundlers/compilers that output it. I looked at the source-map package and it looks like it supports it, so it's mostly glue work to make that happen.
(also updated the code comment there to explain it)
Change the return type from `Promise<void>` to a `Promise<'applied' | 'no-match' | 'error'>` so callers can tell a valid-but-unmatched run apart from a worker failure. The existing load-time caller in receive-profile ignores the value, so this is behavior-neutral. The following file based symbolication path will use the result to show proper errors in its UI
Pure helpers for the upcoming "apply a .map file from disk" flow: - getSourcesWithSourceMapURL lists the profile sources that carry a sourceMapURL and are therefore eligible targets for a source map. - parseSourceMapFileContents parses and validates a .map file, rejecting index maps. - matchSourceMapToSource auto-matches a user-supplied map to a source by filename/sourceMapURL basename, returning an 'ambiguous' result (with candidates) when more than one source could match. Handles ?query, backslash paths, and the ".map"/".json" suffixes browsers append when saving a map served as JSON.
Add a thunk that takes a .map file the user selected from disk, parses and auto-matches it to an eligible bundle source (or reports the match as ambiguous so the UI can prompt), then runs it through the existing doSourceMapSymbolication pipeline. Unlike the WebChannel path, eligibility only requires a sourceMapURL (no UUID id), since the map contents are supplied directly rather than fetched.
The profiler already has a full JS source-map symbolication pipeline, but it only runs at load time when the browser provides source maps over the WebChannel. Profiles loaded from a file (or whose maps the browser couldn't fetch) had no way to symbolicate JS stacks. This adds a button in the Profile Info panel that accepts a .map file from disk and feeds it into the applySourceMapFile pipeline. The button is shown whenever the profile has at least one source with a sourceMapURL. It reads the file, runs the apply action, and reports which source was resolved, prompting with a picker when the match is ambiguous and showing an error otherwise.
3 participants
Main | Deploy preview
Fixes #6195.
This PR adds a "Apply source map…" button to the Profile info panel, which can be used to apply any source map from the disk.
This is the new button:
When you select a source map, it looks at the file name of the .map file, and tries to match to any sourceMapURL fields in the source table. If there is a match, it automatically uses that source and applies the source map.
If it can't find any source that matches the name, or if it finds multiple sources that matches the name, then we prompt the user a select input to pick one. Once the source is picked, then we apply the source map at that point to the selected source.
This is the select when it can't match:
We also try to give some feedback to the user:
Here's an example profile to test:
This is a profile of profiler.firefox.com without the source map applied: Production / Deploy preview
And this is the source map for our main bundle: index-XVVABR7J.js.map.zip
(note you have to unzip it before using, apparently github doesn't allow uploading .map file extensions, so I had to zip it)
You can open this profile link, then click on the button and select this source map. You should see the applied source map function names as well as JS source contents.