fix: handle reload page when get the chunk load errors

[quangtuanitmo18]

Problem

After deployment, when build scripts are updated on the server, users with Hawk open in their browser encounter errors because the old client version tries to load dynamic chunks with filenames that no longer exist.
Example errors: Failed to fetch dynamically imported module or Loading chunk X failed

Solution

1. Implemented loadAsyncComponent utility with automatic chunk loading error handling:
2. Detects chunk loading errors via pattern matching
3. Automatically reloads the page on first error
4. Prevents infinite reloads using sessionStorage
5. Clears the flag on successful load

[quangtuanitmo18]

2025-12-30.15-41-45.mp4

In DevTools, I blocked the request URL for one of the chunks (page /account/general).
When navigating to the page, chunk loading error was detected and then page automatically reloaded once

[neSpecc]

are you sure it is necessary?

further errors

what kind of errors?

[quangtuanitmo18]

here we can just throw error

[Copilot]

Pull request overview

This PR implements an automatic chunk loading error handler to prevent errors when users have an old client version after deployment. The solution wraps dynamic imports with error detection and triggers a page reload when chunk loading failures occur.

Key changes:

• New loadAsyncComponent utility with pattern-based chunk error detection and automatic reload mechanism
• Integration across all router lazy-loaded components to handle deployment-related chunk errors
• Conversion of a manual async component definition to use the new utility

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
src/utils/loadAsyncComponent.ts	New utility file implementing chunk load error detection, sessionStorage-based reload tracking, and wrapper functions for async component loading
src/utils.ts	Exports the new loadAsyncComponent utilities and reorganizes type imports to group them at the top
src/router.ts	Wraps all lazy-loaded route components with loadAsyncComponent to enable automatic error handling
src/components/utils/Json.vue	Converts manual defineAsyncComponent usage to use the new createAsyncComponent utility

Comments suppressed due to low confidence (1)

src/components/utils/Json.vue:24

• The return statement is missing the destructured default property. The import returns { default: T } but the code is now returning the entire module object instead of extracting the default export. This will cause the component to not be properly loaded.

const VueJsonPretty = createAsyncComponent(async () => {
  const [component] = await Promise.all([
    import('vue-json-pretty'),
    import('vue-json-pretty/lib/styles.css'),
  ]);

  return component;

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.