Strategies for debugging "e is null" javascript errors

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:

  1. There are ways of creating this error beyond returning None type values inappropriately in a callback
  2. 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?

Thank you for any input you can give!

Hello @connorferster,

Welcome to the community!

This is something that I use at work, it is also beneficial when the server is in production.

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 clientside callbacks?

Or just where the information is trying to be parsed from Python?

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