# Error - Unhandled promise rejection while using Neovis.js

**URL:** <https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663>\
**Category:** Neo4j Visualization Library (NVL)\
**Tags:** performance, browser, cypher, operations, knowledge-base\
**Created:** [October 26, 2018, 1:17pm UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663 "2018-10-26T13:17:05Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 26, 2018, 1:17pm UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/1 "2018-10-26T13:17:06Z")

</div>

Hi,

Is there any way to hit a Neovis twice or more than once in a program. Because i use Neovis.js code in two of my angular functions -

EwayBill() and Collection(). Both have Neovis.js code but different cypher queries. On page load , i want both the respective outputs of EwayBill and Collection Nodes. But that doesn't happen and i get the output -

```auto

Unhandled promise rejection TypeError: Cannot read property 'hasChildNodes' of null
    at t.value (neovis.js:35248)
    at new n (neovis.js:35243)
    at Object.onCompleted (neovis.js:36674)
    at eval (neovis.js:34269)
    at run (neovis.js:11126)
    at eval (neovis.js:11139)
    at MutationObserver.flush (neovis.js:10385)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.invoke (zone.js:387)
(anonymous) @ neovis.js:11156
perform @ neovis.js:11098
(anonymous) @ neovis.js:11150
run @ neovis.js:35611
runIfPresent @ neovis.js:35640
onGlobalMessage @ neovis.js:35680
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4053
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
postMessage (async)
registerImmediate @ neovis.js:35691
setImmediate @ neovis.js:35598
onUnhandled @ neovis.js:11146
(anonymous) @ neovis.js:11142
flush @ neovis.js:10385
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4062
ZoneDelegate.invoke @ zone.js:387
Zone.runGuarded @ zone.js:151
(anonymous) @ zone.js:129
characterData (async)
notify @ neovis.js:10406
(anonymous) @ neovis.js:10432
notify @ neovis.js:11107
then @ neovis.js:11253
_releaseConnection @ neovis.js:30699
releaseConnection @ neovis.js:30666
onCompletedWrapper @ neovis.js:34268
onCompleted @ neovis.js:33050
onCompleted @ neovis.js:34765
_handleMessage @ neovis.js:31459
Connection._dechunker.onmessage @ neovis.js:31404
_onHeader @ neovis.js:30549
AWAITING_CHUNK @ neovis.js:30502
write @ neovis.js:30560
self._ch.onmessage @ neovis.js:31377
WebSocketChannel._ws.onmessage @ neovis.js:30217
wrapFn @ zone.js:1188
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4053
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1540
   globalZoneAwareCallback @ zone.js:1566

```

Now to avoid the above error i tried to change the code for HTML page in EwayBill() and Collection(). I changed a little code and defined EwayBill output as -

```
    this.vizEwayBill = new NeoVis.default(config);
    this.vizEwayBill.render();
    console.log(this.vizEwayBill);

```

And to Collection output as -

```
       this.vizCollection = new NeoVis.default(config);
      this.vizCollection.render();
      console.log(this.vizCollection);

```

Instead of this -

```
     this.viz = new NeoVis.default(config);
     this.viz.render();
     console.log(this.viz);

```

But i still get error -

```auto

Unhandled promise rejection TypeError: Cannot read property 'hasChildNodes' of null
    at t.value (neovis.js:35248)
    at new n (neovis.js:35243)
    at Object.onCompleted (neovis.js:36674)
    at eval (neovis.js:34269)
    at run (neovis.js:11126)
    at eval (neovis.js:11139)
    at MutationObserver.flush (neovis.js:10385)
    at ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:4062)
    at ZoneDelegate.invoke (zone.js:387)
(anonymous) @ neovis.js:11156
perform @ neovis.js:11098
(anonymous) @ neovis.js:11150
run @ neovis.js:35611
runIfPresent @ neovis.js:35640
onGlobalMessage @ neovis.js:35680
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4053
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
postMessage (async)
registerImmediate @ neovis.js:35691
setImmediate @ neovis.js:35598
onUnhandled @ neovis.js:11146
(anonymous) @ neovis.js:11142
flush @ neovis.js:10385
ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4062
ZoneDelegate.invoke @ zone.js:387
Zone.runGuarded @ zone.js:151
(anonymous) @ zone.js:129
characterData (async)
notify @ neovis.js:10406
(anonymous) @ neovis.js:10432
notify @ neovis.js:11107
then @ neovis.js:11253
_releaseConnection @ neovis.js:30699
releaseConnection @ neovis.js:30666
onCompletedWrapper @ neovis.js:34268
onCompleted @ neovis.js:33050
onCompleted @ neovis.js:34765
_handleMessage @ neovis.js:31459
Connection._dechunker.onmessage @ neovis.js:31404
_onHeader @ neovis.js:30549
AWAITING_CHUNK @ neovis.js:30502
write @ neovis.js:30560
self._ch.onmessage @ neovis.js:31377
WebSocketChannel._ws.onmessage @ neovis.js:30217
wrapFn @ zone.js:1188
ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4053
ZoneDelegate.invokeTask @ zone.js:420
Zone.runTask @ zone.js:188
ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

```

Note : Only when i use this declaration that i get the output-

```
     this.viz = new NeoVis.default(config);
     this.viz.render();
     console.log(this.viz);

```

When i searched for "viz" in neovis.js code, i don't get any result.

Please help. I want more that one output in my html page at once.

---

<div class="post-metadata">

**Author:** ![lyonwj](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/lyonwj/32/27358_2.png) [@lyonwj](https://community.neo4j.com/u/lyonwj)\
**Post date:** [October 28, 2018, 12:31pm UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/2 "2018-10-28T12:31:00Z")

</div>

What is the value of `config.container_id` for each instance of Neovis? Are they the same? That error sounds like it's not able to find the container element for the visualization.

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [October 29, 2018, 5:18am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/3 "2018-10-29T05:18:48Z")

</div>

Thanks William . Its resolved

---

<div class="post-metadata">

**Author:** ![pd.payal0312](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/pd.payal0312/32/5298_2.png) [@pd.payal0312](https://community.neo4j.com/u/pd.payal0312)\
**Post date:** [June 19, 2019, 5:02am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/4 "2019-06-19T05:02:53Z")

</div>

Hi Sucheta,  
I am also facing the same issue. Can you share the resolution of this problem.

Error:  
Unhandled promise rejection TypeError: Cannot read property 'hasChildNodes' of null  
at t.value (neovis.js:35235)  
at new n (neovis.js:35230)  
at Object.onCompleted (neovis.js:36653)  
at neovis.js:34256  
at run (neovis.js:11113)  
at neovis.js:11126  
at MutationObserver.flush (neovis.js:10372)  
at ZoneDelegate.push../node\_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)  
at Zone.push../node\_modules/zone.js/dist/zone.js.Zone.runGuarded (zone.js:161)  
at MutationObserver. (zone.js:144)

Thanks  
Payal

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [June 19, 2019, 8:41am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/5 "2019-06-19T08:41:59Z")

</div>

Hi Payal,

Either the neovis.js plugin container\_id as mentioned below in the configuration is notcorrectly mentioned. Or i even got it at times when it .i.e. the function was unable to find this instance of Neovis . It happens when the page loads and the html DOM i.e. your

 hits before the config and query inside it (.i.e. the function) is called. Check the possibility of this.

> var url = config1.neo4j\_url;  
> var user = config1.neo4j\_user;  
> var password = config1.neo4j\_password;  
> **var container\_id = config1.container\_id;**
> 
> ```
> var config = {
> **container_id: container_id,**
> server_url: url,
> server_user: user,
> server_password: password,
> labels: {
>          
> 
> "Organization": {
> "thickness": "weight",
> "caption": "value",
> "size": "pagerank",
> "community": "community",
>                
> },
> "Parameter": {
> "thickness": "weight",
> "caption": "value",
> "size": "pagerank",
> "community": "community",
> }
> 
> ```
> 
> }

---

<div class="post-metadata">

**Author:** ![pd.payal0312](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/pd.payal0312/32/5298_2.png) [@pd.payal0312](https://community.neo4j.com/u/pd.payal0312)\
**Post date:** [June 19, 2019, 10:43am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/6 "2019-06-19T10:43:42Z")

</div>

Hi Sucheta,  
I mentioned the correct container id. Kindly check the below code.

```auto
function draw(str){
    var viz;
        var config = {
            container_id: "display",
            server_url: "bolt://172.21.193.217:7687",
            labels: {
                 "Person": {
                    "caption": "name",
                    "size": "pagerank",
                    "community": "community",

                } 
            },
            relationships: {
                "INTERACTS": {
                    "thickness": "weight",
                    "caption": false
                }
            },
            /* initial_cypher: "{}{}{}".format("MATCH p=()-[r:HAPPENED_IN]->() RETURN p LIMIT 25") */
             /*initial_cypher: "MATCH p=()-[r:HAPPENED_IN]->() RETURN p" */      
            initial_cypher:str
        };
    
        this.viz = new NeoVis.default(config);
        this.viz.render();
}

```

kindly share the color coding for specific nodes

Thanks  
Payal

---

<div class="post-metadata">

**Author:** ![sharath.velamuri](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sharath.velamuri/32/5721_2.png) [@sharath.velamuri](https://community.neo4j.com/u/sharath.velamuri)\
**Post date:** [July 18, 2019, 9:45pm UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/7 "2019-07-18T21:45:43Z")

</div>

@sucheta @lyonwj

Hi Sucheta and William,

I'm getting the error related to the DOM. Basically, Cannot read property 'hasChildNodes' of null, DOM is trying to get rendered before the query finishes loading the required data. I'm using react based components. I checked my container\_id and it works. I'm able to see the data on the console because as it an object and it gets updated. But when rendering I'm getting this error. Please let me know how to resolve this type of error. I'm attaching a picture of console as well for reference.

 ![neograph](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/d/dd355d05d80fb370b1e945710f060447432a94b2.jpeg)

 ![neograph](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/2X/a/a11a77a98e866cd15f85de97d7c8665591725ba9.jpeg)

```auto
this.viz = new NeoVis.default(config);
this.viz.render();

```

Thanks,  
Sharath

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [July 19, 2019, 3:51am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/8 "2019-07-19T03:51:03Z")

</div>

Hi Sharath,

You got it right , the DOM gets rendered before its functionthat has the query executes, that is why you get hasChildNodes of null error.

The solutions that occured to me are -  
[1] I used an \*ngIf ...in the html part of my angular framework. \*ngIf is a directive that makes the DOM div execute only if it is true. Check out my code for reference.

```auto

<table *ngIf="afterExtract">
  <tbody>

    <br>
    <tr>
      <td>

        <div>

          <!-- Display Singular Graph & Display Neo4j Output-->
          <div *ngFor="let i of selectedAPINameLength">

            <p id="menuframe" style="font-size: 16px">{{i.nameSingular}} </p>

            <div id="vizSingular{{i.value}}"></div>
            <br>
          </div>

        </div>

      </td>
    </tr>
  
  </tbody>
</table>

```

In the above code - \*ngIf = "afterExtract" is my condition that i put true only in the function where i write my **config**. To elaborate... i use \*ngFor to execute multiple screens of neo4j output. And vizSingular{{i.value}} is my renderer.

You may refer this link of react to convert \*ngIf of angular to react -

> <https://stackoverflow.com/questions/36771017/what-is-the-equivalent-to-ng-if-in-react-js>

[2] Place the function such that it gets executed on click or just when the DOM uploads...for which i guess a little R&D is required .

Regards,  
Sucheta

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [July 19, 2019, 4:11am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/9 "2019-07-19T04:11:13Z")

</div>

Hi Payal,

I did not see your post for a long time. Probably you have found out the solution by now. If not, please check the reply to Sharath in the below mail trail.

For the color - There are 5-7 basic colors for the nodes that paint the nodes. And when i rendered the neovis.js counterpart of Neo4j , i got plain grey colored nodes. SO i researched and got this query to run -

```auto

// ----------------- Color Cluster Query ----------------------

CALL algo.labelPropagation(null,null,'OUTGOING',{write:true, partitionProperty:'partition', weightProperty:'count'})

```

[2] Also mention the key-value pairs of labels and relationships like -

```auto

  var config = {
      container_id: vizIdSingular,
      server_url: this.url,
      server_user: this.user,
      server_password: this.password,
      labels: {
   
        "Organization": {
          "thickness": "weight",
          "caption": "value",
          "size": "pagerank",
          "community": "community",
          "sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
        },
        "Parameter": {
          "thickness": "weight",
          "caption": "value",
          "size": "pagerank",
          "community": "community",
          "sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
        },
        "Department": {
          "thickness": "weight",
          "caption": "value",
          "size": "pagerank",
          "community": "community",
          "sizeCypher": "MATCH (n) WHERE id(n) = {id} MATCH (n)-[r]-() RETURN sum(r.weight) AS c"
        },

     
      
        "API": {
          "thickness": "weight",
          "caption": "value",
          "size": "pagerank",
          "community": "community",

        },

        "System": {
          "thickness": "weight",
          "caption": "value",
          "size": "pagerank",
          "community": "community",
        },
     
        "Method": {
          "thickness": "weight",
          "caption": "value",
          "size": "pagerank",
          "community": "community",
        },

      },
      relationships: {
        "Parameter": {
          "thickness": "weight",
          "caption": true,
          "community": "community",
          "color": 'red'
        },
        "Method": {
          "thickness": "weight",
          "caption": true,
          "community": "community",

        },
       
        "Port": {
          "thickness": "weight",
          "caption": true,
          "community": "partition",

        },
  
        "API": {
          "thickness": "weight",
          "caption": true,
          "community": "community",

        },
              },

      cluster_labels: {
        "Parameter": "partition"
      },

      initial_cypher: cypherQuery,
      arrows: true,
      hierarchical_layout: true,
      hierarchical_sort_method: "directed",

    };
    this.containerIdSingular = new NeoVis.default(config);
    this.containerIdSingular.render();
    this.loading = false;
    console.log(containerIdSingular);
  }

```

[3]  
For a particular node -

```auto
Color Property
----------------

CALL algo.labelPropagation('NGOConnectionService','Parameter','OUTGOING',{write:true, partitionProperty:'community', weightProperty:'count'})

```

where - NGOConnectionService -\> node  
and  
'Parameter' - \> Relationship.

[4] Neo4j query reference -

[![](https://us1.discourse-cdn.com/flex021/uploads/neo4jcommunity/original/3X/a/6/a6769035cc5df0ade3141acaa1a51a6e6c34d19a.jpeg "Screencast: Graph Visualization With Neo4j Using Neovis.js") ](https://www.youtube.com/watch?v=0-1A7f8993M)

[5] You can change the color of the nodes in Neo4j app by including the .grass file. Check out this post -

> [@Unable to change the neovis.js nodes colors using .grass file](https://community.neo4j.com/t/unable-to-change-the-neovis-js-nodes-colors-using-grass-file/6314):
>
> Hi, I am able to change the color of the nodes through .grass file by uploading it in Favorites section in Neovis.js . However, i am unable to reflect the same changes in neovis.js . I even put the same .grass file in all the folders of neovis.js. But to no avail. Please help. My .grass file is - :style node { diameter: 50px; color: #A5ABB6; border-color: #9AA1AC; border-width: 2px; text-color-internal: #FFFFFF; font-size: 10px; } relationship { color: #A5ABB6; shaft-width:…

Regards,  
Sucheta

---

<div class="post-metadata">

**Author:** ![sharath.velamuri](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sharath.velamuri/32/5721_2.png) [@sharath.velamuri](https://community.neo4j.com/u/sharath.velamuri)\
**Post date:** [July 19, 2019, 4:41am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/10 "2019-07-19T04:41:00Z")

</div>

@sucheta

Hi Sucheta,

Thanks for the idea. I think I did what you have mentioned. I declared one variable on my state and after the render, I'm updating the state with the data. Now I'm stuck because I'm not quite sure about how the rendering of graph of works like a visualization, which functions need to be triggered etc.

Below is the code for reference:

I'm able to see the data in `this.viz` only if I call the `this.viz.render()`. Is there any other way that we can get the data without calling `this.viz.render()`?

```auto
this.viz = new NeoVis.default(config);
this.setState({
      myObj: this.viz
});
this.viz.render();

```

I think the `render()` will execute the data loading part. But if it does, is there any way that we can use a callback function? Please let me know.

Thanks,  
Sharath

---

<div class="post-metadata">

**Author:** ![sucheta](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/sucheta/32/4444_2.png) [@sucheta](https://community.neo4j.com/u/sucheta)\
**Post date:** [July 19, 2019, 5:00am UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/11 "2019-07-19T05:00:53Z")

</div>

Hi Sharath,

Let me tell you a scenario - what happened was there were more than 5,000 nodes and the DOM was taking a lot of time to load. So we thought of implementing a loader / a spinner to cover that loading time. We placed the loader at the start of the function and ended it after the this.viz.render(); (also tried just before the render();). However, to our surprise, we found out that the loader never worked. Because the render function is i guess works asynchronously. So the code doesn't execute in ascending order .ie. line by line i guess.  
So i am not sure, where your setState would work.

why don't you try something like this -

```auto
render() {
  return (
this.props.showMe ? <table >
     <div id="viz"></div> 
</table>
  );
}

function neovis(){

this.showme.props=true;

var config = {....}

this.viz = new NeoVis.default(config);
this.setState({
      myObj: this.viz
});
this.viz.render();

}

```

I just tried out react now from web.. i don't know it really.

P.S.:

```auto

 return (

   this.props.showMe ? <div id="viz"></div> 

  );

```

will not work. Atleast it did not work in my case anytime. It throws error. That is why i surrounded it in a table tag.

---

<div class="post-metadata">

**Author:** ![ziadtaleb97](https://sea1.discourse-cdn.com/flex021/user_avatar/community.neo4j.com/ziadtaleb97/32/11355_2.png) [@ziadtaleb97](https://community.neo4j.com/u/ziadtaleb97)\
**Post date:** [May 28, 2020, 2:24pm UTC](https://community.neo4j.com/t/error-unhandled-promise-rejection-while-using-neovis-js/2663/12 "2020-05-28T14:24:14Z")

</div>

Hello,  
I don't get why I still have the error. I am using a button to execute the function. Thank you in advance!

```auto
import React, { Component } from "react";
import NeoVis from 'neovis.js';
import Button from "components/CustomButton/CustomButton.jsx";

export default class Metiers2 extends React.Component {
  constructor(props) {
    super(props);
  }

  draw(){
    var config = {
      container_id : "viz",
      server_url: "bolt://localhost:7687",
      server_user: "neo4j",
      server_password: "neo4j",
      labels: {
      },
      relationships: {
    
      },
    
    
    initial_cypher: "MATCH (n)-[r]->(m) RETURN n,r,m"
    };
    
    const viz = new NeoVis(config);
    viz.render();
    console.log(viz);
  }
 
  
  
}
render(){
  return(
    <div className="content">
    <Button
                bsStyle="info"
                pullRight
                fill
                type="submit"
                onClick={() => {
                  this.draw();
                }}
              >
                Afficher
    </Button>
    </div>
  );
}
}

```