Unhandled rejection RangeError: Maximum call stack size exceeded

While working with protractor with Typescript I and my team was facing this issue. I thought of sharing this here as it was a good finding. The issue was this:-

Unhandled rejection RangeError: Maximum call stack size exceeded
    at new Wait (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\utilities\Wait.ts:5:1)
    at new SelectDropDown (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\utilities\SelectDropDown.ts:5:1)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:29:23)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)
    at new CLASS3 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS3.ts:26:25)
    at new CLASS1 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS1.ts:30:41)
    at new CLASS2 (D:\workspace\DemoProject\latest-code\protractor-cucumber\e2e\com.blog.page\CLASS2.ts:25:32)

Tech Stack which I am using in my project:-

• Protractor
• Typescript
• Page Object Modal
• Cucumber
• Chai
• node
• npm
• VS Code (IDE)

What was the issue?

Problem was that the classes which we were creating objects of the chain classes and hence using their methods.
What this means is CLASS1 has object of CLASS2,
CLASS2 has object of CLASS3 and
CLASS3 has object of CLASS1.
Hence this create a circulaR dependency in the code.

Resulting in calling of an infinite loop. So whenever we call “new” in the class file we know an instance creation starts, this was the reason for this issue.

Great, what are the possible solutions?

There are multiple ways to resolve this issue as a code we always try to strategize by our own. Some of them are:

• Extend the classes instead if creating objects of them.

Class A extends Class B

instead of

Class A{
B b = new B();
}

• Create a variable of type class instead of actually creating new object

B b; // java syntax
or
b : B; // typescript syntax

instead of

Class A{
B b = new B();
}

• Create Inner classes

• Create an Enum

Hope this helps. There could be lot other ways to do this.

Add your suggestions in the comment sections and we can discuss more on it.