-
Notifications
You must be signed in to change notification settings - Fork 24.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
RangeError: Maximum call stack size exceeded
in @angular/animations
module
#38551
Comments
RangeError: Maximum call stack size exceeded
in @angular/animations
module in SafariRangeError: Maximum call stack size exceeded
in @angular/animations
module
Any feedback folks? |
This issue got me really curious so I did some benchmarking with https://jsbench.me https://jsbench.me/jvkf8ynmgg/1 Each test creates 1000 divs before the test case runs and assigns the result to a variable.
Relevant code angular/packages/animations/browser/src/render/shared.ts Lines 183 to 194 in a91f0f6
Maybe changing results.push(...element.querySelectorAll(selector)); to const elements = element.querySelectorAll(selector);
for (let i = 0, l = elements.length; i < l; i++) {
results.push(elements[i]);
} might resolve this issue and potentially offer a performance increase. |
While we can't reproduce this issue, it looks like the function @AleksanderBodurri mentions could be simplified anyway to something like this: _query = (element: any, selector: string, multi: boolean): any[] => {
if (multi) {
return Array.from(element.querySelectorAll(selector));
} else {
const elm = element.querySelector(selector);
return elm ? [elm] : [];
}
}; Feel free to send a PR |
…d" to "for" For element queries that return sufficiently large NodeList objects, using spread syntax to populate the results array causes a RangeError due to the call stack limit being reached. This commit updates the code to use regular "for" loop instead. Fixes angular#38551.
…d" to "for" For element queries that return sufficiently large NodeList objects, using spread syntax to populate the results array causes a RangeError due to the call stack limit being reached. This commit updates the code to use regular "for" loop instead. Fixes angular#38551.
…d" to "for" For element queries that return sufficiently large NodeList objects, using spread syntax to populate the results array causes a RangeError due to the call stack limit being reached. This commit updates the code to use regular "for" loop instead. Fixes angular#38551.
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
🐞 bug report
Affected Package
The issue is caused by package @angular/animationsIs this a regression?
Not sureDescription
We sometimes see
RangeError: Maximum call stack size exceeded
error in our production environment. Some of them come from Safari, some from Chrome. I'm attaching a few last frames of the stacktrace (see the section below). I think this is the reason for the issue: https://anchortagdev.com/range-error-maximum-call-stack-size-exceeded-error-using-spread-operator-in-node-js-javascript. Looks like it happens when page contains a lot of DOM elements and code tries to push them all into an array using a spread operator.🔬 Minimal Reproduction
Sorry, I don't know how to reproduce it.
🔥 Exception or Error
🌍 Your Environment
Angular Version:
The text was updated successfully, but these errors were encountered: