Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Write unit tests for core functionality using vitest

Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.e2e.{ts,js} : Write end-to-end tests using Playwright and @nuxt/test-utils

Learnt from: huang-julien
PR: nuxt/nuxt#29366
File: packages/nuxt/src/app/components/nuxt-root.vue:16-19
Timestamp: 2024-12-12T12:36:34.871Z
Learning: In `packages/nuxt/src/app/components/nuxt-root.vue`, when optimizing bundle size by conditionally importing components based on route metadata, prefer using inline conditional imports like:

```js
const IsolatedPage = route?.meta?.isolate ? defineAsyncComponent(() => import('#build/isolated-page.mjs')) : null
```

instead of wrapping the import in a computed property or importing the component unconditionally.

Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.vue : Use `<script setup lang="ts">` and the composition API when creating Vue components

Learnt from: GalacticHypernova
PR: nuxt/nuxt#26468
File: packages/nuxt/src/components/plugins/loader.ts:24-24
Timestamp: 2024-11-05T15:22:54.759Z
Learning: In `packages/nuxt/src/components/plugins/loader.ts`, the references to `resolve` and `distDir` are legacy code from before Nuxt used the new unplugin VFS and will be removed.

Learnt from: CR
PR: nuxt/nuxt#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-06-30T13:48:28.134Z
Learning: Applies to **/*.{ts,tsx,vue} : Use error handling patterns consistently

packages/nuxt/src/app/composables/asyncData.ts (2)

381-387: clear(): always abort and reset controller (don’t depend on _asyncDataPromises)

Current logic skips abort when the promise reference is missing and keeps an aborted controller around.

Apply:

-    clear: () => {
-      if (nuxtApp._asyncDataPromises[key.value]) {
-        if (nuxtApp._asyncData[key.value]?._abortController) {
-          nuxtApp._asyncData[key.value]?._abortController?.abort(new DOMException('AsyncData aborted by user.', 'AbortError'))
-        }
-      }
-      clearNuxtDataByKey(nuxtApp, key.value)
-    },
+    clear: () => {
+      const entry = nuxtApp._asyncData[key.value]
+      if (entry?._abortController) {
+        try {
+          entry._abortController.abort(toAbortError('AsyncData aborted by user.'))
+        } finally {
+          entry._abortController = undefined
+        }
+      }
+      clearNuxtDataByKey(nuxtApp, key.value)
+    },

---

711-719: Treat any AbortError as cancellation: don’t mutate error/status on cancel/timeout/external signal

Currently only internal aborts are ignored; external signal/timeout still set error/status.

Apply:

           // If the promise was replaced by another one, we do not update the asyncData
           if (nuxtApp._asyncDataPromises[key] && nuxtApp._asyncDataPromises[key] !== promise) {
             return
           }

-          // If the asyncData was explicitly aborted internally (dedupe or clear), we do not update the asyncData
-          if (asyncData._abortController?.signal.aborted) {
-            return
-          }
+          // If cancelled for any reason (internal, external or timeout), do not update
+          if (error?.name === 'AbortError' || (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError')) {
+            return
+          }

packages/nuxt/src/app/composables/asyncData.ts (2)

103-107: Timeout API: clarify/normalise inputs

Document or coerce negative/NaN timeouts to undefined so behaviour is predictable across code paths.

You can normalise at use-site (see patch below on Lines 675–683).

Also applies to: 119-125

---

667-671: Use a portable AbortError factory instead of new DOMException(...)

DOMException is not guaranteed everywhere. Use a helper that falls back to Error.

Apply:

-      if (asyncData._abortController) {
-        asyncData._abortController.abort(new DOMException('AsyncData request cancelled by deduplication', 'AbortError'))
-      }
+      if (asyncData._abortController) {
+        asyncData._abortController.abort(toAbortError('AsyncData request cancelled by deduplication'))
+      }

docs/3.api/2.composables/use-async-data.md (2)

21-26: Consider adding a small example that uses { signal }

Show how to forward the signal to $fetch for cancellation.

Example:

<script setup lang="ts">
const { data } = await useAsyncData('mountains', (_nuxt, { signal }) =>
  $fetch('https://api.nuxtjs.dev/mountains', { signal })
)
</script>

---

150-164: Clarify cancellation semantics in Return Values

Explicitly state that aborted requests don’t set status: 'error' and don’t mutate error/data.

Apply:

 - `clear`: a function that can be used to set `data` to `undefined` (or the value of `options.default()` if provided), set `error` to `undefined`, set `status` to `idle`, and mark any currently pending requests as cancelled.
+ `clear`: a function that can be used to set `data` to `undefined` (or the value of `options.default()` if provided), set `error` to `undefined`, set `status` to `idle`, and mark any currently pending requests as cancelled.
+
+ Cancellation semantics: if a request is aborted (via `clear`, deduplication, an external `AbortSignal`, or a timeout), `data` and `error` are left unchanged and `status` is not set to `'error'`.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

packages/nuxt/src/app/composables/asyncData.ts (2)

673-681: Use a ponyfill to merge signals, short-circuit already‑aborted, and listen once

-            const timeout = opts.timeout ?? options.timeout
-            const mergedSignal = AbortSignal.any([asyncData._abortController?.signal, opts?.signal, typeof timeout === 'number' ? AbortSignal.timeout(timeout) : undefined].filter((s): s is NonNullable<typeof s> => Boolean(s)))
-            mergedSignal.addEventListener('abort', (event) => {
-              const reason = (event.target as any)?.reason ?? mergedSignal.reason
-              reject(reason instanceof Error ? reason : new DOMException(reason, 'AbortError'))
-            })
-
-            return Promise.resolve(handler(nuxtApp, { signal: mergedSignal })).then(resolve, reject)
+            const rawTimeout = opts.timeout ?? options.timeout
+            const timeout = (typeof rawTimeout === 'number' && isFinite(rawTimeout) && rawTimeout >= 0) ? rawTimeout : undefined
+            const mergedSignal = mergeAbortSignals(
+              [asyncData._abortController?.signal, opts?.signal],
+              timeout,
+            )
+            if (mergedSignal.aborted) {
+              reject(toAbortError(mergedSignal.reason))
+              return
+            }
+            mergedSignal.addEventListener('abort', () => {
+              reject(toAbortError(mergedSignal.reason))
+            }, { once: true })
+
+            Promise.resolve(handler(nuxtApp, { signal: mergedSignal })).then(resolve, reject)

Add these helpers in this module (outside the selected range):

function toAbortError (reason?: unknown): Error {
  try { return reason instanceof Error ? reason : new DOMException(String(reason ?? 'Aborted'), 'AbortError') }
  catch { return reason instanceof Error ? reason : new Error(String(reason ?? 'Aborted')) }
}

function mergeAbortSignals (signals: Array<AbortSignal | null | undefined>, timeout?: number): AbortSignal {
  const list: AbortSignal[] = signals.filter(Boolean) as AbortSignal[]
  if (typeof timeout === 'number') {
    const t = (AbortSignal as any).timeout?.(timeout)
    if (t) list.push(t)
  }
  const AS: any = AbortSignal as any
  if (AS.any) return AS.any(list)
  const controller = new AbortController()
  const onAbort = (sig: AbortSignal) => () => {
    controller.abort(sig.reason ?? toAbortError())
    list.forEach(s => s.removeEventListener?.('abort', onAbort(s)))
  }
  for (const s of list) {
    if (s.aborted) return s
    s.addEventListener?.('abort', onAbort(s), { once: true })
  }
  return controller.signal
}

---

709-723: Treat any AbortError (internal/external/timeout) as cancellation; don’t mutate data/error

-          // If the asyncData was explicitly aborted internally (dedupe or clear), we do not update the asyncData
-          if (asyncData._abortController?.signal.aborted) {
-            return
-          }
-
-          // if the asyncData was explicitly aborted by user, we set it back to idle state
-          if (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError') {
-            asyncData.status.value = 'idle'
-            return
-          }
+          // Treat any AbortError (internal, external, timeout) as cancellation: do nothing except reset status.
+          if (
+            (error && typeof error === 'object' && (error as any).name === 'AbortError') ||
+            (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError')
+          ) {
+            asyncData.status.value = 'idle'
+            return
+          }

packages/nuxt/src/app/composables/asyncData.ts (1)

103-107: Timeout/signal options added — validate inputs and define precedence

Guard against negative/NaN timeouts and clarify in JSDoc that opts.{signal,timeout} override options.{timeout}. The input validation is addressed in my abort-merge suggestion below.

Also applies to: 121-125

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

💡 Knowledge Base configuration:

• MCP integration is disabled by default for public repositories
• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

packages/nuxt/src/app/composables/asyncData.ts (1)

668-671: Consider safe DOMException construction.

DOMException may not be available in all environments (older Node versions, some workers). Consider wrapping in a try-catch or checking availability.

       if (asyncData._abortController) {
-        asyncData._abortController.abort(new DOMException('AsyncData request cancelled by deduplication', 'AbortError'))
+        try {
+          asyncData._abortController.abort(new DOMException('AsyncData request cancelled by deduplication', 'AbortError'))
+        } catch {
+          const err = new Error('AsyncData request cancelled by deduplication')
+          err.name = 'AbortError'
+          asyncData._abortController.abort(err)
+        }
       }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

packages/nuxt/src/app/composables/asyncData.ts (2)

413-420: Reset _abortController after aborting to prevent immediate cancellation of subsequent requests.

Currently, the aborted controller remains attached to the asyncData entry. If a new request is initiated after calling clear(), it would be immediately aborted by the stale signal.

Based on learnings

Apply this diff:

     clear: () => {
-      if (nuxtApp._asyncDataPromises[key.value]) {
-        if (nuxtApp._asyncData[key.value]?._abortController) {
-          nuxtApp._asyncData[key.value]?._abortController?.abort(new DOMException('AsyncData aborted by user.', 'AbortError'))
-        }
-      }
+      const entry = nuxtApp._asyncData[key.value]
+      if (entry?._abortController) {
+        try {
+          entry._abortController.abort(new DOMException('AsyncData aborted by user.', 'AbortError'))
+        } finally {
+          entry._abortController = undefined
+        }
+      }
       clearNuxtDataByKey(nuxtApp, key.value)
     },

---

703-713: Add polyfill for AbortSignal.any/timeout, fix type mismatch, and use mergedSignal.reason.

Multiple issues require attention:

1. Type mismatch (line 703): Variable typed as Promise<ResT | void> but constructor uses Promise<ResT>
2. Missing polyfills (line 707): AbortSignal.any and AbortSignal.timeout are not available in Node < 19.7 and older browsers
3. Unreliable reason access (line 709): event.target?.reason is not type-safe; use mergedSignal.reason instead
4. No early abort check: Should reject immediately if the merged signal is already aborted

Based on learnings

Apply this diff:

-      const promise: Promise<ResT | void> = new Promise<ResT>(
+      const promise: Promise<ResT | void> = new Promise<ResT | void>(
         (resolve, reject) => {
           try {
             const timeout = opts.timeout ?? options.timeout
-            const mergedSignal = AbortSignal.any([asyncData._abortController?.signal, opts?.signal, typeof timeout === 'number' ? AbortSignal.timeout(timeout) : undefined].filter((s): s is NonNullable<typeof s> => Boolean(s)))
-            mergedSignal.addEventListener('abort', (event) => {
-              const reason = (event.target as any)?.reason ?? mergedSignal.reason
+            const mergedSignal = mergeAbortSignals(
+              [asyncData._abortController?.signal, opts?.signal],
+              typeof timeout === 'number' && timeout >= 0 ? timeout : undefined
+            )
+            
+            if (mergedSignal.aborted) {
+              const reason = mergedSignal.reason
+              reject(reason instanceof Error ? reason : toAbortError(reason))
+              return
+            }
+            
+            mergedSignal.addEventListener('abort', () => {
+              const reason = mergedSignal.reason
               reject(reason instanceof Error ? reason : new DOMException(reason, 'AbortError'))
-            })
+            }, { once: true })
 
-            return Promise.resolve(handler(nuxtApp, { signal: mergedSignal })).then(resolve, reject)
+            Promise.resolve(handler(nuxtApp, { signal: mergedSignal })).then(resolve, reject)
           } catch (err) {
             reject(err)
           }

Add these helper functions at module scope (after imports):

function toAbortError(reason?: unknown): Error {
  try {
    return reason instanceof Error ? reason : new DOMException(String(reason ?? 'Aborted'), 'AbortError')
  } catch {
    return reason instanceof Error ? reason : new Error(String(reason ?? 'Aborted'))
  }
}

function mergeAbortSignals(signals: Array<AbortSignal | null | undefined>, timeout?: number): AbortSignal {
  const list: AbortSignal[] = signals.filter(Boolean) as AbortSignal[]
  if (typeof timeout === 'number' && timeout >= 0) {
    const timeoutSignal = (AbortSignal as any).timeout?.(timeout)
    if (timeoutSignal) list.push(timeoutSignal)
  }
  
  // Use native if available
  if ((AbortSignal as any).any) {
    return (AbortSignal as any).any(list)
  }
  
  // Polyfill
  const controller = new AbortController()
  const abort = (sig: AbortSignal) => () => {
    controller.abort(sig.reason ?? toAbortError())
    list.forEach(s => s.removeEventListener?.('abort', abort(s)))
  }
  
  for (const sig of list) {
    if (sig.aborted) return sig
    sig.addEventListener?.('abort', abort(sig), { once: true })
  }
  
  return controller.signal
}

packages/nuxt/src/app/composables/asyncData.ts (1)

741-755: Consider checking error.name === 'AbortError' instead of internal controller state.

The current implementation checks asyncData._abortController?.signal.aborted to detect internal aborts. However, a cleaner approach would be to check if the error is an AbortError regardless of source (internal, external, or timeout), as suggested in previous reviews.

Apply this diff:

           // If the promise was replaced by another one, we do not update the asyncData
           if (nuxtApp._asyncDataPromises[key] && nuxtApp._asyncDataPromises[key] !== promise) {
             return
           }
-
-          // If the asyncData was explicitly aborted internally (dedupe or clear), we do not update the asyncData
-          if (asyncData._abortController?.signal.aborted) {
-            return
-          }
-
-          // if the asyncData was explicitly aborted by user, we set it back to idle state
-          if (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError') {
+          
+          // If cancelled for any reason (internal, external, or timeout), reset to idle
+          if (error?.name === 'AbortError' || (typeof DOMException !== 'undefined' && error instanceof DOMException && error.name === 'AbortError')) {
             asyncData.status.value = 'idle'
             return
           }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

test/nuxt/use-async-data.test.ts (1)

19-25: Great coverage for abort/timeout semantics; minor stability nit

• New endpoint, global unstub, and abort/timeout scenarios are well covered. LGTM.
• Optional: in the timeout test (Lines 969-978), prefer advancing fake timers deterministically (e.g. vi.advanceTimersByTime(2)) before waitFor to reduce flakiness.

Also applies to: 27-29, 901-920, 922-937, 939-951, 953-967, 969-978, 980-999, 1000-1025, 1027-1058, 1060-1080, 1082-1102, 1104-1119, 1121-1132, 1134-1153

packages/nuxt/src/app/composables/asyncData.ts (2)

706-722: Normalise abort reason and align Promise generic

• Use the same generic in Promise construction to avoid confusion.
• Prefer a helper to normalise abort reasons rather than constructing DOMException inline.

Apply:

-      const promise: Promise<ResT | void> = new Promise<ResT>(
+      const promise: Promise<ResT | void> = new Promise<ResT | void>(
         (resolve, reject) => {
           try {
             const timeout = opts.timeout ?? options.timeout
-            const mergedSignal = mergeAbortSignals([asyncData._abortController?.signal, opts?.signal], timeout)
+            const mergedSignal = mergeAbortSignals([asyncData._abortController?.signal, opts?.signal], timeout)
             if (mergedSignal.aborted) {
-              const reason = mergedSignal.reason
-              reject(reason instanceof Error ? reason : new DOMException(String(reason ?? 'Aborted'), 'AbortError'))
+              reject(mergedSignal.reason instanceof Error ? mergedSignal.reason : toAbortError(mergedSignal.reason))
               return
             }
-            mergedSignal.addEventListener('abort', () => {
-              const reason = mergedSignal.reason
-              reject(reason instanceof Error ? reason : new DOMException(String(reason ?? 'Aborted'), 'AbortError'))
-            }, { once: true })
+            mergedSignal.addEventListener('abort', () => {
+              const r = mergedSignal.reason
+              reject(r instanceof Error ? r : toAbortError(r))
+            }, { once: true })
 
             return Promise.resolve(handler(nuxtApp, { signal: mergedSignal })).then(resolve, reject)

---

701-705: Avoid direct DOMException construction in aborts

Constructing DOMException directly is brittle in some runtimes. Use a helper to produce an AbortError.

Apply:

-      if (asyncData._abortController) {
-        asyncData._abortController.abort(new DOMException('AsyncData request cancelled by deduplication', 'AbortError'))
-      }
+      if (asyncData._abortController) {
+        asyncData._abortController.abort(toAbortError('AsyncData request cancelled by deduplication'))
+      }

-      if (entry?._abortController) {
+      if (entry?._abortController) {
         try {
-          entry._abortController.abort(new DOMException('AsyncData aborted by user.', 'AbortError'))
+          entry._abortController.abort(toAbortError('AsyncData aborted by user.'))
         } finally {
           entry._abortController = undefined
         }
       }

Add the toAbortError helper once per module (see previous comment).

Also applies to: 413-423

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro