You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
Investigate custom source map filenames in development #1322
Should we consider this breaking? Do you think anyone is relying on the fact that it's webpack:///?
It could cause some confusion for people that regularly see that prefix in chrome dev tools or similar -- maybe a bad side effect for a patch update.
We could put it in 0.10.0 to be safe (I don't think it's too far out) ...
Hello! Sorry to be chiming in so long after this thread and 927c539, but I thought I'd point out a quirk I discovered resulting from the devtoolModuleFilenameTemplate addition.
I've been working with StackTrace.JS as part of an error handling utility I'm developing. StackTrace.JS uses source maps to correct filenames in Error stracktrace frames to their original source file, super useful for development and production error monitoring.
While testing StackTrace.JS's behavior in conjunction with CRA, I noticed that the absolute system paths it outputs as the sourcemap sources unsurprisingly result in absolute system paths in the "corrected" stack trace filenames. This is because there's just no way for the pinpoint() method in stacktrace-gps to translate an asset's system path into its server public path, if the information in sources is all it has.
When browser devtools log errors to the console, the filename portion of stacktraces are typically links that jump to a line:column location in the sources tab/inspector, but this only works if the filenames are either absolute or relative urls. Absolute system paths break this capability.
This isn't a huge deal, at least for my purposes, as I could theoretically map over the StackFrames to re-correct filenames to be root relative before an error gets logged to the console. Still, I wonder whether there's a devtoolModuleFilenameTemplate option that results in something that strikes a happy balance between easy-to-setup Chrome workspaces and normal linkable error stracktrace filenames.
If you don't mind, I'm going to investigate and report back, potentially with a PR.
Ok. After playing with using devtoolModuleFilenameTemplate to produce sources paths that work well with stracktraces that link to the sources panel in browser devtools, I'm realizing that this totally breaks the reactErrorOverlay functionality to jump to source in your editor. The rationale for using absolute system paths in source map sources is a lot clearer to me now.
I also realized that that I was mistaken about how the jump-to-sources links work in the devtools console. If the sourcemap sources contains an entry for http://localhost:3000/Users/blahblah/myproject/src/index.js:162:0 and that's the url printed to the devtools console, it'll link to the source!
Activity
bmeck commentedon Dec 28, 2016
xref: webpack/webpack#3603
gaearon commentedon Feb 11, 2017
Tagging to revisit before 0.10.
gaearon commentedon Feb 15, 2017
Maybe we can just use this line?
https://github.com/aspnet/JavaScriptServices/blob/3c2fd50e8fc843973282ac4bbd63b454234f87e5/templates/ReactSpa/webpack.config.js#L36
gaearon commentedon Feb 15, 2017
Tagging for 0.9.1 because maybe the fix is super easy.
Timer commentedon Feb 23, 2017
Should we consider this breaking? Do you think anyone is relying on the fact that it's
webpack:///?It could cause some confusion for people that regularly see that prefix in chrome dev tools or similar -- maybe a bad side effect for a patch update.
We could put it in 0.10.0 to be safe (I don't think it's too far out) ...
gaearon commentedon Feb 24, 2017
I'm cool with this being in 0.10.0.
gaearon commentedon Feb 24, 2017
We'll want to update these instructions if we change it: #1540
Also would be nice to investigate #1465 at the same time.
16 remaining items
Timer commentedon Apr 25, 2017
Added in 927c539.
gaearon commentedon May 11, 2017
Hmm. So how do we use this? I expected this would make it easy to edit files in Chrome, but I couldn't make it work.
Timer commentedon May 11, 2017
I'd assume we'd need to pass absolute paths...
I'm not sure how do make this work automatically without manually setting the file locations in chrome.
gaearon commentedon May 11, 2017
I'm okay with requiring to set locations, but I couldn't figure out how to do that either.. It just wouldn't set breakpoints for me.
Timer commentedon May 14, 2017
@gaearon this might work after #2128
gaearon commentedon May 14, 2017
Hmm. I'm not sure how I did it but I think it works now. I assume this is the best we can do.
johnloy commentedon Feb 6, 2018
@gaearon @Timer
Hello! Sorry to be chiming in so long after this thread and 927c539, but I thought I'd point out a quirk I discovered resulting from the
devtoolModuleFilenameTemplateaddition.I've been working with StackTrace.JS as part of an error handling utility I'm developing. StackTrace.JS uses source maps to correct filenames in Error stracktrace frames to their original source file, super useful for development and production error monitoring.
While testing StackTrace.JS's behavior in conjunction with CRA, I noticed that the absolute system paths it outputs as the sourcemap
sourcesunsurprisingly result in absolute system paths in the "corrected" stack trace filenames. This is because there's just no way for the pinpoint() method in stacktrace-gps to translate an asset's system path into its server public path, if the information insourcesis all it has.When browser devtools log errors to the console, the filename portion of stacktraces are typically links that jump to a line:column location in the sources tab/inspector, but this only works if the filenames are either absolute or relative urls. Absolute system paths break this capability.
This isn't a huge deal, at least for my purposes, as I could theoretically map over the StackFrames to re-correct filenames to be root relative before an error gets logged to the console. Still, I wonder whether there's a
devtoolModuleFilenameTemplateoption that results in something that strikes a happy balance between easy-to-setup Chrome workspaces and normal linkable error stracktrace filenames.If you don't mind, I'm going to investigate and report back, potentially with a PR.
Thanks for all your great work on CRA, btw!
johnloy commentedon Feb 7, 2018
Ok. After playing with using
devtoolModuleFilenameTemplateto produce sources paths that work well with stracktraces that link to the sources panel in browser devtools, I'm realizing that this totally breaks the reactErrorOverlay functionality to jump to source in your editor. The rationale for using absolute system paths in source map sources is a lot clearer to me now.I also realized that that I was mistaken about how the jump-to-sources links work in the devtools console. If the sourcemap sources contains an entry for
http://localhost:3000/Users/blahblah/myproject/src/index.js:162:0and that's the url printed to the devtools console, it'll link to the source!