3

I love recompose, but when I use it I wind up with stack traces that have lines like:

in withProps(withHandlers(withHandlers(SelectionOverlay))) (created by withState(withProps(withHandlers(withHandlers(SelectionOverlay)))))

Is there any way I can give some sort of "display name" to the individual HOC components to get more readable stack traces?

machineghost
  • 33,529
  • 30
  • 159
  • 234

3 Answers3

1

Checkout this section: https://github.com/acdlite/recompose#build-your-own-libraries

I believe you can just assign a static property to your component called displayName and that will be passed through to stack traces as well as the React chrome extension.

So if your HOC is composed like this, you can just write:

const MyComponent = withProps(withHandlers(withHandlers(SelectionOverlay)))

MyComponent.displayName = "ArbitraryValue"
Jon Jaques
  • 4,262
  • 2
  • 23
  • 25
  • Huh, I tried doing exactly that but it didn't show up in the stack trace :( – machineghost Feb 08 '18 at 22:18
  • Not sure. It's definitely documented: https://reactjs.org/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging So I would see there is something else wrapping it. Post code and I can give more insight :) – Jon Jaques Feb 08 '18 at 22:39
1

There is a setDisplayName method available that seems to do what you are asking - https://github.com/acdlite/recompose/blob/master/docs/API.md#setdisplayname

Hugo Silva
  • 6,748
  • 3
  • 25
  • 42
1

Instead of using setDisplayName all over the place, you may want to try recompact which aims to solve exactly the problem of awful nesting of recomposeed components.

As a pleasant addition, benchmarks shows it's a bit faster than recompose.

fkulikov
  • 3,169
  • 13
  • 24