Hi,
I keep getting TypeError notifications happen at random, for actions such as refresh grid, submit form, etc.
Just want to know what causes these issues, and how can I catch/handle these errors?
Cannot read property 'a' of undefined is the same as a null pointer exception but in JS. Look in the browser console or debug tools for the cause
Artur Signell:
Cannot read property 'a' of undefinedis the same as a null pointer exception but in JS. Look in the browser console or debug tools for the cause
I followed what you said, and this is what I found (see images). This seems like it is not from my code, since I don’t call any JavaScript. The function is also unreadable.
What else can I do? Help is much appreciated.
One part to start with is having the inspector debugger in Break on all exceptions mode so that you can look at the call stack and perhaps see what actually failed as the code in “part2” image seems like log.error(message).
Is this happening in development mode or production mode?
Mikael Grankvist:
One part to start with is having the inspector debugger inBreak on all exceptionsmode so that you can look at the call stack and perhaps see what actually failed as the code in “part2” image seems likelog.error(message).Is this happening in development mode or production mode?
I’ve done as you’ve suggested Mikael, and I’ve attached the JavaScript where the exception occurs.
There’s a function called ew() that somehow triggers a h is undefined
function ew(a, b, c, d, e) {
var f,
g,
h;
h = gu(e, Kc(a));
if (!h.c.has(1)) {
return
}
if (!aw(h, b)) {
debugger;
throw Rh(new XB('Host element is not a parent of the node whose property has changed. This is an implementation error. Most likely it means that there are several StateTrees on the same page (might be possible with portlets) and the target StateTree should not be passed into the method as an argument but somehow detected from the host element. Another option is that host element is calculated incorrectly.'))
}
f = Lt(h, 1);
g = mz(f, c);
By(g, d)
}
I’ve also added the browser’s debugger results (see image) that shows the function throwing a TypeError.
This is happening randomly in both development and production modes.
17109589.js (1.13 MB)
Well that doesn’t help that much.
I guess what you would need to do is to locally compile the flow-client so that you have
in the pom property:
<gwt.module.style>PRETTY</gwt.module.style>
Then in your application use the dependencies:
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>flow-server</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>flow-client</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
Now the code where the exception happens should at least be somewhat readable.
Mikael Grankvist:
Well that doesn’t help that much.I guess what you would need to do is to locally compile the flow-client so that you have
in the pom property:
<gwt.module.style>PRETTY</gwt.module.style>Then in your application use the dependencies:
<dependency> <groupId>com.vaadin</groupId> <artifactId>flow-server</artifactId> <version>1.0-SNAPSHOT</version> </dependency> <dependency> <groupId>com.vaadin</groupId> <artifactId>flow-client</artifactId> <version>1.0-SNAPSHOT</version> </dependency>Now the code where the exception happens should at least be somewhat readable.
Mikael,
I’ve done as you suggested and this is the function at where the exception (TypeError: nodeId undefined) occurs. This was done when we tried uploading a file:
_.hookUpPolymerElement = function hookUpPolymerElement(node, element) {
var self_0 = this;
var originalPropertiesChanged = element._propertiesChanged;
originalPropertiesChanged && (element._propertiesChanged = function (currentProps, changedProps, oldProps) {
$entry(function () {
self_0.handlePropertiesChanged(changedProps, node);
})();
originalPropertiesChanged.apply(this, arguments);
});
var tree = node.getTree();
var originalReady = element.ready;
element.ready = function () {
originalReady.apply(this, arguments);
fireReadyEvent(element);
var replaceDomRepeatPropertyChange = function () {
var domRepeat = element.root.querySelector('dom-repeat');
if (domRepeat) {
element.removeEventListener('dom-change', replaceDomRepeatPropertyChange);
} else {
return;
}
if (!domRepeat.constructor.prototype.$propChangedModified) {
domRepeat.constructor.prototype.$propChangedModified = true;
var changed = domRepeat.constructor.prototype._propertiesChanged;
domRepeat.constructor.prototype._propertiesChanged = function (currentProps, changedProps, oldProps) {
changed.apply(this, arguments);
var props = Object.getOwnPropertyNames(changedProps);
var items = 'items.';
for (i = 0; i < props.length; i++) {
var index_0 = props[i]
.indexOf(items);
if (index_0 == 0) {
var prop = props[i]
.substr(items.length);
index_0 = prop.indexOf('.');
if (index_0 > 0) {
var arrayIndex = prop.substr(0, index_0);
var propertyName = prop.substr(index_0 + 1);
var nodeId = currentProps.items[arrayIndex]
.nodeId;
var value_0 = currentProps.items[arrayIndex]
[propertyName]
;
var host = this.__dataHost;
while (!host.localName || host.__dataHost) {
host = host.__dataHost;
}
$entry(function () {
handleListItemPropertyChange(nodeId, host, propertyName, value_0, tree);
})();
}
}
}
};
}
};
element.root && element.root.querySelector('dom-repeat') ? replaceDomRepeatPropertyChange() : element.addEventListener('dom-change', replaceDomRepeatPropertyChange);
};
};
The exception is thrown at the handleListItemPropertyChange function:
function handleListItemPropertyChange(nodeId, host, property, value_0, tree) {
var map_0,
mapProperty,
node;
node = $getNode(tree, round_int(nodeId));
if (!node.features.has(1)) {
return;
}
if (!checkParent(node, host)) {
debugger;
throw toJs(new AssertionError_0('Host element is not a parent of the node whose property has changed. This is an implementation error. Most likely it means that there are several StateTrees on the same page (might be possible with portlets) and the target StateTree should not be passed into the method as an argument but somehow detected from the host element. Another option is that host element is calculated incorrectly.'));
}
map_0 = $getMap(node, 1);
mapProperty = $getProperty(map_0, property);
$syncToServer(mapProperty, value_0);
}
Could this be a potential bug of the framework? If not, can you guys provide a solution to this? It seems like it’s kinda hard for us to fix the issue.
Hope this becomes more clear.
Yes. That is clearly some sort of problem in our client package where we expect a nodeId, but for some reason we do not get one.
Would you happen to have a small sample project that would fail on this and some steps to reproduce so we could investigate it faster?
- Mikael
A follow-up question. Do you have a template with a dom-repeat?
Mikael Grankvist:
Yes. That is clearly some sort of problem in our client package where we expect a nodeId, but for some reason we do not get one.Would you happen to have a small sample project that would fail on this and some steps to reproduce so we could investigate it faster?
A follow-up question. Do you have a template with a dom-repeat?
- Mikael
Mikael,
Here’s a small project that reproduces the error. And we don’t use dom-repeat anywhere, none of our components are called in Polymer.
17114816.rar (6.39 KB)
Hi.
Thanks for the sample. It seems that we have an issue that is for the same thing:
[TypeError issue]
(https://github.com/vaadin/vaadin-upload-flow/issues/51)
The root cause for this is that the Upload component internaly has a dom-repeat for the items.
The upload creates a change on the internal list, but with a JS component that doesn’t have a nodeId (which is not checked if it exists) and then property change event fails as it can not fine the corresponding node on the client.
We will look into this issue and fix it asap.
Thanks for the debugging and demo help.
- Mikael
Hi, I’ve encountered another TypeError issue. Apparently, when calling grid.addColumn(new ComponentRenderer<>(this::method)), when I search grid, and it refreshes, it will throw (TypeError): a is null. One of the components in the grid does not load (see attached image).
From the browser’s debugger it returns the following method:
attachRenderedComponentIfAble() {
if (!this.nodeid || !this.appid) {
return;
}
const renderedComponent = this.getRenderedComponent();
if (this.firstChild) {
if (!renderedComponent) {
this.clear();
this.asyncAttachRenderedComponentIfAble();
} else if (this.firstChild !== renderedComponent){
this.replaceChild(renderedComponent, this.firstChild);
this.onComponentRendered();
} else {
this.onComponentRendered();
}
} else {
if (renderedComponent) {
this.appendChild(renderedComponent);
this.onComponentRendered();
} else {
this.asyncAttachRenderedComponentIfAble();
}
}
}
The exception is thrown when calling clear:
_clear() {
while (this.hasChildNodes()) {
this.removeChild(this.lastChild);
}
}
the lastChild element is null. What can we do to resolve these kinds of encounters? Help or clarification is much appreciated.
We are having constant issues with TypeError with the uplaod component. ALL works but we land up with TypeError bombing out the front page. What can we do to INTERCEPT and choke thoe JS exceptions so that we do not have this nonsense error on frnt page.
nothing is seen in server logs…we are using
<vaadin.version>11.0.1</vaadin.version>
and
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-upload-flow</artifactId>
<version>1.1.0</version>
</dependency>
We are having constant issues with TypeError with the uplaod component. ALL works but we land up with TypeError bombing out the front page. What can we do to INTERCEPT and choke thoe JS exceptions so that we do not have this nonsense error on frnt page.
nothing is seen in server logs…we are using
<vaadin.version>11.0.1</vaadin.version>
and
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-upload-flow</artifactId>
<version>1.1.0</version>
</dependency>
We are having constant issues with TypeError with the uplaod component. ALL works but we land up with TypeError bombing out the front page. What can we do to INTERCEPT and choke thoe JS exceptions so that we do not have this nonsense error on frnt page. nothing is seen in server logs…we are using
<vaadin.version>11.0.1</vaadin.version>
and
<dependency>
<groupId>com.vaadin</groupId>
<artifactId>vaadin-upload-flow</artifactId>
<version>1.1.0</version>
</dependency>
please see the logs below as those are directly related to upload…if anyone could take a look at this…
04, 2018 3:25:12 AM org.apache.catalina.core.StandardWrapperValve invoke
SEVERE: Servlet.service() for servlet [dispatcher]
in context with path [] threw exception [com.vaadin.flow.server.ServiceException: org.apache.catalina.connector.ClientAbortException: java.io.IOException: An established connection was aborted by the software in your host machine]
with root cause
java.io.IOException: An established connection was aborted by the software in your host machine
at sun.nio.ch.SocketDispatcher.write0(Native Method)
at sun.nio.ch.SocketDispatcher.write(SocketDispatcher.java:51)
please see attached screenshots
Also, all we really need is that we can choke this exception (ALL WORKS fine but the JS exception BOMBS out on the user screen and renders entire app unusable and unacceptable for shipping)… bottom line…is there a way to intercept thos probably hard to fix in upload yet serious show stoppers and get those exceptions not shown at all?
This is really annoying! We use 13.0.0.beta2 and errors still appears. Not on upload, everywhere. One example is view with iron-list. Iron list set as grid layout with component renderer items.
I have many many such error also… what I found is that when I reset my server the errors disapear and the app works fine!
I suspect this is caused by some kind of resource shortage if server is consumes resources because of leaks
We’re also getting the error: TypeError: null has no properties. Any ideas on how to go about fixing this? It appears to happen when we’re using a Grid and we’re toggling the visibility of columns.
We’re using 14.3.1. In 14.3.0, we were getting TypeError: row is null.