Skip to content

Conversation

nakjun12
Copy link

@nakjun12 nakjun12 commented Aug 25, 2025

  • This is a bugfix
  • This is a feature
  • This is a code refactor
  • This is a test update
  • This is a docs update
  • This is a metadata update

For Bugs and Features; did you add new tests?

I have added a new example to manually reproduce this bug and verify the logging behavior.

Motivation / Use-Case

This PR adds logging to help developers identify when webpack-dev-server ignores HMR and live reload updates after canceling the beforeunload confirmation dialog.

The Problem:
When users cancel the browser's "Leave site?" dialog, the internal isUnloading state gets stuck as true, silently blocking all subsequent HMR updates.

Common Scenarios:

  • Form pages: Users cancel navigation to avoid losing unsaved data
  • Development tools: Tools like LocatorJS trigger beforeunload events when opening files in VSCode

Why This Matters:
Most developers don't realize their updates are being blocked because there's no visible indication. This creates a silent workflow disruption that can be frustrating to diagnose.

Solution:
This PR adds informative logging to make the blocking behavior visible, helping developers understand when and why their updates are being ignored.

Fixes #5571


Proposed Solutions

This PR improves debugging through logging.
I've also explored several approaches to address the root cause and would welcome maintainer feedback on implementation.

Background: I tried using various browser events and setTimeout approaches, but couldn't find reliable indicators for when unload is cancelled.
These proposals consider the discussion in #841.

Option 1: Configuration Control

// webpack.config.js
module.exports = {
  devServer: {
    beforeunload: false // or 'ignore'
  }
};

Let users disable this feature when it disrupts their workflow.

Option 2: Auto Reset State

Reset isUnloading to false immediately after blocking one reload to prevent permanent blocking.

Option 3: Conditional Listener

Only enable beforeunload listener when liveReload: true, since HMR doesn't need full page reloads.

- Add beforeunload-hmr-fallback: Tests bug when HMR fails and falls back to reload
- Add beforeunload-live-reload: Tests bug when liveReload is enabled

Both examples demonstrate the isUnloading flag getting stuck after
canceling the "Leave site?" dialog, blocking subsequent updates.
Log when reload is prevented during beforeunload to help developers
diagnose why hot module replacement or live reload isn't working.
@nakjun12 nakjun12 changed the title feat: add logging for blocked updates when beforeunload is cance feat: add logging for blocked updates when beforeunload is cancelled Aug 25, 2025
### Expected vs Actual Behavior

**Expected**: After canceling dialog, file changes should still trigger page updates
**Actual**: Page updates are completely blocked until manual refresh
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why we need this example?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I initially added this example while working on the improvements, but I kept it because it clearly demonstrates the problem I was experiencing and helps with understanding the issue.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you want to fix the problem, not just logging?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, I tried various approaches but concluded that logging would be sufficient for now.
Would you have any suggestions for a better approach?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately I don't think it can be fixed here, if you have logic beforeunload you need to do it manually refresh the page

Copy link
Author

@nakjun12 nakjun12 Aug 26, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand.
I think logging alone would help developers understand why HMR stops working.
I'll remove the examples. Would that be okay?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's make only one example and provide lines how to fix it (i.e. reloading) - adding comment in code and in readme (in example)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

isUnloading flag stuck as true after user cancels "Leave site?" dialog, blocking HMR/Live Reload
2 participants