reagent-project/reagent

Throwing exceptions in render functions produces stacktraces without any info on the actual components

p-himik opened this issue · 1 comments

p-himik commented

E.g. I just got this stacktrace:

The above error occurred in the <List> component:
    at List (http://localhost:8000/./cljs-runtime/module$node_modules$react_window$dist$index_cjs.js:34:125)
    at div
    at AutoSizer (http://localhost:8000/./cljs-runtime/module$node_modules$react_virtualized_auto_sizer$dist$index_cjs.js:13:494)
    at div
    at pre
    at div
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at cmp (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at div

While the mentioned "above error" does give some details about the actual function I should look at, the stacktrace above is rather useless with all those cmp.

Compare it to this stacktrace which I got by adding

(js/Object.defineProperty cmp "name" #js {:value display-name, :writable false})

within the (when display-name ...) form inside reagent.impl.component/create-class:

The above error occurred in the <List> component:
    at List (http://localhost:8000/./cljs-runtime/module$node_modules$react_window$dist$index_cjs.js:34:125)
    at div
    at AutoSizer (http://localhost:8000/./cljs-runtime/module$node_modules$react_virtualized_auto_sizer$dist$index_cjs.js:13:494)
    at div
    at pre
    at div
    at v-box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at re_com.box.v_box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at hgs.strayhorn.dialogs.curriculum_upload.diff_panel (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at re_com.box.h_box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at v-box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at re_com.box.v_box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at hgs.strayhorn.dialogs.curriculum_upload._twin_diff_panel (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at hgs.strayhorn.dialogs.curriculum_upload.twin_diff_panel (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at re_com.box.box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at v-box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at re_com.box.v_box (http://localhost:8000/./cljs-runtime/reagent.impl.component.js:496:43)
    at div
    at div
Deraen commented

Interesting. Usually, there are two messages:

  1. "Uncaught error" where stack trace mentions Cljs function names and should refer to the source files through source maps.
  2. This "The above error occurred" message from React which doesn't contain real source information.

It makes sense to attach additional information to the component if React can use that for the stack trace.

Fn components probably need a separate case for this; we are already attaching the displayName property to those, but they are also visible only as f in the trace: https://github.com/reagent-project/reagent/blob/master/src/reagent/impl/component.cljs#L472-L474.

Notes:

"The above error occurred in the" error is only used on React _DEV_ mode:
https://github.com/facebook/react/blob/19092ac8c354b92c2e0e27b73f391571ad452505/packages/react-reconciler/src/ReactFiberErrorLogger.js

At least the place which creates in the <component> part uses first displayName, and then name:
https://github.com/facebook/react/blob/19092ac8c354b92c2e0e27b73f391571ad452505/packages/react-reconciler/src/getComponentNameFromFiber.js#L115

Not fully sure how the componentStack is created, perhaps from ReactPartialRenderer:
https://github.com/facebook/react/blob/14bac6193a334eda42e727336e8967419f08f5df/packages/react-dom/src/server/ReactPartialRenderer.js#L93 & describeStackFrame and then calling https://github.com/facebook/react/blob/14bac6193a334eda42e727336e8967419f08f5df/packages/shared/ReactComponentStackFrame.js#L272 describeUnknownElementTypeFrameInDEV. If enableComponentStackLocations is true, something complex is done with throwing errors etc, if false, React should be using component displayName first and then name.