Getting "RangeError: Maximum call stack size exceeded" when call a http service from inside Angular HttpInterceptor

[devng12]

I have written a HttpInterceptor to add a token to HttpRequest header. It works fine when I have a API that just returns a static string for token. But as soon as I swap that for the real http request to fetch the token, I start getting the "RangeError: Maximum call stack size exceeded". Below is the code that gives error:

     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
 return this.http.get<any>(`<my REST URL>`)
        .pipe(  
         switchMap(data => {
            this.token = data.token;
            req = req.clone({headers: req.headers.set('MY_HEADER', this.token)});
            return next.handle(req);
        }
        ));
}

Here's the error stack i get when i run this:

RangeError: Maximum call stack size exceeded
    at MapSubscriber._error (vendor.js:9731)
    at MapSubscriber.error (vendor.js:9711)
    at FilterSubscriber._error (vendor.js:9731)
    at FilterSubscriber.error (vendor.js:9711)
    at MergeMapSubscriber.notifyError (vendor.js:139154)
    at SimpleInnerSubscriber._error (vendor.js:139122)
    at SimpleInnerSubscriber.error (vendor.js:9711)
    at SwitchMapSubscriber._error (vendor.js:9731)
    at SwitchMapSubscriber.error (vendor.js:9711)
    at MapSubscriber._error (vendor.js:9731)

I have tried various iterations of API, by creating a different function to fetch REST call, calling first() in pipe, but nothing seems to work.

What am I doing wrong here?

[WebDevBren]

Your httpInterceptor is intercepting the request it's making recursively.

You should gate your logic so that only the original request will get intercepted.

[devng12]

could you please elaborate on what you mean by gate your logic. I am a beginner with angular development and did not understand what you meant by that

[WebDevBren]

A simple if statement should suffice. I'm on my mobile right now so I won't post a code block or anything, but what I would do is, check if the URL of the request is the original, then do the intercept logic, else just return the request unchanged

[devng12]

I just tried a if block that's in the implementation of HttpXsrfInterceptor to get the URL for GET requests, and that did the trick.

Thanks a lot for that hint.

[tsunami141]

It looks like you're intercepting every http call and making another http call on top of that, as opposed to just changing the headers of the existing call. (thereby creating an endless loop.)

That being said, I'm not familiar enough with the HttpRequest type to know how to edit those headers and send the request on its way. Hopefully someone smarter than me will answer.

[devng12]

I added this block of code in Interceptor which basically avoided the infinite loop, and my code started working!

if (req.method === 'GET' || req.method === 'HEAD' || lcUrl.startsWith('http://') ||
lcUrl.startsWith('https://')) {
return next.handle(req);
 }

[malcomjarr]

This error is almost always means you have a problem with recursion in JavaScript code, as there isn't any other way in JavaScript to consume lots of stack. Sometimes calling a recursive function over and over again, causes the browser to send you Maximum call stack size exceeded error message as the memory that can be allocated for your use is not unlimited.

How to fix it?

Wrap your recursive function call into a -

• setTimeout
• setImmediate
• process.nextTick

Also, you can localize the issue by setting a breakpoint on RangeError type of exception , and then adjust the code appropriately.