Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth')

[ozyx]

Summary

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth') seen in console during normal use of Open MCT.

Several tests are failing due to this error. The first instance of failure is during this nightly run on 10/12. Likely caused by changes introduced in this commit.

Expected vs Current Behavior

No unhandled TypeErrors

Steps to Reproduce

1. Create a few sine wave generators
2. Rapidly switch between them with the debug console open
3. Observe the aforementioned error in the console

Environment

• Open MCT Version: 2.1.3
• Deployment Type: local
• OS:
• Browser:

Impact Check List

• Data loss or misrepresented data?
• Regression? Did this used to work or has it always been broken?
• Is there a workaround available?
• Does this impact a critical component?
• Is this just a visual bug with no functional impact?
• Does this block the execution of e2e tests?
• Does this have an impact on Performance?

Additional Information

[scottbell]

This function used to have a guard to protect against a null element. I think we can restructure the function a bit to re-add this:

handleWindowResize() {
            if (this.$parent.$refs.plotWrapper) {
                const newOffsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
                //we ignore when width gets smaller
                const offsetChange = newOffsetWidth - this.offsetWidth;
                if (offsetChange > OFFSET_THRESHOLD) {
                    this.offsetWidth = newOffsetWidth;
                    this.config.series.models.forEach(this.loadSeriesData, this);
                }
            }
        },

[davetsay]

Whoever works this, please make sure to verify there are no unintended requests going out. Also, specifically, make sure this is true for plots in both eager load tabs and in not eager load tabs.

[scottbell]

Testing instructions to get error:

• Create 5 sin wave generators at 10Hz
• Open DevTools Console
• Flip between them rapidly
• Observe the error:

Uncaught TypeError: Cannot read properties of undefined (reading 'offsetWidth')
    at VueComponent.handleWindowResize (MctPlot.vue?5bbd:1195:1)
    at invokeFunc (lodash.js?90dc:10401:1)
    at trailingEdge (lodash.js?90dc:10450:1)
    at timerExpired (lodash.js?90dc:10438:1)

[scottbell]

Whoever works this, please make sure to verify there are no unintended requests going out. Also, specifically, make sure this is true for plots in both eager load tabs and in not eager load tabs.

Verified with @davetsay that this works as intended.

[ozyx]

Verified Fixed -- Testathon 11/14/22