TypeError: Value does not implement interface Node.

[mmariano]

Sometimes in production I will see the following error:

"TypeError: Argument 1 of Node.contains does not implement interface Node"

When I review the logs I can see the error is happening in the dispatcher here:

contains: /*scope.external.contains || */function(container, contained) {
  return container.contains(contained);
}

The only time this function seems to be called is when leaveOut() or enterOver() is called:

    leaveOut: function(event) {
      this.out(event);
      if (!this.contains(event.target, event.relatedTarget)) {
        this.leave(event);
      }
    },
    enterOver: function(event) {
      this.over(event);
      if (!this.contains(event.target, event.relatedTarget)) {
        this.enter(event);
      }

I have not been able to duplicate this on my local machine yet. But it seems from the code and error that the relatedTarget is not considered a node in certain circumstances. What is interesting is that one of the pages that is sometimes throwing the error doesn't actually subscribe to any pointer events. So this is just from the default subscriptions that occur internally (I assume there are some?).

Maybe we can do a check on relatedTarget?

[roblarsen]

Is this the situation you're describing?

http://plnkr.co/edit/enrAPB?p=preview

[mmariano]

@roblarsen: I did not do a very good job with my bug report. I have fixed it to reflect more of what is happening in production. Sorry for confusion.

[roblarsen]

No worries, I was curious and that was the point of showing you some code after all- clarifying the issue.

[mmariano]

I spent today looking into this issue and this seems like it has something to do with it:

https://bugzilla.mozilla.org/show_bug.cgi?id=208427

When doing some debugging the logs would say the relatedTarget was:

<div class="anonymous-div">

The bug pointed out that jQuery, google, extjs and mochikit all have fixes for this issue. I think it would just require you to do this:

contains: /*scope.external.contains || */function(container, contained) {
  try {
    return container.contains(contained);
  } catch(ex) {
    // Sometimes in Firefox element is anonymous div around input.
    // Throws error "TypeError: Argument 1 of Node.contains does not implement interface Node"
    // See https://bugzilla.mozilla.org/show_bug.cgi?id=208427
    return false;
  }
}

I am not sure if in javascript there is a performance impact in just wrapping something in try/catch without throwing errors (which is the most common use case). The mouseover code is ran a lot so this should be considered. Here is some info on that:

http://stackoverflow.com/questions/19727905/in-javascript-is-it-expensive-to-use-try-catch-blocks-even-if-an-exception-is-n