I have sourcemaps working when error are thrown but React has some special warnings that create stacktraces of its own in reactdom (when development mode). Is it possible to have sourcemaps loaded in these stacktraces?
We are building using webpack and I have tried almost all config setups :) Not sure if its actually possible to get sourcemaps loaded when stacktraces are logged like this?
The output comes from the following code in react-dom.development.js
:
function printWarning(level, format, args) {
// When changing this logic, you might want to also
// update consoleWithStackDev.www.js as well.
{
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
var stack = ReactDebugCurrentFrame.getStackAddendum();
if (stack !== '') {
format += '%s';
args = args.concat([stack]);
} // eslint-disable-next-line react-internal/safe-string-coercion
var argsWithFormat = args.map(function (item) {
return String(item);
}); // Careful: RN currently depends on this prefix
argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
// breaks IE9: https://github.com/facebook/react/issues/13610
// eslint-disable-next-line react-internal/no-production-logging
Function.prototype.apply.call(console[level], console, argsWithFormat);
}
}
The stacktraces is fetched using this:
if (prefix === undefined) {
// Extract the VM specific prefix used by each line.
try {
throw Error();
} catch (x) {
var match = x.stack.trim().match(/\n( *(at )?)/);
prefix = match && match[1] || '';
}
} // We use the prefix to ensure our stacks line up with native stack frames.
return '\n' + prefix + name;
react-dom.development.js:86 Warning: Prop `sizes` did not match. Server: "246px" Client: ""
at source
at Source (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:9062:5)
at picture
at Picture (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:8942:5)
at div
at https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:1952:5
at CardMedia (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:4476:5)
at div
at https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:1952:5
at CardContent (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:4359:5)
at a
at https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:10323:5
at div
at https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:1952:5
at div
at https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:1952:5
at CardFrame (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:4403:5)
at CategoryCard (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:3213:5)
at CardRenderer (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:3077:5)
at li
at ScrollerItem (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:11893:5)
at ol
at div
at https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:11453:5
at div
at Scroller (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:11771:5)
at div
at div
at Container (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:5586:5)
at ConditonalWrapper (https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:14324:5)
at div
at https://sitecore.nw.local/static/hbd/hbd-core.7ba76711.js:1952:5
at CardList (https://sitecore.nw.local/static/hbd/hbd.86c176f3.js:1248:5)
at ConnectFunction (https://sitecore.nw.local/static/hbd/vendors.c78f2057.js:45074:68)
at IntlProvider (https://sitecore.nw.local/static/hbd/vendors.c78f2057.js:44228:43)
at Provider (https://sitecore.nw.local/static/hbd/vendors.c78f2057.js:44815:20)
at StoreProvider (https://sitecore.nw.local/static/hbd/hbd.86c176f3.js:34359:5)
at HydratingCardList (https://sitecore.nw.local/static/hbd/hbd.86c176f3.js:1168:5)
Is is possible to map this through my sourcemaps in some way? Or am I chasing something impossible? :)