If the content call fails in Vue, does my component break?
I tend to think about the failure path first, so before I put a personalized slot on a high-traffic page I want to understand what happens on a bad network. If the personalization call is slow or fails outright, does my Vue component blank out or throw?
What I want is for it to fall back to default content cleanly rather than crash or hang. How do people set that up?
2 answers
Your component only breaks if you let it. Attach a fallback to the fetch and a failed call resolves to default content instead of throwing:
const {content} = await croct .fetch('home-hero@2') .catch(() => ({content: {/* your defaults here */}}));Fault tolerance is built into the SDK, so on a failure the page serves the default rather than hanging or erroring out. The .catch just decides what "default" means for that specific slot. I put one on every fetch as a habit.
To cover the slow case specifically, look at defaultFetchTimeout. It caps how long the fetch waits before giving up, and the default in the JS SDK is 5000ms. If a five second worst case is too long for a critical slot, lower it, so a stalled call gives up sooner and your .catch fallback kicks in.
One more thing worth knowing: if you resolve the content on the server instead of the client, the fallback decision happens before the response is even sent, so the visitor never sees a slow call at all. Client-side you are bounded by the timeout, server-side you are bounded before the first byte.
Both helpful. Lowering the timeout on the hero slot and keeping the catch fallback everywhere. Thanks.