How to log modified draft state? #591

dimaqq · 2020-04-30T07:54:42Z

🙋‍♂ Question

I want to log a complex draft modification (for debug, in react-app-rewired script).

Given e.g.:

module.exports = (config, env) => immer.produce(config, draft => {
  draft.foo.bar = baz;
  call.some.mutating.function(draft);

  console.log(immer.original(draft));  // this I can do
  console.log(immer.resulting(draft));  // this I cannot do
});

I know I can log the `draft` itself, but it's pretty messy and seemingly unusable for deeply nested data.

mweststrate · 2020-04-30T08:40:42Z

you can try `console.log(JSON.stringify(draft, null, 2))`

…

On Thu, Apr 30, 2020 at 8:54 AM Dima Tisnek ***@***.***> wrote: 🙋‍♂ Question I want to log a complex draft modification (for debug, in react-app-rewired script). Given e.g.: module.exports = (config, env) => immer.produce(config, draft => { draft.foo.bar = baz; call.some.mutating.function(draft); console.log(immer.original(draft)); // this I can do console.log(immer.resulting(draft)); // this I cannot do }); I know I can log the `draft` itself, but it's pretty messy and seemingly unusable for deeply nested data. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#591>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBER3ONKY2HIXQFBCVTRPEVFHANCNFSM4MVITWGA> .

dimaqq · 2020-04-30T09:31:44Z

Yes that works, thank you!
And thus, I guess I can always do JSON.parse(JSON.stringify(draft)) to get a PDO :)

mweststrate · 2020-04-30T10:49:51Z

Correct, nonetheless I like your API proposal, feel free to leave this issue open :)

…

On Thu, Apr 30, 2020 at 10:32 AM Dima Tisnek ***@***.***> wrote: Yes that works, thank you! And thus, I guess I can always do JSON.parse(JSON.stringify(draft)) to get a PDO :) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#591 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBGWI7O2NOWUFC2PWM3RPFARDANCNFSM4MVITWGA> .

dimaqq · 2020-05-01T07:34:06Z

Weirdly, the JSON.stringify hack (over webpack config) doesn't work with CRA yarn start...
My setup is CRA + react-app-rewired + my custom config-overrides.js.
Specifically, just adding void(JSON.stringify(draft)); where draft is webpack config, like {mode: "development", plugins: ...} makes yarn start fail with:

Failed to compile.

Cannot add property hidePathInfo, object is not extensible

error Command failed with exit code 1.

I wonder if applying JSON to the draft somehow changes the draft internally. 🤔

mweststrate · 2020-05-01T07:43:15Z

Wow that is weird. As a quick fix try disable autoFreeze?

…

On Fri, 1 May 2020, 08:34 Dima Tisnek, ***@***.***> wrote: Weirdly, the JSON.stringify hack (over webpack config) doesn't work with CRA yarn start... My setup is CRA + react-app-rewired + my custom config-overrides.js. Specifically, just adding void(JSON.stringify(draft)); where draft is webpack config, like {mode: "development", plugins: ...} makes yarn start fail with: Failed to compile. Cannot add property hidePathInfo, object is not extensible error Command failed with exit code 1. I wonder if applying JSON to the draft somehow changes the draft internally. 🤔 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#591 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBD7WRHAZR3KWL6NLVLRPJ3PXANCNFSM4MVITWGA> .

dimaqq · 2020-05-01T08:13:02Z

Yes, immer.setAutoFreeze(false) at module top level, before the invocation of immer.produce solve this!

dimaqq · 2020-05-18T08:22:55Z

On a related note, I think I've found a case where it would be nice, though not strictly required to have live access to modified state.

I'd like to be able to write something like this:

case "SET_SEARCH":
  draft.search_terms = action.search;
  draft.search_hits = search(draft.data, draft.search_index, draft.search_terms);
case "SET_DATA":
  draft.data = action.data;
  draft.search_hits = search(draft.data, draft.search_index, draft.search_terms);
case "SET_INDEX":
  draft.search_index = action.index;
  draft.search_hits = search(draft.data, draft.search_index, draft.search_terms);

However, that fails because search is dumb and cannot handle Proxy objects.

