I understand that “e is null” javascript errors in the console are often (always?) caused by callback return values being of the wrong type, i.e. having return values of None instead of an empty data type (e.g. [] or {}, as required by the component and property the callback is set to output to).
My question is, for a large-ish application with many multiple pages and multiple callbacks, what are some good strategies for tracking down which callback is generating the error.
Some strategies I have tried, to varying success:
In my own workflow, I make changes to the app, save, and hot-reload. When I notice the error come up immediately, I check the callback I was just working on to make sure the return types are correct.
When debugging the work of another, I got through the git logs searching for return values being updated in a commit. The last time I tried this, I thought I fixed the error but it seems to perhaps not be the only one and my git logs are not giving me any clues, oddly.
This has me thinking that there are additional possibilities:
There are ways of creating this error beyond returning None type values inappropriately in a callback
There are other errors from other commits in the code base that I missed
Regardless, I am wondering if there are ways of using the console or generated error message from Dash to track down the cause and/or location of these errors without having to look through my git log for changes that might be the cause of the error?
Ah, yes, I have been looking at similar systems. The problem is that these are able to track errors in “Python space” but this error I am talking about is in “Javacript space” and the traceback does not seem to tell me anything useful about how to fix it.
Do you have any thoughts about these Javascript errors that are caused by Python code but which do not cause any Python errors?
These are server side callbacks. When I have encountered these before it was because a Javascript component was receiving an inappropriate data type from the Python callback that outputs to it.
Here is an example of the Javascript traceback that I have (I can’t get any meaning from this):
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
Sr/<@http://127.0.0.1:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_4_1m1683663877.min.js:2:69107
Sr@http://127.0.0.1:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_4_1m1683663877.min.js:2:69523
t@http://127.0.0.1:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_4_1m1683663877.min.js:2:17342
ea/u</<@http://127.0.0.1:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_4_1m1683663877.min.js:2:74989
ea/u<@http://127.0.0.1:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_4_1m1683663877.min.js:2:75633
ea@http://127.0.0.1:8050/_dash-component-suites/dash_bootstrap_components/_components/dash_bootstrap_components.v1_4_1m1683663877.min.js:2:74549
renderWithHooks@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:14938:29
updateFunctionComponent@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:17169:22
beginWork@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:18745:18
callCallback@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:182:16
invokeGuardedCallbackDev@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:231:18
invokeGuardedCallback@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:286:33
beginWork$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:23338:30
performUnitOfWork@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:22289:14
workLoopSync@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:22265:24
performSyncWorkOnRoot@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:21891:11
flushSyncCallbackQueueImpl/<@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:11224:26
unstable_runWithPriority@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react@16.v2_9_3m1683758060.14.0.js:2685:14
runWithPriority$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:11174:12
flushSyncCallbackQueueImpl@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:11219:26
flushSyncCallbackQueue@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:11207:5
batchedUpdates$1@http://127.0.0.1:8050/_dash-component-suites/dash/deps/react-dom@16.v2_9_3m1683758060.14.0.js:21997:9
notify@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:11704:12
notifyNestedSubs@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:11764:15
handleChangeWrapper@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:11768:20
dispatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:76197:7
./node_modules/redux-thunk/es/index.js/createThunkMiddleware/middleware/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:75867:16
applyProps@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1747:15
./src/observers/executedCallbacks.ts/observer/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1780:40
forEach@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:81582:7
./node_modules/ramda/es/internal/_checkForMethod.js/_checkForMethod/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:83732:119
f2@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:83988:14
./src/observers/executedCallbacks.ts/observer/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1770:55
forEach@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:81582:7
./node_modules/ramda/es/internal/_checkForMethod.js/_checkForMethod/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:83732:119
f2@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:83988:14
observer@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1756:51
./src/StoreObserver.ts/StoreObserver/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:355:9
forEach@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:81582:7
./node_modules/ramda/es/internal/_checkForMethod.js/_checkForMethod/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:83732:119
f2@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:83988:14
./src/StoreObserver.ts/StoreObserver/<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:353:51
dispatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:76197:7
./node_modules/redux-thunk/es/index.js/createThunkMiddleware/middleware/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:75867:16
_callee$@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1992:25
tryCatch@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1929:2404
./src/observers/executingCallbacks.ts/_regeneratorRuntime/wrap/generator._invoke@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1929:1972
./src/observers/executingCallbacks.ts/_regeneratorRuntime/defineIteratorMethods/</<@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1929:3255
asyncGeneratorStep@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1933:103
_next@http://127.0.0.1:8050/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_9_3m1683758060.dev.js:1934:212