Access to vue3 app.config.errorHandler? How do you handle client migration from to old to new assets (js/css)

[vladyslav2]

Hello everyone.

• You have a platform where managers update content every couple hours.
• You are using cloudflare pages which purge old content during updates.

Problem: So its possible that client will open website and while he reads and article update occur so he won't be able to fetch js/css files to move to new page. I.E. browser will complain: Failed to fetch dynamically imported module or was blocked because of a disallowed MIME type depends on cloudflare settings.

Solution seems pretty simple - we need to refresh page so browser download new index.html file with correct links for js/css.

While solution seems simple, I haven't found a proper way to do this.
I've been looking for a way to update/extend vue3 error handler, but haven't found a way how to do this with vitepress

const app = createApp(App);
...

app.config.errorHandler = (err, vm, info) => {
  console.error("Error:", err);
  console.error("Vue component:", vm);
  console.error("Additional info:", info);
};

as a workaround solution I monkeypatch console.error method:

onMounted(() => {
  if (typeof window !== 'undefined') {
    const oldErr = console.error;
    console.error = function () {
      if (arguments.length > 0) {
        const msg = arguments[0].toString();
        // /assets/chunks/ViewErrors.B98_KOXD.js Failed to fetch dynamically imported module:
        if (
          msg.indexOf('Failed to fetch dynamically imported module:') !== -1
            && msg.indexOf('/assets/chunks/') !== -1
            && msg.indexOf('.js') !== -1) {
          window.location.reload();
        } else if(
          msg.indexOf('was blocked because of a disallowed MIME type') !== -1
            && msg.indexOf('/assets/chunks/') !== -1
            && msg.indexOf('.js') !== -1) {
          window.location.reload();
        }
      } else {
        oldErr(arguments);
      }
    };
    // console.log(arguments);
    // err(arguments);
  }
});

looks like a very very terrible solution but at least it works.
Any proposal how to make it better?

[brc-dd]

// .vitepress/theme/index.ts

import DefaultTheme from 'vitepress/theme'
import type { Theme } from 'vitepress'

export default {
  extends: DefaultTheme,
  enhanceApp({ app }) {
    // add app.config.errorHandler ...
  }
} satisfies Theme

vitepress handles this by default by the way. You might be doing some very custom stuff, or it might not be happening while routing 👀

[vladyslav2]

vitepress handles this by default by the way.

Can you point me to the code that doing this? I don't think I do something very custom and I wonder why its not working on my end.

thanks for the answer, will try it in a bit

[brc-dd]

vitepress/src/client/app/router.ts

Lines 135 to 153 in 1a2f81d

	} catch (err: any) {
	if (
	!/fetch|Page not found/.test(err.message) &&
	!/^\/404(\.html|\/)?$/.test(href)
	) {
	console.error(err)
	}
	// retry on fetch fail: the page to hash map may have been invalidated
	// because a new deploy happened while the page is open. Try to fetch
	// the updated pageToHash map and fetch again.
	if (!isRetry) {
	try {
	const res = await fetch(siteDataRef.value.base + 'hashmap.json')
	;(window as any).__VP_HASH_MAP__ = await res.json()
	await loadPage(href, scrollPosition, true)
	return
	} catch (e) {}
	}

It only checks that in loadPage part though (i.e. if the user tries to go to another page). Your error might be happening in some other component.