RXJS expand keeps on recursing indefinitely

After successfully uploading a file to Firebase, I implemented a recursive function to listen for GCP trigger logs. Everything seems to be working well, but I'm facing an issue where the recursive expand function never exits.

Despite checking the values multiple times and seeing the "ENTERED" message in the console log, the recursive call continues indefinitely without throwing any errors. How can I forcefully break the recursive calls if a certain condition is met?


public getLog(filePath: string): Observable<object[]> {
    try {
        ...
        return this.getLogChunk()
            .pipe(
                expand((data: any) => {

                    if (!environment.production && data && data.entries & data.entries.length > 0) {
                        console.groupCollapsed('GCP Service Info [getLog]');
                        console.info('[fileName]', fileName);
                        console.info('[some - Finished]', data.entries.some((x: any) => x.textPayload.includes('Finished')));
                        console.info('[some - Filename]', data.entries.some((x: any) => x.textPayload.includes(fileName)));
                        console.info('[some - Finished - Filename]', data.entries.some((x: any) => x.textPayload.includes('Finished') && x.textPayload.includes(fileName)));
                        console.info('[filter - Filename]', data.entries.filter((x: any) => x.textPayload.includes(fileName)));
                        console.groupEnd();
                    }

                    if (data &&
                        data.entries &&
                        data.entries.some((x: any) => x.textPayload.includes('Finished') && x.textPayload.includes(fileName))) {
                        console.log('ENTERED!!!!!');
                        return of({});
                    }
                    return this.getLogChunk().pipe(delay(2000));

                }),
                map(res => res),
                reduce((acc: object[], val: any) => acc.concat(val), new Array<object>())
            );
    }catch (e) {
        if (!environment.production) {
            console.groupCollapsed('GCP Service Error [getLog]');
            console.error('[error]', e);
            console.groupEnd();
        }
        throw new Error(e);
    }
}

When calling the `getlog` function, I ensured that it is only triggered once after the upload is complete. However, since the recursive loop within `getlog` is infinite, the `[complete] ENTERED` event is never fired.


...
const uploadTask: AngularFireUploadTask = this.storage.upload(filePath, fileToUpload);
...
uploadTask.snapshotChanges()
    .pipe(
        filter(task => {
            if (task) {
                return task.state === firebase.storage.TaskState.SUCCESS
            }
            return false;
        })
    )
    .subscribe(val => {
        this.gcpService.getLog(filePath)
            .subscribe({
                next: data => console.log('[next] ENTERED'),
                complete: () => {
                    console.log('[complete] ENTERED');
                }
            });
    });
...

Answer №1

The issue is with the return of({}) statement - it will continue to expand because it provides a value. To stop the expansion, use return EMPTY (import from 'Rxjs'). EMPTY does not return a value and finishes immediately, so the expanding process will cease.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to execute an HTTP request using a functional resolver?

Previously, I used a class-based resolver where I could inject HttpClient in the constructor. However, this approach has now been deprecated - see the source for more information. Now, I am looking to implement an HTTP get request in a functional resolver ...

I'm encountering an issue with the preflight request failing the access control check. It seems to be related to not having an HTTP ok status, and I've double-checked everything to make sure I imported

I've encountered an error message stating, "Response to preflight request doesn't pass access control check: It does not have HTTP ok status." Any suggestions on what might be causing this issue? Here is the backend code snippet: app.js app.del ...

While Typescript has the ability to infer recursive functions, it unfortunately cannot infer recursive types

Typescript has the ability to automatically determine the type of a recursive function: /** * Typescript correctly infers the type as * * const referencesSelf: () => ... * * This indicates recursion within the function */ const referencesSelf = () ...

Creating a new function within the moment.js namespace in Typescript

I am attempting to enhance the functionality of the moment.js library by adding a new function that requires a moment() call within its body. Unfortunately, I am struggling to achieve this. Using the latest version of Typescript and moment.js, I have sear ...

How can dependencies for an entire class or module be mocked in the mocha ecosystem similar to jest.mock?

