2.36.12 - Some Data Elements not loading in maintenance app

Support - Assistance technique
#1

It seems to be some sort of front-end issue - The API returns the data element just fine and I can’t find any errors in the DHIS2 logs. The only error is from the JS console:

drop-down.js:54 Uncaught TypeError: Cannot read properties of undefined (reading ‘text’)
at r.getOptionText (drop-down.js:54:62)
at t.value (drop-down.js:170:33)
at t.value (drop-down.js:210:24)
at d._renderValidatedComponentWithoutOwnerOrContext (ReactCompositeComponent.js:799:1)
at d._renderValidatedComponent (ReactCompositeComponent.js:822:1)
at d.performInitialMount (ReactCompositeComponent.js:362:1)
at d.mountComponent (ReactCompositeComponent.js:258:1)
at Object.mountComponent (ReactReconciler.js:46:1)
at h.mountChildren (ReactMultiChild.js:238:1)
at h._createInitialChildren (ReactDOMComponent.js:697:1)
at h.mountComponent (ReactDOMComponent.js:516:1)
at Object.mountComponent (ReactReconciler.js:46:1)
at h.mountChildren (ReactMultiChild.js:238:1)
at h._createInitialChildren (ReactDOMComponent.js:697:1)
at h.mountComponent (ReactDOMComponent.js:516:1)
at Object.mountComponent (ReactReconciler.js:46:1)
at d.performInitialMount (ReactCompositeComponent.js:371:1)
at d.mountComponent (ReactCompositeComponent.js:258:1)
at Object.mountComponent (ReactReconciler.js:46:1)
at h.mountChildren (ReactMultiChild.js:238:1)
at h._createInitialChildren (ReactDOMComponent.js:697:1)
at h.mountComponent (ReactDOMComponent.js:516:1)
at Object.mountComponent (ReactReconciler.js:46:1)
at d._updateRenderedComponent (ReactCompositeComponent.js:765:1)
at d._performComponentUpdate (ReactCompositeComponent.js:724:1)
at d.updateComponent (ReactCompositeComponent.js:645:1)
at d.performUpdateIfNecessary (ReactCompositeComponent.js:561:1)
at Object.performUpdateIfNecessary (ReactReconciler.js:157:1)
at u (ReactUpdates.js:150:1)
at o.perform (Transaction.js:140:1)
at r.perform (Transaction.js:140:1)
at r.perform (ReactUpdates.js:89:1)
at Object.S [as flushBatchedUpdates] (ReactUpdates.js:172:1)
at o.closeAll (Transaction.js:206:1)
at o.perform (Transaction.js:153:1)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62:1)
at Object.l [as enqueueUpdate] (ReactUpdates.js:200:1)
at o (ReactUpdateQueue.js:24:1)
at Object.enqueueSetState (ReactUpdateQueue.js:219:1)
at o.setState (ReactComponent.js:63:1)
at t._next (EditModelForm.component.js:141:22)
at t.__tryOrUnsub (Subscriber.js:242:1)
at t.next (Subscriber.js:189:1)
at t._next (Subscriber.js:129:1)
at t.next (Subscriber.js:93:1)
at t._next (map.js:85:1)
at t.next (Subscriber.js:93:1)
at t._next (filter.js:89:1)
at t.next (Subscriber.js:93:1)
at t.notifyNext (combineLatest.js:133:1)
at t._next (InnerSubscriber.js:23:1)
at t.next (Subscriber.js:93:1)
at t.notifyNext (mergeMap.js:145:1)
at t._next (InnerSubscriber.js:23:1)
at t.next (Subscriber.js:93:1)
at i.schedule.value (PromiseObservable.js:66:1)

#2

Thank you @chase.freeman! What version of dhis2 are you using? Would it be possible to reproduce the issue on play? Is there a way to debug the issue and get more info. The ‘Cannot read properties of undefined’ is usually generic error and doesn’t indicate what the issue is exactly.

Are you able to identify which Data Elements are not loading? Maybe this will give us an insight.

Thanks!

#3

Can you recreate this on play @chase.freeman (if yes, please open a jira or let us know the data element)?

If not, it might be caused by the data element being associated with an invalid optionSet (e.g. on e that’s been deleted), or maybe the option set is not being returned by the api call to optionSets in the maintenance app.

1 Like
#4

Thanks @tzemp - I’ve investigated the optionSets but no luck (yet). I think I need to look at them again with fresh eyes. I cannot recreate on Play.

1 Like
#5

This it the line of code that is failing: maintenance-app/drop-down.js at v36 · dhis2/maintenance-app · GitHub

Sorry, I just looked at it very briefly yesterday and assumed options/optionSets, but it probably actually applies to any drop down on a data element page. So, there’s somewhere where you have this.state.options.find(option => option.value === value) evaluating to undefined and hence undefined has no property text.

Maybe check the other dropdown items and check that all of the values associated with the data element are valid (e.g. they exist in the dropdown)? I assume this is a metadata issue if you cannot create on play, but possibly there’s also something going wrong with the value that is being passed to this component.

Let us know in case there’s something for us to fix

1 Like
#6

Indeed, this was my assumption, too. Thanks you for providing exactly what I need to look at, that is helpful. I was mostly wondering if anyone had seen this before. I’ll dig in further to see what I can ascertain. Thanks Tom!

1 Like