yeuimu
6c61a4e871
- Debian-based api image (bookworm-slim), docker/debian mirrors, prisma binaryTargets for openssl 3.0 - nginx: admin SPA under /admin, TLS via acme.sh (ZeroSSL) + auto-renewal cron, http->https redirect - prisma: add origin_goods.delisted migration, sync missing schema (good_image/tag_font_color/good_tags), fix users.createdAt Timestamptz - api: CORS wildcard reflection, helmet CORP cross-origin, price backfill in persistProductDetail, categoryIcon ancestor fallback, mediaByColor per-color gallery in public goods detail - admin: /admin base path (vite + router) - import-data.mjs: udt_name casting, serial sequence advance fix
85 lines
2.2 KiB
Markdown
85 lines
2.2 KiB
Markdown
---
|
|
title: Suspense Overrides Async Component Loading and Error Options
|
|
impact: MEDIUM
|
|
impactDescription: Async component loading/error options are ignored under a parent Suspense, leading to missing spinners and error UIs
|
|
type: gotcha
|
|
tags: [vue3, suspense, async-components, loading, error-handling]
|
|
---
|
|
|
|
# Suspense Overrides Async Component Loading and Error Options
|
|
|
|
**Impact: MEDIUM** - When an async component renders inside a parent `<Suspense>`, its `loadingComponent`, `errorComponent`, `delay`, and `timeout` options do not run. The parent Suspense controls loading and error UX instead.
|
|
|
|
## Task Checklist
|
|
|
|
- [ ] Confirm whether the async component is inside a `<Suspense>` boundary
|
|
- [ ] Use `suspensible: false` when the component must manage its own loading/error UI
|
|
- [ ] Or move loading/error UI to the parent `<Suspense>` fallback and an error boundary (`onErrorCaptured`)
|
|
- [ ] Provide a retry path for failed loads
|
|
|
|
**Incorrect:**
|
|
```vue
|
|
<script setup>
|
|
import { defineAsyncComponent } from 'vue'
|
|
|
|
const AsyncDashboard = defineAsyncComponent({
|
|
loader: () => import('./Dashboard.vue'),
|
|
loadingComponent: LoadingSpinner,
|
|
errorComponent: ErrorDisplay,
|
|
timeout: 3000
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<Suspense>
|
|
<AsyncDashboard />
|
|
<template #fallback>Loading...</template>
|
|
</Suspense>
|
|
</template>
|
|
```
|
|
|
|
**Correct (component handles its own states):**
|
|
```vue
|
|
<script setup>
|
|
import { defineAsyncComponent } from 'vue'
|
|
|
|
const AsyncDashboard = defineAsyncComponent({
|
|
loader: () => import('./Dashboard.vue'),
|
|
loadingComponent: LoadingSpinner,
|
|
errorComponent: ErrorDisplay,
|
|
timeout: 3000,
|
|
suspensible: false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<AsyncDashboard />
|
|
</template>
|
|
```
|
|
|
|
**Correct (parent Suspense owns loading/error UI):**
|
|
```vue
|
|
<script setup>
|
|
import { onErrorCaptured, ref } from 'vue'
|
|
import AsyncDashboard from './AsyncDashboard.vue'
|
|
|
|
const error = ref(null)
|
|
|
|
onErrorCaptured((err) => {
|
|
error.value = err
|
|
return false
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<ErrorDisplay v-if="error" :error="error" />
|
|
|
|
<Suspense v-else>
|
|
<AsyncDashboard />
|
|
<template #fallback>
|
|
<LoadingSpinner />
|
|
</template>
|
|
</Suspense>
|
|
</template>
|
|
```
|