Search code examples
javascriptgoogle-chromeinternet-explorervaadinvaadin8

document.createElement returning 'undefined'

I work on a Vaadin 8-based application. In a couple of hard-to-characterize scenarios - and I haven't been able to isolate the triggering factor - document.createElement starts to return undefined on all calls. This has been seen in both IE11 and Chrome (but in different circumstances in each case). My first theory was that it might be a browser out-of-memory issue, but I created a scenario with many more DOM elements that did not reproduce the error, and memory profiling showed no notable spike in memory usage at the point the problem happens. Also, when it happens it's at a predictable point in time - not random enough to be that sort of environmental issue.

When the problem happens, the console reports an odd status for the document.createElement function - it looks 'broken', but doesn't appear that it's just been clobbered by another function or something. Following is what the console shows under normal circumstances:

Normal createElement in IE11

...while this is what shows after the problem occurs (plus a reference to a nonexistent attribute on document, to illustrate the difference between that and what createElement shows):

Broken createElement in IE11

In Chrome the behavior in the console is similar:

Broken createElement in Chrome

Has anybody seen such a symptom in any browser and/or have any insight in tracking down the cause?

EDIT 17 January 2018: When I originally wrote this I only witnessed the problem behavior in IE11. Since then I have seen the same behavior under a different circumstance in Chrome.

Solution

  • My issue was that document.createElement was being replaced by some (buggy) injected anti-phishing JS I wasn't aware of. The problem with that JS is outside the scope of this question, but debugging tips provided in comments on the question were valuable in tracking it down:

    1. The fact that document.createElement was being shadowed was discovered by noting that document.hasOwnProperty('createElement') returned true.
    2. Defining a setter function for document.createElement that triggers the debugger helped me track down the offending code. I used the break-on-access snippet for this purpose, but also see simple code in this comment above for a roll-your-own alternative.