Files

T

yeuimu 6c61a4e871 feat(deploy): production deployment setup and fixes

- 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

2026-08-26 14:23:09 +08:00

3.1 KiB

Raw Blame History

Suspense Has No Built-in Error Handling

Rule

<Suspense> does not provide error handling via the component itself. You must implement error handling using errorCaptured option or onErrorCaptured() hook in a parent component to catch async errors.

Why This Matters

Without explicit error handling, async errors in suspended components will propagate uncaught, potentially crashing the application or leaving users stuck on loading states. Unlike React's Error Boundaries, Vue's Suspense requires manual error boundary implementation.

Bad Code

<script setup>
// No error handling - async errors will propagate uncaught
</script>

<template>
  <Suspense>
    <AsyncComponent />
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

Good Code

<script setup>
import { ref, onErrorCaptured } from 'vue'
import AsyncComponent from './AsyncComponent.vue'

const error = ref(null)

onErrorCaptured((err) => {
  error.value = err
  return false // Prevent error from propagating further
})
</script>

<template>
  <div v-if="error" class="error-state">
    <p>Something went wrong: {{ error.message }}</p>
    <button @click="error = null">Retry</button>
  </div>

  <Suspense v-else>
    <AsyncComponent />
    <template #fallback>
      Loading...
    </template>
  </Suspense>
</template>

Reusable Error Boundary Pattern

<!-- ErrorBoundary.vue -->
<script setup>
import { ref, onErrorCaptured } from 'vue'

const props = defineProps({
  fallback: {
    type: String,
    default: 'Something went wrong'
  }
})

const emit = defineEmits(['error'])

const error = ref(null)

onErrorCaptured((err, instance, info) => {
  error.value = { err, instance, info }
  emit('error', { err, instance, info })
  return false
})

const reset = () => {
  error.value = null
}

defineExpose({ reset })
</script>

<template>
  <slot v-if="!error" />
  <slot v-else name="error" :error="error" :reset="reset">
    <div class="error-boundary">
      {{ fallback }}
      <button @click="reset">Retry</button>
    </div>
  </slot>
</template>

<!-- Usage -->
<template>
  <ErrorBoundary @error="logError">
    <Suspense>
      <AsyncDashboard />
      <template #fallback>Loading dashboard...</template>
    </Suspense>

    <template #error="{ error, reset }">
      <DashboardError :error="error" @retry="reset" />
    </template>
  </ErrorBoundary>
</template>

Key Points

Always wrap <Suspense> with error handling logic in production
Use onErrorCaptured for Composition API or errorCaptured option for Options API
Return false from the error handler to stop propagation
Consider creating a reusable ErrorBoundary component to reduce boilerplate
Provide a way for users to retry failed operations

3.1 KiB Raw Blame History