Is there a way to make this work with terminal ?

[aakashchoubey]

The default notifier has a lot of log lines for devtools colors which aren't supported in terminal. To create a custom notifier is a lot of effort because as I can see from the default notifier, a lot of diff checking is done under the hood. Moreover, wdyr maintains an ownerMap which isn't publically exposed.

Any suggestions or good examples for creating custom notifiers?

[vzaidman]

if the problem is the colours, you can modify the colours directly from the options.

[aakashchoubey]

What I mean is, this is the output I get in the terminal. -

[Tue Jul 27 2021 19:02:41.840]  GROUP  ..  %cErrorBoundary color: #058;
[Tue Jul 27 2021 19:02:41.850]  LOG    ..  {"ErrorBoundary": [Function ErrorBoundary]} Re-rendered because of props changes:
[Tue Jul 27 2021 19:02:41.850]  GROUP  ....  %cprops.%cextraProps%c color:blue; color:red; color:default;
[Tue Jul 27 2021 19:02:41.860]  LOG    ....  different objects that are equal by value. (more info at http://bit.ly/wdyr02)
[Tue Jul 27 2021 19:02:41.870]  LOG    ....  {"prev extraProps": {"key": "header"}} !== {"next extraProps": {"key": "header"}}
[Tue Jul 27 2021 19:02:41.890]  LOG    ....  {"For detailed diff, right click the following fn, save as global, and run: ": [Function diffFn]}
[Tue Jul 27 2021 19:02:41.890]  GROUP  ....  %cprops.%cforwardedRef%c color:blue; color:red; color:default;
[Tue Jul 27 2021 19:02:41.900]  LOG    ....  different functions with the same name. (more info at http://bit.ly/wdyr02)
[Tue Jul 27 2021 19:02:41.910]  LOG    ....  {"prev forwardedRef": [Function ref]} !== {"next forwardedRef": [Function ref]}
[Tue Jul 27 2021 19:02:41.910]  GROUP  ....  Rendered by Unknown
[Tue Jul 27 2021 19:02:41.920]  LOG    ....  {"Unknown": {"$$typeof": Symbol(react.forward_ref), "render": [Function anonymous]}} Re-rendered because of props changes:
[Tue Jul 27 2021 19:02:41.930]  GROUP  ......  %cprops.%cextraProps%c color:blue; color:red; color:default;
[Tue Jul 27 2021 19:02:41.930]  LOG    ......  different objects that are equal by value. (more info at http://bit.ly/wdyr02)
[Tue Jul 27 2021 19:02:41.940]  LOG    ......  {"prev extraProps": {"key": "header"}} !== {"next extraProps": {"key": "header"}}
[Tue Jul 27 2021 19:02:41.940]  LOG    ......  {"For detailed diff, right click the following fn, save as global, and run: ": [Function diffFn]}
[Tue Jul 27 2021 19:02:41.950]  GROUP  ..  %cHeaderNavigation color: #058;
[Tue Jul 27 2021 19:02:41.960]  LOG    ..  {"HeaderNavigation": [Function HeaderNavigation]} Re-rendered because of props changes:
[Tue Jul 27 2021 19:02:41.960]  GROUP  ....  %cprops.%crenderItem:parent-hook-useCallback-deps%c color:blue; color:red; color:default;
[Tue Jul 27 2021 19:02:41.970]  LOG    ....  different objects that are equal by value. (more info at http://bit.ly/wdyr02)
[Tue Jul 27 2021 19:02:41.970]  LOG    ....  {"prev renderItem:parent-hook-useCallback-deps": [false, false, {"fireEvent": [Function anonymous], "heading": [Object], "isWidgetVisible": true, "showBackButton": true}]} !== {"next renderItem:parent-hook-useCallback-deps": [false, false, {"fireEvent": [Function anonymous], "heading": [Object], "isWidgetVisible": true, "showBackButton": true}]}
[Tue Jul 27 2021 19:02:41.990]  LOG    ....  {"For detailed diff, right click the following fn, save as global, and run: ": [Function diffFn]}
[Tue Jul 27 2021 19:02:41.102]  GROUP  ....  %cprops.%crenderItem%c color:blue; color:red; color:default;
[Tue Jul 27 2021 19:02:41.103]  LOG    ....  different functions with the same name. (more info at http://bit.ly/wdyr02)
[Tue Jul 27 2021 19:02:41.104]  LOG    ....  {"prev renderItem": [Function anonymous]} !== {"next renderItem": [Function anonymous]}
[Tue Jul 27 2021 19:02:41.105]  GROUP  ....  %cprops.%crenderLokiContent:parent-hook-useCallback-deps%c color:blue; color:red; color:default;
[Tue Jul 27 2021 19:02:41.105]  LOG    ....  different objects that are equal by value. (more info at http://bit.ly/wdyr02)
[Tue Jul 27 2021 19:02:41.106]  LOG    ....  {"prev renderLokiContent:parent-hook-useCallback-deps": [false, false, {"fireEvent": [Function anonymous], "heading": [Object], "isWidgetVisible": true, "showBackButton": true}]} !== {"next renderLokiContent:parent-hook-useCallback-deps": [false, false, {"fireEvent": [Function anonymous], "heading": [Object], "isWidgetVisible": true, "showBackButton": true}]}

For some reason, I am unable to use any dev tools and have to use terminal's logs. console.group Does not exactly work and lines like %cprops.%cextraProps%c color:blue; color:red; color:default; are a bit unreadable.

Is there some way I can fix this?

[vzaidman]

You can play with the notifier option:

https://github.com/welldone-software/why-did-you-render#notifier

notifier: ({Component, displayName, hookName, prevProps, prevState, prevHook, nextProps, nextState, nextHook, reason, options, ownerDataMap}) => void

and log however you want