Skip to content

Commit 66b6b42

Browse files
committed
chore: include component info in recursive update warning
1 parent 1b8f14e commit 66b6b42

File tree

2 files changed

+25
-6
lines changed

2 files changed

+25
-6
lines changed

packages/runtime-core/src/renderer.ts

+5
Original file line numberDiff line numberDiff line change
@@ -1599,6 +1599,11 @@ function baseCreateRenderer(
15991599
}
16001600
}
16011601
}, __DEV__ ? createDevEffectOptions(instance) : prodEffectOptions)
1602+
1603+
if (__DEV__) {
1604+
// @ts-ignore
1605+
instance.update.ownerInstance = instance
1606+
}
16021607
}
16031608

16041609
const updateComponentPreRender = (

packages/runtime-core/src/scheduler.ts

+20-6
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { ErrorCodes, callWithErrorHandling } from './errorHandling'
22
import { isArray } from '@vue/shared'
33
import { ComponentPublicInstance } from './componentPublicInstance'
4+
import { ComponentInternalInstance, getComponentName } from './component'
5+
import { warn } from './warning'
46

57
export interface SchedulerJob {
68
(): void
@@ -22,6 +24,7 @@ export interface SchedulerJob {
2224
* stabilizes (#1727).
2325
*/
2426
allowRecurse?: boolean
27+
ownerInstance?: ComponentInternalInstance
2528
}
2629

2730
export type SchedulerCb = Function & { id?: number }
@@ -164,8 +167,11 @@ export function flushPreFlushCbs(
164167
preFlushIndex < activePreFlushCbs.length;
165168
preFlushIndex++
166169
) {
167-
if (__DEV__) {
170+
if (
171+
__DEV__ &&
168172
checkRecursiveUpdates(seen!, activePreFlushCbs[preFlushIndex])
173+
) {
174+
continue
169175
}
170176
activePreFlushCbs[preFlushIndex]()
171177
}
@@ -200,8 +206,11 @@ export function flushPostFlushCbs(seen?: CountMap) {
200206
postFlushIndex < activePostFlushCbs.length;
201207
postFlushIndex++
202208
) {
203-
if (__DEV__) {
209+
if (
210+
__DEV__ &&
204211
checkRecursiveUpdates(seen!, activePostFlushCbs[postFlushIndex])
212+
) {
213+
continue
205214
}
206215
activePostFlushCbs[postFlushIndex]()
207216
}
@@ -235,8 +244,8 @@ function flushJobs(seen?: CountMap) {
235244
for (flushIndex = 0; flushIndex < queue.length; flushIndex++) {
236245
const job = queue[flushIndex]
237246
if (job) {
238-
if (__DEV__) {
239-
checkRecursiveUpdates(seen!, job)
247+
if (__DEV__ && checkRecursiveUpdates(seen!, job)) {
248+
continue
240249
}
241250
callWithErrorHandling(job, null, ErrorCodes.SCHEDULER)
242251
}
@@ -263,13 +272,18 @@ function checkRecursiveUpdates(seen: CountMap, fn: SchedulerJob | SchedulerCb) {
263272
} else {
264273
const count = seen.get(fn)!
265274
if (count > RECURSION_LIMIT) {
266-
throw new Error(
267-
`Maximum recursive updates exceeded. ` +
275+
const instance = (fn as SchedulerJob).ownerInstance
276+
const componentName = instance && getComponentName(instance.type)
277+
warn(
278+
`Maximum recursive updates exceeded${
279+
componentName ? ` in component <${componentName}>` : ``
280+
}. ` +
268281
`This means you have a reactive effect that is mutating its own ` +
269282
`dependencies and thus recursively triggering itself. Possible sources ` +
270283
`include component template, render function, updated hook or ` +
271284
`watcher source function.`
272285
)
286+
return true
273287
} else {
274288
seen.set(fn, count + 1)
275289
}

0 commit comments

Comments
 (0)