So, for now I have to write

case "SET_SEARCH":
  draft.search_terms = action.search;
  draft.search_hits = search(original(draft.data), original(draft.search_index), action.search);
case "SET_DATA":
  draft.data = action.data;
  draft.search_hits = search(action.data, original(draft.search_index), original(draft.search_terms));
case "SET_INDEX":
  draft.search_index = action.index;
  draft.search_hits = search(original(draft.data), action.index, original(draft.search_terms));

Which is explicit 👍but wonky and search calls don't look the same 👎

P.S. I don't want to use JSON.parse(JSON.stringify(draft.data)) because data is quite large.

mweststrate · 2020-05-18T11:15:51Z

can you clarify why search doesn't work with proxies? proxies are undetectable in javascript, so the fact that a draft is a proxy should in itself not matter.

…

On Mon, May 18, 2020 at 9:23 AM Dima Tisnek ***@***.***> wrote: On a related note, I think I've found a case where it would be *nice*, though not strictly required to have live access to modified state. I'd like to be able to write something like this: case "SET_SEARCH": draft.search_terms = action.search; draft.search_hits = search(draft.data, draft.search_index, draft.search_terms); case "SET_DATA": draft.data = action.data; draft.search_hits = search(draft.data, draft.search_index, draft.search_terms); case "SET_INDEX": draft.search_index = action.index; draft.search_hits = search(draft.data, draft.search_index, draft.search_terms); However, that fails because search is dumb and cannot handle Proxy objects. So, for now I have to write case "SET_SEARCH": draft.search_terms = action.search; draft.search_hits = search(original(draft.data), original(draft.search_index), action.search); case "SET_DATA": draft.data = action.data; draft.search_hits = search(action.data, original(draft.search_index), original(draft.search_terms)); case "SET_INDEX": draft.search_index = action.index; draft.search_hits = search(original(draft.data), action.index, original(draft.search_terms)); Which is explicit 👍but wonky and search calls don't look the same 👎 — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#591 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBBPQR545P2ARFFWW5LRSDV63ANCNFSM4MVITWGA> .

dimaqq · 2020-05-19T05:19:16Z

I can't reproduce the proxy making a difference any more 🤔
Perhaps I had some other bug at the time...

When I'm comparing calling my search with and without original(...), all I can see is:

passing draft is at least 2x slower than original(draft) over any data I try
sometimes, passing draft is 16x slower than original(draft)

I'm testing this with a data set of 4K objects, each having ~4 searchable fields, and in practice the performance is pretty good with or without original. I ought to support 100K objects though, so I'm trying to be proactive.

mweststrate · 2020-05-19T06:50:12Z

That is correct, drafts are much slower to operate on, especially if you read a ton. Since search is not a mutating operation, there is no need at all to do that in a produce. I'd search first, then do the update after that in a produce

…

On Tue, 19 May 2020, 06:19 Dima Tisnek, ***@***.***> wrote: I can't reproduce the proxy making a difference any more 🤔 Perhaps I had some other bug at the time... When I'm comparing calling my search with and without original(...), all I can see is: - passing draft is at least 2x slower than original(draft) over data I try - sometimes, passing draft is 16x slower than original(draft) I'm testing this with a data set of 4K objects, each having ~4 searchable fields, and in practice the performance is pretty good with or without original. I ought to support 100K objects though, so I'm trying to be proactive. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#591 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBGZOSDMNGSXRSZHJBLRSIJGBANCNFSM4MVITWGA> .

mweststrate · 2020-05-22T18:19:22Z

added some more explicit performance tips here: 4af88f1

mweststrate · 2020-06-10T20:23:24Z

With Immer 7, it will be possible to call console.log(current(draft)) which will be a lot more efficient than stringifying.

