Console shows many "DevTools failed to load source map" warnings

[fvsch]

This is an upstream Chrome DevTools issue (and Firefox DevTools has a similar one too), but opening it here at the invitation of Chris (https://twitter.com/codepo8/status/1542844440078860289).

Browsers may download JS or CSS code which have a source map URL, but that URL may not be reachable for a number of reasons: .map files filtered out in the deployment process, filtered out by servers, etc. And while technically it’s a flaw in the website, those often don’t get fixed because they don’t impact the vast majority of end users.

On https://stackblitz.com (e.g. at https://stackblitz.com/edit/nextjs) it can be especially egregious because we run Node.js code and packages in the browser, including processes that create development web servers that may serve hundreds of scripts. For complex reasons serving source maps with those servers doesn't work on stackblitz.com currently. So we end up with hundreds of warnings generated by DevTools that make it impossible to see more relevant logs, warnings and errors. The following screenshot has 209 warnings about source maps:

What's more, it doesn't respect any of those two options:

• "Hide network" (it's technically a network issue…)
• "Group similar messages in console" (there was no grouping of the 209 messages)

Any intervention in DevTools that reduces this noise — especially in a HTTP/2+ world with potentially many resources and many source maps — would be appreciated.

AB#40274880

[captainbrosset]

Thanks so much Florens for filing this. I'll get this on our team's radar.

[tobybaratta]

+1 on this - it's quite noisy and gets a bit concerning when trying to debug other issues

[captainbrosset]

Totally understand the frustration. It seems like the "Group similar messages in console" should work on these messages too. It's on our team's backlog. People can help prioritize this by leaving comments and reactions on this issue.

[captainbrosset]

I just tested https://stackblitz.com/edit/nextjs today, to see if I could find an existing console setting that would help, and realized that Edge and Chrome didn't behave the same:

As you can see in Edge, no source map warnings appear at all. I checked that both browsers had the same default levels set, and the same console settings. So, apparently, in Edge we did something that hides those browser-level source map warnings. Although using Edge would help @fvsch debug in this case, this feels to me more like a bug than an implementation choice. At least something to investigate.

But, I did find something that can help you in Chrome:

• Open the Console sidebar (using the little arrow icon that's all the way to the left of the console toolbar)
• In the sidebar, click the X user messages tab.

This should only show your messages and hide the 200+ source map warnings.

[fvsch]

Thanks for looking into this @captainbrosset. I’ll have to try the Chrome "user messages" filter and maybe find a way to add that to our own docs.

[captainbrosset]

@fvsch did you have a chance to try the user messages filter? Does it meet your needs?

[fvsch]

@captainbrosset I confirm that the "User messages" filter is a good workaround. We might recommend it in our user documentation.

[captainbrosset]

Thanks a lot for getting back to us on this. Closing now.

[fvsch]

Correction: it's not a good workaround.

I just spent a bunch of time missing errors logged in the console because I had selected the "User messages" filter, which only shows console.log messages, and will filter out JS errors and console.error, console.warn, etc.

I can't offer this solution to our users, as it will make them miss important message (coming from their own code or from tooling that compiles their code). Too much of a footgun.

[fvsch]

Hmm, no that's not exactly it.

The “User messages” filter does show console.error and console.warn messages, but it will hide important messages such as native JavaScript errors.

So in my case I had a document that didn’t render anything, and seemed to have no blocking error when using the “User messages” filter:

But the blocking error was a JS TypeError, not appearing in “User messages”:

And for context, I was trying to use the “User messages” filter to silence these 1180 warnings from DevTools about inaccessible sourcemaps:

The next best option I found is using -DevTools in the filter text input, but that carries a risk of silencing legitimate messages.

I guess ideally I would need DevTools to either categorize those source maps warnings as “Verbose”, or group them in a collapsible group, or both.

[captainbrosset]

Thanks for the added details Florens. I re-opened this issue. It's on the backlog of our DevTools team.

[fvsch]

It looks like Chrome 117 is moving those source map loading warnings outside of the Console and into a dedicated panel: https://twitter.com/jecfish/status/1694076347742625832