Error handling for config.js (#1263)

Jade-GG · web-flow · commit 766035815dc9 · 2026-05-19T10:32:53.000+02:00
diff --git a/resources/js/package.js b/resources/js/package.js
@@ -55,8 +55,8 @@ async function init() {
     }
     booting = true
     for (let i = 0; i < 20; i++) {
-        // Wait until config is available, for a max of 1s
-        if (window.config.store) {
+        // Wait until config is available, or has thrown an error, for a max of 1s
+        if (window.config.store || window.configError) {
             break
         }
         await new Promise((resolve) => setTimeout(resolve, 50))
@@ -65,7 +65,7 @@ async function init() {
 
     // Check if the localstorage needs a flush.
     let cachekey = useLocalStorage('cachekey')
-    if (cachekey.value !== window.config.cachekey) {
+    if (window.config.cachekey && cachekey.value !== window.config.cachekey) {
         window.config.flushable_localstorage_keys.forEach((key) => {
             useLocalStorage(key).value = null
         })
@@ -152,6 +152,14 @@ async function init() {
                 },
             },
             mounted() {
+                window.$on('configError', () => {
+                    app.config.globalProperties.configError.value = true
+                    throw new Error('Config.js failed to load because of an error.')
+                })
+                if (window.configError ?? false) {
+                    window.$emit('configError')
+                }
+
                 window.app.config.globalProperties.refs = this.$refs
                 setTimeout(() => {
                     const event = new CustomEvent('vue:mounted', { detail: { vue: window.app, rootNode: this } })
@@ -178,6 +186,7 @@ async function init() {
             mask: useMask(),
             showTax: window.config.show_tax,
             scrollLock: useScrollLock(document.body),
+            configError: ref(false),
             // Wrap the local storage in getter and setter functions so you do not have to interact using .value
             guestEmail: wrapValue(
                 useLocalStorage('email', window.debug ? 'wayne@enterprises.com' : '', { serializer: StorageSerializers.string }),
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -23,7 +23,7 @@
 
     @php($configPath = route('config') . '?v=' . Cache::rememberForever('cachekey', fn () => md5(Str::random())) . '&s=' . config('rapidez.store'))
     <link href="{{ $configPath }}" rel="preload" as="script">
-    <script defer src="{{ $configPath }}"></script>
+    <script defer src="{{ $configPath }}" onerror="window.app?.config ? window.$emit('configError') : window.configError = true"></script>
 
     @vite(['resources/css/app.css', 'resources/js/app.js'])
     @stack('head')
@@ -32,6 +32,8 @@
 <body class="text antialiased has-[.prevent-scroll:checked]:overflow-clip">
     <div id="app" class="flex flex-col min-h-dvh">
         @include('rapidez::layouts.partials.global-slideover')
+
+        @includeWhen(config('app.debug'), 'rapidez::layouts.partials.debug')
         @includeWhen(!request()->routeIs('checkout'), 'rapidez::layouts.partials.header')
         @includeWhen(request()->routeIs('checkout'), 'rapidez::layouts.checkout.header')
         <main>
diff --git a/resources/views/layouts/partials/debug.blade.php b/resources/views/layouts/partials/debug.blade.php
@@ -0,0 +1,7 @@
+<div
+    v-cloak
+    v-if="$root.configError"
+    class="w-full bg-danger text-center text-white font-bold"
+>
+    Config.js failed to load due to an error.
+</div>
