New issue
Advanced search Search tips

Issue 918367 link

Starred by 2 users

Issue metadata

Status: Unconfirmed
Owner: ----
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

Webpack style HMR causes MacOS Chrome tab to crash or hang

Reported by brad.k.h...@gmail.com, Dec 31

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce the problem:
1. Build a project that uses Webpack Dev Server Hot Module Reloading (WDS-HMR) for style changes, ie. using style-loader.
2. Load the project, making sure dev panel reports a successful connection to the WDS server.
3. Make a style change in text editor and save it
4. Notice that the dev panel reports the change
5. Notice the appearance in the browser tab updates to reflect the style change
6. Make another style change in text editor and save it 

What is the expected behavior?
Assuming a local network connection, WDS in dev panel should report receiving an update after change styles, and then the browser tab should update shortly after.

What went wrong?
Dev panel may or may not report the change was detected. The browser tab becomes unresponsive and CPU usage becomes very high, and the only way to stop it is to use the Chrome task manager; reload/stop does nothing, tab cannot be closed. Resizing the dev panel shows that the area behind the dev panel is not being redrawn. After some time has passed (10-20 seconds?) the browser tab finally updates, and if it didn't before, dev panel notes that WDS has received the update, and CPU usage returns to normal. However, sometimes the tab just immediately crashes after receiving the WDS update and no hanging occurs.

Did this work before? N/A 

Chrome version: 71.0.3578.98  Channel: stable
OS Version: OS X 10.14
Flash Version: 

This issue only occurs on Chrome 71 for MacOS, not any other browser or OS.

My suspicion was that this was caused by something in Chrome's rendering engine trying to process the new styles that were inserted into the HTML via Webpack. I tried to use the dev tools profiler to narrow down the exact location of the issue, so I booted the profiler and then made a style change and waited for the hang. Lo and behold, the hang does NOT occur if the profiler is running, and the browser updates normally! It's almost like the quantum observer paradox. :)
 
I have not confirmed whether the issue occurs on older versions of Chrome for Mac OS.
I have tested this on Chrome 69 for Mac OS and can confirm it is an issue there as well.
The issue mostly seems to occur under the following circumstances:

1. The page has just been manually refreshed.
2. The dev panel is open.
3. HMR emitted a style update, while the dev panel is still open.
4. HMR emitted another style update, while the dev panel is open.

Any of the following things can prevent the issue from happening:

a. Following a manual page refresh, emitting any number of HMR updates with the dev panel closed, and keeping it closed.
b. Following a manual page refresh, emitting any number of HMR updates with the dev panel closed, then opening it, and then continuing to emit HMR updates.
c. Following a manual page refresh, emitting just one HMR update while the dev panel is open, then closing the dev panel, then emitting any number of additional HMR updates. 
Also note, connecting to the remote debugger for console output does not seem to trigger the issue. It's specifically related to the dev panel being open.

Also, it doesn't matter how the dev panel is docked. If it is undocked, even if its minimized, it still causes the hang.
Confirmed that the issue is still specific to Chrome and MacOS, even when trying the dev panels of other browsers and also when trying Chrome on Windows with the dev panel open.
Labels: Needs-Triage-M71
Cc: vamshi.kommuri@chromium.org
Components: -Blink Blink>Loader
Labels: Needs-Feedback Triaged-ET
Thanks for filing the issue!

@Reporter: Could you please share a sample test file/URL which helps us to triage this further in a better way.
I am not sure of the best way to do that. The code triggering it is part of a proprietary project and I don't have rights to share it. If I have time perhaps I can isolate the exact part and create an equivalent.
Project Member

Comment 9 by sheriffbot@chromium.org, Jan 2

Labels: -Needs-Feedback
Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
Here is the accompanying Webpack Style Loader issue I filed: https://github.com/webpack-contrib/style-loader/issues/358.
Labels: TE-NeedsTriageHelp
brad.k.harms@ Thanks for the issue.

As this issue is related to 'Blink>Loader', this is out of scope of triaging at TE end. Hence adding 'TE-NeedsTriageHelp' and requesting the team to look into the issue and help further.

Thanks..
Labels: Needs-Feedback
Not actionable without a repro.

brad.k.harms@: Please let us know once you got a shareable minimum repro.
Thanks!

Sign in to add a comment