UI node gets new md-card at every deploy

Developing Nodes
1

Hi folks,

I'm developing a new UI node, but something weird is going on.
Every time I deploy my flow, I get a new md-card for the group where my UI node belongs to.
For example, this is the result after 3 successive deploys:

image
image986Ɨ232 77.3 KB

I 'think' I have't done anything special, compared to my other UI nodes :woozy_face:
So I also arrive 3 times in my $scope.init function ...
And I don't see anything special in the browser console log.

Does anybody have a clue where I might start searching?

[EDIT] Node-RED version 1.0.2 and dashboard version 2.19.0.

Thanks!!!
Bart

2

For other nodes it's usually when you don't close the node properly or don't stop some listener you added - so on deploy the old one still remains. Not seen it with ui nodes so you are breaking new ground again :slight_smile:

1 Like
3

Yes Dave,
you are right. Normally I have to put some code for the "close" event, but haven't done that yet for UI nodes ... Will need to put the code part by part in comment, and hopefully I can find by elimination which part of my code is causing troubles ...

4

Seems to be sooooooooooo true, even for UI nodes :roll_eyes:
I had some client-side cleanup coding, so I have been so smart to add the client-side cleanup stuff to my server-side "close" event:

node.on("close", function() {
   $scope.recorderStatus = null;
            
   if ($scope.rafId) {
      // When streaming to the server is currently busy, we need to stop it
      cancelAnimationFrame($scope.rafId);
      $scope.rafId = null;
   }
            
   if ($scope.timerId) {
      // When a timer is currently busy, we need to stop it
      clearInterval($scope.timerId); 
      $scope.timerId = null;
   }
            
   if (done) {
      done();
   }
});

How stupid of me. Because now it fails to find the $scope variable on the server:

image

And then the entire cleanup stuff seems to be messed up somehow ...
So that mystery is solved. :ghost:
But now I have two new questions:

  1. I need to find out where I have to put my cleanup code on the AngularJs client-side. Does anybody have a suggestion?

  2. Now I see finally why no hints about the error were available in the log:

    image

    Would be nice if a hint for developers could be added here ...

5

I'm not an AngularJs specialist, but I moved my client side cleanup code here:

initController: function($scope, events) {
   $scope.init = function (config) {
      ...                      
      $scope.$on('$destroy', function() {
         $scope.recorderStatus = null;
             if ($scope.rafId) {
                // When streaming to the server is currently busy, we need to stop it
                cancelAnimationFrame($scope.rafId);
                $scope.rafId = null;
             }
                                
             if ($scope.timerId) {
                // When a timer is currently busy, we need to stop it
                clearInterval($scope.timerId); 
                $scope.timerId = null;
             }
      })
   }
}

As soon as deploy my flow, I arrive in this function. So I think my issue is solved ...