Error when setting diagram.div


We’ve come across an error in our application that has been very difficult to reproduce consistently, but were wondering if you would have any ideas of the cause or pointers on what to look for.

TypeError: Cannot read properties of null (reading 'part')

  127099 | 
  127100 |   if (b instanceof te && this.Fp === a) {
  127101 |     var c = b.adornedObject;
> 127102 |     (null !== a ? c.part === a : null === c) ? this.showToolTip(b, c) : this.hideToolTip();
         |                     ^ 
  127103 |   }
  127104 | };
  127105 | 

This seems to happen when we change which Diagram is active on the page. In our app, we maintain references to multiple Diagrams and only have one displayed on the page at a time (by setting its Diagram.div non-null and all others to null).

From the stack trace:

   94 | 
   95 | if (isActive) {
   96 |   // Set diagram's div to repopulate it with GoJS elements/canvas etc
>  97 |   diagramRef.current.div = divRef.current;
      | ^ 
   98 | } else {
   99 |   // Disassociate diagram from div to clear up memory
  100 |   diagramRef.current.div = null;

(we are using React refs to maintain references to the diagram and div, hence the current property)

The full stack trace is here as an error.html file: error.html | Slack. Please let me know if there are any additional details you need - thank you in advance for your help.

Thank you for a relatively detailed description of the problem.

My first thought, since you say it isn’t easily reproducible, is that you cause a situation where two different Diagrams are trying to use the same Div at the same time. I would code it to set the old Diagram.div to null and only then set the new one’s div to the the Div reference.

We can also experiment to see if we can reproduce a problem.

Thank you for your response, Walter. It would seem like we are always setting the old diagram’s div to null before setting the new diagram’s div, but I will try see if this is ever not the case.

Is there anything related to adornments / updateAdornments that we should look into? We have some adornments in our diagrams (context menus and tooltips), but I’m not sure if those relate to the stack trace.

Are your tooltips implemented in GoJS or in HTML?
GoJS Adornments are just regular GraphObjects/Parts, so I doubt that would be an issue.
But if you have implemented HTML tooltips or context menus (look for HTMLInfo), that might still have some references that you need to clean up.
Or maybe you have other code dealing with HTML that have references to a Diagram or a GraphObject or a Tool.

We do use HTMLInfo for a custom HTML text editor – we’ll take a look at that again and look for any other Diagram/GraphObject/Tool references. Thanks again!