React widget throws exceptions when IDE is loading

I have a react widget that is contributed as a standalone IDE view. It works fine when opening from the View menu. However, if it was left open in a previous session, it will throw errors and an empty tab appears in its place when the IDE loads. The widget doesn’t implement StatefulWidget, so I wouldn’t expect there to be anything different when it is opened automatically while the IDE loads or when you do it manually from the View menu. The only thing that comes to mind is that the widget draws stuff to a canvas, so maybe something goes wrong when it tries to check the size of some of its components while the IDE is loading and not rendering the full UI. Is there a way to detect that the IDE is not yet loaded so that I can replace the widget with a placeholder for the duration?

@dpetroff thank you for the discussion, you’ll probably want to take a look at some of the widget lifecycle hooks for your view, but it is difficult to tell what the issue is without looking at the code. Perhaps debugging through as to why the issue occurs will be helpful as well.

As for application state, you can take a look at it’s lifecycle hooks:

I’ve come back to this and the problematic react component does document.getElementById in a useEffect, which returns null during >>> Restoring the layout state..., presumably because none of the main UI elements have been added to the DOM yet.

What are the widget lifecycle hooks you mentioned? I’d like to try those first before going down the application state rabbit hole.

@dpetroff you can take a look at the following:

It may be that you need to do some logic in a postConstruct() if you need things to be ready (async), example:

I was able to avoid the issue by overriding onAfterAttached to add an update() and rendering the widget conditionally:

protected onAfterAttach(msg: Message) {

protected render() {
  return {this.isAttached && <ProblematicComponent />}