* Introduced `current`, which takes a snapshot of the current state of a draft and finalizes it (but without freezing). Current is a great utility to print the current state during debugging (no Proxies in the way), and the output of current can also be safely leaked outside the producer. Implements #441, #591 * [BREAKING CHANGE] getters and setters are now handled consistently: own getters and setters will always by copied into fields (like Object.assign does), inherited getters and setters will be left as-is. This should allow using Immer directly on objects that trap their fields, like down in Vue or MobX. Fixes #584, #439, #593, #558 * [BREAKING CHANGE] produce no longer accepts non-draftable objects as first argument * [BREAKING CHANGE] original can only be called on drafts and will throw otherwise (fixes #605) * [BREAKING CHANGE] non-enumerable and symbolic fields will never be frozen * [BREAKING CHANGE] the patches for arrays are now computed differently to fix some scenarios in which they were incorrect. In some cases they will be more optimal now, in other cases less. Especially splicing / unshifting items into an existing array might result in a lot of patches. Fixes #468 * Improved documentation in several areas, there is now a page for typical update patterns and a separate page on how to work with classes. And additional performance tips have been included. Fixes #457, #115, #462 * Fixed #462: All branches of the produced state should be frozen * Fixed #588: Inconsistent behavior with nested produce * Fixed #577: Immer might not work with polyfilled symbols * Fixed #514, #609: Explicitly calling `useProxies(false)` shouldn’t check for the presence of Proxy.

eric-burel · 2022-01-19T15:16:53Z

Hi, is there any hope to have a better display in Vs Code debugger? A comment in this Stack Overflow post describes how to use a Watcher to do this, but that's something you have to set manually: immer__WEBPACK_IMPORTED_MODULE_1__.current(draft).

What would be needed to get a better display in this situation?

mweststrate · 2022-01-19T23:49:18Z

JSON.parse(JSON.stringify(draft)) probably will do the same trick as well. Or access the Proxy [[target]] property should generally have that state as well when expanding. Or as last ditch resort enabling ES5 mode, since that doesn't use proxies which sadly still aren't displayed nicer by debuggers yet

…

On Wed, Jan 19, 2022 at 3:17 PM Eric Burel ***@***.***> wrote: Hi, is there any hope to have a better display in Vs Code debugger? A comment in this Stack Overflow post <https://stackoverflow.com/a/66441033/5513532> describes how to use a Watcher to do this, but that's something you have to set manually: immer__WEBPACK_IMPORTED_MODULE_1__.current(draft). What would be needed to get a better display in this situation? — Reply to this email directly, view it on GitHub <#591 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBGL22MEYBGZG5SE6QTUW3IW7ANCNFSM4MVITWGA> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you modified the open/close state.Message ID: ***@***.***>

dimaqq added the question label Apr 30, 2020

mweststrate closed this as completed May 22, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to log modified draft state? #591

How to log modified draft state? #591

dimaqq commented Apr 30, 2020

mweststrate commented Apr 30, 2020 via email

dimaqq commented Apr 30, 2020

mweststrate commented Apr 30, 2020 via email

dimaqq commented May 1, 2020

mweststrate commented May 1, 2020 via email

dimaqq commented May 1, 2020

dimaqq commented May 18, 2020 •

edited

Loading

mweststrate commented May 18, 2020 via email

dimaqq commented May 19, 2020 •

edited

Loading

mweststrate commented May 19, 2020 via email

mweststrate commented May 22, 2020

mweststrate commented Jun 10, 2020

eric-burel commented Jan 19, 2022

mweststrate commented Jan 19, 2022 via email

How to log modified draft state? #591

How to log modified draft state? #591

Comments

dimaqq commented Apr 30, 2020

🙋‍♂ Question

mweststrate commented Apr 30, 2020 via email

dimaqq commented Apr 30, 2020

mweststrate commented Apr 30, 2020 via email

dimaqq commented May 1, 2020

mweststrate commented May 1, 2020 via email

dimaqq commented May 1, 2020

dimaqq commented May 18, 2020 • edited Loading

mweststrate commented May 18, 2020 via email

dimaqq commented May 19, 2020 • edited Loading

mweststrate commented May 19, 2020 via email

mweststrate commented May 22, 2020

mweststrate commented Jun 10, 2020

eric-burel commented Jan 19, 2022

mweststrate commented Jan 19, 2022 via email

dimaqq commented May 18, 2020 •

edited

Loading

dimaqq commented May 19, 2020 •

edited

Loading