Blank Screen-DroneDB Import #1563

techmedic5 · 2024-10-04T20:03:05Z

How did you install WebODM (docker, installer, etc.)?

I installed WebODM using Docker on a Linux VM running Ubuntu 22.04.5.

What's your browser and operating system? (Copy/paste the output of https://www.whatismybrowser.com/)

Chrome 129 on Windows 11

What is the problem?

When I use the DroneDB Import button, the page displays a blank screen with only the header and navigation visible. This issue occurs for both a self-hosted DroneDB and a cloud-based one. As a follow-up, I can confirm that I am able to export to DroneDB successfully.

How can we reproduce this? (What steps trigger the problem? What parameters are you using for processing? Include screenshots. If you are having issues processing a dataset, you must include a copy of your dataset uploaded on Dropbox, Google Drive or https://dronedb.app)

Currently running version 2.5.5 on WebODM. Enable and configure the prebuilt DroneDB plugin.

techmedic5 · 2024-10-04T20:05:23Z

Also, I have updated Linux, Docker, and the WebODM to the latest version. In both the console logs of WebODM and DroneDB I am not seeing an error.

techmedic5 · 2024-10-08T14:35:56Z

I did a little more digging and these are the errors present in the browser:

srwareham · 2024-12-23T00:22:47Z

I'm experiencing this exact same issue.

To expand a bit more on the steps to reproduce:

Run dronedb/registry docker image v1.1.12
Run opendronemap/webodm_webapp latest
Create new user in webodm, give all permissions via Administration -> Accounts. All further actions use this user
Enable dronedb plugin in webodm
Click on dronedb sidebar item. Put in default user admin:password. Put in registry url and click verify configuration. Observe result "Configuration verified successfully!"
Navigate to dashboard, create new project. Then click DroneDB Import.
Observe exactly the same as the error report above.

The react error message suggests using the development build when debugging instead of the minified version. I'll confess I'm not exactly sure how to do this but happy to try with a pointer in the right direction. I flipped through the Dockerfile & start.sh but it's a bit hard to parse as I have no background with react/npm/webdev.

The same errors occur in up-to-date versions of both Firefox & Chrome

Thank you!

pierotofy · 2024-12-23T02:55:47Z

CC @HeDo88TH

HeDo88TH · 2024-12-23T16:51:54Z

We are investigating the issue.

EDIT: The issue is confirmed, we are making a fix.

HeDo88TH · 2024-12-24T15:21:25Z

At first glance nothing has changed dronedb-side. This is the error

main.jsx:30 The above error occurred in the <Modal> component:
    in Modal
    in Modal
    in SelectUrlDialog
    in TaskView
    in div
    in div
    in div
    in li
    in ProjectListItem
    in ul
    in Paginator
    in Route
    in withRouter(Paginator)
    in div
    in ProjectList
    in projectList
    in Route
    in div
    in Router
    in BrowserRouter
    in Dashboard

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
react-dom.development.js:11102 Uncaught Error: Unable to find node on an unmounted component.
    at findHostInstanceWithWarning (react-dom.development.js:25372:19)
    at Object.findDOMNode (react-dom.development.js:26062:12)
    at exports.default (ownerDocument.js:6:58)
    at Portal._this.setContainer (Portal.js:61:109)
    at Portal.componentDidMount (Portal.js:68:10)
    at commitLifeCycles (react-dom.development.js:19814:22)
    at commitLayoutEffects (react-dom.development.js:22803:7)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
    at invokeGuardedCallback (react-dom.development.js:292:31)
main.jsx:30 The above error occurred in the <Modal> component:
    in Modal
    in Modal
    in SelectUrlDialog
    in TaskView
    in div
    in div
    in div
    in li
    in ProjectListItem
    in ul
    in Paginator
    in Route
    in withRouter(Paginator)
    in div
    in ProjectList
    in projectList
    in Route
    in div
    in Router
    in BrowserRouter
    in Dashboard

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

scheduler.development.js:178 Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
    at Modal.onHide (Modal.js:530:39)
    at Modal.componentWillUnmount (Modal.js:257:12)
    at callComponentWillUnmountWithTimer (react-dom.development.js:19580:12)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
    at invokeGuardedCallback (react-dom.development.js:292:31)
    at safelyCallComponentWillUnmount (react-dom.development.js:19587:5)
    at commitUnmount (react-dom.development.js:20109:11)
    at commitNestedUnmounts (react-dom.development.js:20163:5)
    at unmountHostComponents (react-dom.development.js:20443:7)

It seems that the "cloudimport" plugin gives the same error. Did anything change in the underlying react/libs of plugins? @pierotofy

pierotofy · 2024-12-24T15:51:52Z

I don't remember making breaking changes, but that error comes from a Modal which is part of react-bootstrap, perhaps they broke something. Wonder if setting a stricter version to https://github.com/OpenDroneMap/WebODM/blob/master/coreplugins/dronedb/public/package.json#L3 would fix it (e.g. 0.32.4).

HeDo88TH · 2024-12-24T16:42:31Z

By setting a precise version in package.json the dialog now opens:

When starting the import process a new error (very similar appears):

ncaught TypeError: _this.props.suggestedTaskName is not a function
    at Object.eval [as suggestedTaskName] (NewTaskPanel.jsx:61:26)
    at EditTaskForm.eval [as loadSuggestedName] (EditTaskForm.jsx:60:21)
    at EditTaskForm.componentDidMount (EditTaskForm.jsx:366:12)
    at commitLifeCycles (react-dom.development.js:19814:22)
    at commitLayoutEffects (react-dom.development.js:22803:7)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
    at invokeGuardedCallback (react-dom.development.js:292:31)
    at commitRootImpl (react-dom.development.js:22541:9)
    at unstable_runWithPriority (scheduler.development.js:653:12)
eval @ NewTaskPanel.jsx:61
eval @ EditTaskForm.jsx:60
componentDidMount @ EditTaskForm.jsx:366
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168Comprendi l'erroreAI
main.jsx:30 The above error occurred in the <EditTaskForm> component:
    in EditTaskForm
    in div
    in div
    in div
    in NewTaskPanel (created by ConfigureNewTaskDialog)
    in div
    in ModalBody (created by ConfigureNewTaskDialog)
    in div
    in div
    in div
    in ModalDialog
    in Transition
    in Fade
    in DialogTransition
    in RefHolder
    in div
    in Portal
    in Modal
    in Modal (created by ConfigureNewTaskDialog)
    in ConfigureNewTaskDialog
    in TaskView
    in div
    in div
    in div
    in li
    in ProjectListItem
    in ul
    in Paginator
    in Route
    in withRouter(Paginator)
    in div
    in ProjectList
    in projectList
    in Route
    in div
    in Router
    in BrowserRouter
    in Dashboard

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
console.error @ main.jsx:30
overrideMethod @ hook.js:608
logCapturedError @ react-dom.development.js:19527
logError @ react-dom.development.js:19564
update.callback @ react-dom.development.js:20708
callCallback @ react-dom.development.js:12490
commitUpdateQueue @ react-dom.development.js:12511
commitLifeCycles @ react-dom.development.js:19883
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168Comprendi l'erroreAI
react-dom.development.js:11102 Uncaught TypeError: _this.props.suggestedTaskName is not a function
    at Object.eval [as suggestedTaskName] (NewTaskPanel.jsx:61:26)
    at EditTaskForm.eval [as loadSuggestedName] (EditTaskForm.jsx:60:21)
    at EditTaskForm.componentDidMount (EditTaskForm.jsx:366:12)
    at commitLifeCycles (react-dom.development.js:19814:22)
    at commitLayoutEffects (react-dom.development.js:22803:7)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:16)
    at invokeGuardedCallback (react-dom.development.js:292:31)
    at commitRootImpl (react-dom.development.js:22541:9)
    at unstable_runWithPriority (scheduler.development.js:653:12)
