I have a websocket in angular that I have setup and the issue I am running into is that although I have the websocket returning an array, I am not able to set that value to a class variable in the websocket. The variable keeps coming back as undefined. The variable I am trying to populate is playlistQueue and it seems to be undefined inside the websocket this.socket.on method. Furthermore, When debugging with chrome, I am unable to attach a debugger to that code as it allows me to add a debugger on this.playlistQueue = [...this.playlistQueue, ...webhook]; but not the if statement checking if this.playlistQueue is undefined. Thanks in advance for the help.

my websocket class is:

export class SocketioService {
    socket;
    currentUser: User;
    selectedRole;
    orderId;
    merchantId;
    playlistQueue = [];
    orders = [];
    playlistSubject$ = new BehaviorSubject<any[]>([]);
    squareDeviceId: string;
    deviceAlias: any;


    constructor(private rewardsService: CustomerRewardsService, private cartService: CartService, private router: Router,
                private alertService: AlertService, private cloverOrderService: CloverOrderService,
                private squareApiService: SquareApiService, private atmoicOrderService: AtmoicOrderService,
                private dialog: MatDialog, private _AESEncryptDecryptService: AESEncryptDecryptService) {
        this.currentUser = JSON.parse(this._AESEncryptDecryptService.decrypt(localStorage.getItem('currentUser')));
        this.selectedRole = this._AESEncryptDecryptService.decrypt(localStorage.getItem(Constants.SELECTED_ROLE));
        this.merchantId = this.currentUser.merchantId;
        this.playlistQueue = [];
    }

    setupSocketConnection(merchantId) {
        this.socket = io(`${environment.apiServerUrl}`);
        this.addListenerListener(merchantId);
    }

    addListenerListener(merchantId) {
        this.socket = io(`${environment.apiServerUrl}`);
        this.socket.on('socket-' + merchantId, (webhook: any[]) => {
            if (webhook) {
                if (!this.playlistQueue) {
                    this.playlistQueue = [];
                }
                this.playlistQueue = [...this.playlistQueue, ...webhook];
                this.playlistSubject$.next(this.playlistQueue);
            }
        });
    }
}

I call the service in my component as:
socketService.setupSocketConnection(merchantId);

It was working before but recently stopped working and I cant figure out what change caused it and not being able to debug make is harder. Any help would be appreciated.