I am currently working on unit testing a module that resembles the following code structure: import { Countdown } from "./database/orm"; export class PersistentTimer { protected constructor(...) { ... } // To ensure database writing ...

Troubleshooting: The reason behind my struggles in locating elements through xpath

There is a specific element that I am trying to locate via XPath. It looks like this: <span ng-click="openOrderAddPopup()" class="active g-button-style g-text-button g-padding-5px g-margin-right-10px ng-binding"> <i class=&quo ...

Switching the focus of detection from a child to a parent

I am currently working on enhancing the functionality of my UI to display selections dynamically as they are selected or de-selected. import { Wizard } from './report-common'; import { Router } from '@angular/router'; import { DataServ ...

When using Styled Components with TypeScript, you may encounter the error message "No overload matches

Recently, I've delved into Style Components in my journey to create a weather app using React Native. In the past, I would typically resort to CSS modules for styling, but it appears that this approach is not feasible for mobile development. Below is ...

Utilizing type maps within nested objects in Typescript: A comprehensive guide

Initially, a type is established that connects enum keys with specific types: enum MyEnum { A, B } type TypeMap = { [MyEnum.A]:string, [MyEnum.B]:number } interface ObjInterface<T extends keyof TypeMap> { obj: T, objData: Ty ...

Trouble encountered during installation of Angular CLI: module.js - code 549

I recently encountered issues with Angular-CLI, so I decided to update it using the command $ npm install -g @angular/cli. However, after doing so, I am facing a new error message. Can anyone provide assistance with this problem? module.js:549 throw err ...

Using Tailwind classes as a prop functions correctly, however, it does not work when directly applied

Here's a component snippet I'm working on: export const TextInput = ({ label, wrapperClassName = "", inputClassName = "", labelClassName = "", placeholder = "", ...props }: InputProps & Fiel ...

Retrieve information from matSnackBar using openFromComponent

Hello there! As a newcomer to Angular, I am interested in retrieving data from matsnackbar. Is this something that can be achieved? apiName: string; this.snackBar.openFromComponent(CustomSnackbarComponent, { duration: 5000000, dat ...

Can you explain how TypeScript module resolution handles global values?

After installing @types/jest, I noticed that jest's corresponding typescript definitions were detected automatically. However, when I started implementing integration tests with cypress (which uses mocha), I encountered a problem where mocha type defi ...

Dealing with Placeholder Problems in Angular 2 Material when Using setValue

Encountering an issue with Angular2's material components when a component is updated via setValue. Check out the plnkr link below for more details... [unique PLNKR link] Observed that both the value and the placeholder are occupying the same space. ...

Using Angular to enhance a Bootstrap NavBar with a Dropdown feature

I've been attempting to implement the default NavBar from Bootstrap documentation directly as shown in the examples. However, it seems to be not functioning properly. The UI displays correctly but the dropdown feature is not working. Please refer to ...

Utilizing Components for Efficient Development in Angular

I have three different types of objects: A - FirstName - LastName B - FirstName - LastName - MiddleName C - FirstName My goal is to create a component that can be used to easily create these objects using a simple form where I can input the necessa ...

Show the Array List in a left-to-right format

Is there a way to display an array list from left to right with a div scroll, instead of top to bottom? I am having trouble achieving this. Here is my demo code for reference. HTML <div> <h2 class="ylet-primary-500 alignleft">Sessions</h ...

How to verify that the user is using the most up-to-date version of the application in React Native

Currently, I am focused on the application and have implemented API endpoints that return the latest version along with information on whether the update is mandatory. Within the application flow, a GET request is sent to these API endpoints to check the ...

Travis build unsuccessful due to version inconsistencies

I am facing an issue where my locally working application is failing to build on TravisCI. After some research, I realized that I used "latest" as the version for dependencies in my package.json file. :rekolekcje-webapp:npmInstallnpm WARN deprecated <a ...

Guide on Integrating RDLC Reports with Angular 7

I currently have a window application that contains multiple RDLC reports. As I am transitioning this window application to Angular 7, I am wondering if there is a way to utilize my existing RDLS reports in Angular 7? While I have come across suggestion ...