Nuxt sometimes ending up in broken state with false in console pointing to nuxt-booster-message-weak-hardware

[codeflorist]

Describe the bug
I'm periodically seeing my Nuxt app ending up in a broken non-interactive state. - requiring a complete reload.

This is the warning, that is displayed in the console in these cases:

And this is the code, where the warning is thrown:

My only nuxt-booster config is:

	booster: {
		disableNuxtFontaine: true,
	},

Can i disable the weak-hardware-behaviour somehow?

Sorry for not being able to provide more details or a reproduction, but due to the bug only happening very inconsistently, i'm having trouble providing such.

Desktop (please complete the following information):

• OS: Windows 11
• Browser: Chrome
• Version: Version 134.0.6998.89 (Offizieller Build) (64-Bit)

[ThornWalli]

Hello @codeflorist,

Basically, the behavior is correct, but only occurs when loading the page is time-consuming for the browser.

This may also occur on old devices.

You can generally deactivate the performance check via https://basics.github.io/nuxt-booster/guide/options.html#detection

However, this can then lead to poorer performance values on Lighthouse.

I just noticed that something is missing in the documentation...

You could try this out:

{
  booster: {
    experimental: {
      fallbackInit: true
    }
  }
}

If blocked, an initialization takes place here after 3 seconds.

[codeflorist]

Many thanks @ThornWalli for your fast response!

My problems mostly occur when the site is inside the visual-editor-iframe of Storyblok. There is a lot of stuff going on in this case and it might trigger the performance detection.

I've now put this in my config:

		detection: {
			performance: false,
			browserSupport: false,
			battery: false
		}

I haven't seen the mentioned problem yet after applying this. So this seems to fix the problem. It seems page speed score has taken a hit of 2 points. But it's definitely more important everyone can use the site.

I haven't tried the experimental option yet. I'll report back once i have.

[ThornWalli]

@codeflorist There is another way you could probably decide this at runtime.

How is your setup structured?

• Do you render your page in prod statically and have an extra instance as Nuxt server for Storyblk usage?
• Or do you have a Nuxt server that renders the page and the preview?

You could use this on the server side:

https://basics.github.io/nuxt-booster/components/booster-layer.html#force-app-initialization

Important: It must already be in the rendered HTML.

useHead(() => {
  return {
    script: [
      isStorblokPreview() && {
        innerHTML: `window.__NUXT_BOOSTER_AUTO_INIT__ = true;`
      }
    ].filter(Boolean)
  };
});

And deactivate the layer if you have installed it on the server side and on the client side if storyblok Preview.

<info-layer v-if="!isStorblokPreview" critical />

If you try this, update the dependency again.