Function chain isnt working Angular 5

Question

Sorry not exactly a function chain but I have this code

ActivityService._hubConnection.on('Send', (activity: ActivityDto) => {
   this.activity = activity;
   if (activity.title === 'LOGIN') {
      this.showActivity(`${activity.user.firstName} ${activity.user.surname} logged in.`);
   } else if (activity.title === 'COMMENT') {
      this.showActivity(`${activity.user.firstName} ${activity.user.surname} commented on: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`, null);
   } else if (activity.title === 'ASSIGNED') {
      this.showActivity(`${activity.user.firstName} ${activity.user.surname} assigned: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`);
   } else if (activity.title === 'SYNC COMPLETE') {
      this.showActivity(`Sync complete, View Changes`, `/app/main/dashboard/alerts/all`, 'complete');
   } else if (activity.title === 'FILE') {
      this.showActivity(`${activity.user.firstName} ${activity.user.surname} filed: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`)
   } else if (activity.title === 'XPERT SYNC') {
      this.showActivity(`Sync In Progress.`, `/app/main/dashboard/activity`, 'start' );
   }
});

 showActivity(popText, notifLink = null, sync = null) {
    this.popupText = popText;
    if (notifLink !== null) {
        this.notifLink = notifLink;
    }
    if (sync !== null) {
        if (sync === 'complete') {
            this._activityService.finishSync();
        } else if (sync === 'start') {
            this._activityService.startSync();
        }
    }
    this.showNotif();
}

showNotif() {
    const notif = <HTMLElement>document.querySelector('.notification-tab');
    notif.style.display = 'flex';
    notif.style.bottom = '0';
    setTimeout(() => {
        notif.style.bottom = '-50px';
        setTimeout(() => {
            notif.style.display = 'none';
        }, 500);
    }, 5000);
}

now I cant figure out why this isnt working, basically what is happening is say im recieving a comment, so the activity.title === 'COMMENT', it should run the showActivity() function, which then should run the showNotif() function, ive put breakpoints on every part of the functions and the breakpoint hits the this.showActivity() but then nothing happens? none of the other breakpoints are hit and I cannot figure out what the problem is! It doesnt make any sense to me.

Any help would be appreciated, I have no idea what could be going wrong...

Thanks

Answer 1

Try to wrap you functions to try.. catch, maybe there is uncatch exception.

  showActivity(popText, notifLink = null, sync = null) {
   try  {
    this.popupText = popText;
    if (notifLink !== null) {
      this.notifLink = notifLink;
    }
    if (sync !== null) {
      if (sync === 'complete') {
        this._activityService.finishSync();
      } else if (sync === 'start') {
        this._activityService.startSync();
      }
    }
    this.showNotif();
   } catch (e) {
    console.error(e);
   }
}

And wrap here too)

if (activity.title === 'COMMENT') {
  try {
    this.showActivity(`${activity.user.firstName} ${activity.user.surname} commented on: XB-ID-${activity.messageId}`, `/app/main/dashboard/xpert-detail/${activity.messageId}/comment`, null);
  } catch (e) {
    console.error(e);
  }
}