eval @ NewTaskPanel.jsx:61
eval @ EditTaskForm.jsx:60
componentDidMount @ EditTaskForm.jsx:366
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
eval @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168Comprendi l'erroreAI
main.jsx:30 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
    in NewTaskPanel (created by ConfigureNewTaskDialog)
    in div
    in ModalBody (created by ConfigureNewTaskDialog)
    in div
    in div
    in div
    in ModalDialog
    in Transition
    in Fade
    in DialogTransition
    in RefHolder
    in div
    in Portal
    in Modal
    in Modal (created by ConfigureNewTaskDialog)
    in ConfigureNewTaskDialog
    in TaskView
    in div
    in div
    in div
    in li
    in ProjectListItem
    in ul
    in Paginator
    in Route
    in withRouter(Paginator)
    in div
    in ProjectList
    in projectList
    in Route
    in div
    in Router
    in BrowserRouter
    in Dashboard

Progress can be tracked on #1576

pierotofy · 2025-01-03T19:26:35Z

Closed via #1576

github-actions bot added the software fault label Oct 4, 2024

pierotofy closed this as completed Jan 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Blank Screen-DroneDB Import #1563

Blank Screen-DroneDB Import #1563

techmedic5 commented Oct 4, 2024 •

edited

Loading

techmedic5 commented Oct 4, 2024

techmedic5 commented Oct 8, 2024

srwareham commented Dec 23, 2024 •

edited

Loading

pierotofy commented Dec 23, 2024

HeDo88TH commented Dec 23, 2024 •

edited

Loading

HeDo88TH commented Dec 24, 2024

pierotofy commented Dec 24, 2024

HeDo88TH commented Dec 24, 2024 •

edited

Loading

pierotofy commented Jan 3, 2025

Blank Screen-DroneDB Import #1563

Blank Screen-DroneDB Import #1563

Comments

techmedic5 commented Oct 4, 2024 • edited Loading

How did you install WebODM (docker, installer, etc.)?

What's your browser and operating system? (Copy/paste the output of https://www.whatismybrowser.com/)

What is the problem?

How can we reproduce this? (What steps trigger the problem? What parameters are you using for processing? Include screenshots. If you are having issues processing a dataset, you must include a copy of your dataset uploaded on Dropbox, Google Drive or https://dronedb.app)

techmedic5 commented Oct 4, 2024

techmedic5 commented Oct 8, 2024

srwareham commented Dec 23, 2024 • edited Loading

pierotofy commented Dec 23, 2024

HeDo88TH commented Dec 23, 2024 • edited Loading

HeDo88TH commented Dec 24, 2024

pierotofy commented Dec 24, 2024

HeDo88TH commented Dec 24, 2024 • edited Loading

pierotofy commented Jan 3, 2025

techmedic5 commented Oct 4, 2024 •

edited

Loading

srwareham commented Dec 23, 2024 •

edited

Loading

HeDo88TH commented Dec 23, 2024 •

edited

Loading

HeDo88TH commented Dec 24, 2024 •

edited

Loading