<template>
  <slot />
</template>

<script setup lang="ts">
  import { onErrorCaptured } from 'vue'

  onErrorCaptured((err, instance, info) => {
    const message = err?.message || ''
    const isChunkError =
      message.includes('dynamically imported module') ||
      message.includes('Failed to fetch') ||
      message.includes('Loading chunk') ||
      message.includes('ChunkLoadError') ||
      message.includes('Unable to preload CSS')

    if (isChunkError) {
      const key = '__chunk_reload__'
      if (!sessionStorage.getItem(key)) {
        sessionStorage.setItem(key, '1')
        window.location.reload()
        return false
      }
    }

    console.error('[ChunkErrorBoundary]', err, info)
    return true
  })
</script>
