Handle chunk load errors gracefully with automatic reload and version notifications

[Copilot]

When users return to Compass after a deployment, navigating to code-split routes fails with ChunkLoadError because old chunks are no longer on the server. Refreshing fixes it, but users don't know this.

Changes

Automatic chunk error recovery

• useChunkLoadErrorHandler hook detects chunk load failures and triggers page reload
• Guard flag prevents reload loops from multiple simultaneous errors
• Handles both ErrorEvent and PromiseRejectionEvent

Proactive version checking

• useVersionCheck hook polls /version.json every 60s to detect new deployments
• Download icon appears in sidebar when update is available
• User clicks icon to reload at their convenience
• Skipped entirely in development mode

Build-time version tracking

• Webpack generates unique version hash (timestamp + random) during production builds
• version.json emitted as build artifact with current version
• BUILD_VERSION constant injected via DefinePlugin for runtime comparison

Implementation

// Automatic recovery - no user action needed
useChunkLoadErrorHandler(); // In App.tsx

// Proactive notification - user controls timing
const { isUpdateAvailable } = useVersionCheck();
{isUpdateAvailable && (
  <DownloadIcon onClick={() => window.location.reload()} />
)}

Before

After

Users either get automatic seamless reload or see a clickable download icon in the sidebar bottom-left indicating an update is available.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Chunk load error | Unhandled Rejection</issue_title>
<issue_description>### Where did this happen?

Hosted (app.compasscalendar.com)

Expected Behavior

There is a smooth process for existing users to get the new version after it is published

Current Behavior

When an existing user revists compass and attempts to go to a page that has been newly code-split, they get this error. If they refresh, the chunk is loaded. However, it's not apparent to the user that this is the case.

Steps to Reproduce

No response

Possible Solution

Create a smooth version upgrade process that supports this use-case.

Create a way to track versions

When a user visit Compass, check if they have the latest version.

If not, add a subtle icon to bottom of the left sidebar. When clicking the icon or hovering, it should notify the user that there is a new update and encourage them to refresh the page to get the latest

Context

This'll help users feel confident that Compass won't break when trying the new stuff</issue_description>

<agent_instructions>Make this smooth and good UX. Follow established conventions for implementing this, but keep it simple</agent_instructions>

Comments on the Issue (you are @copilot in this section)

• Fixes Chunk load error | Unhandled Rejection #1431

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[tyler-dane]

Closing in favor of #1431