Immer: TypeError trying to console.log the draft

[peterbe]

• [ ] Feature request: No
  
  
  
  • [ ] I am willing to implement this myself
  
  
• [ ] Issue: this issue
  
  
  
  • Version: 1.10.5
  
  
  • _SIMPLE_ Reproduction: https://codesandbox.io/s/p39m2r54w0
  
  
  • Expected behavior: No TypeError
  
  
  • Observed behavior: TypeError: illegal operation attempted on a revoked proxy
  
  
  • [ ] Occurs when using Proxies (use setUseProxies(true)) (Don't know)
  
  
  • [ ] Occurs in the ES5 implementation (use setUseProxies(false)) (Don't know)
  
  

The codesandbox does a good job of reproducing it every time. Open the Web Console to see the error. Here's the code:

const text = this.refs.text.value.trim();
if (text) {
  const tasks = produce(this.state.tasks, draft => {
    draft.push([false, { text, date: new Date() }]);
    console.log(draft);   // THIS causes the TypeError
  });
  this.setState({ tasks }, () => {
    this.refs.text.value = "";
  });
}

Note that the console.log actually works. It does print out: Proxy { <target>: (1) […], <handler>: {…} }

In Firefox I get:

TypeError: illegal operation attempted on a revoked proxy

In Chrome I get:

Uncaught TypeError: Cannot perform 'getPrototypeOf' on a proxy that has been revoked

[peterbe]

Perhaps this is a feature request. I'm not sure. The application appears to work so perhaps it's only an error exclusively in the context of the Firefox/Chrome console. Would still be nice to be able to use console.log without errors.

[mweststrate]

The problem is that console.log prints asynchronously, meaning that draft
will only be evaluated when it actually prints, and not when the log
statement is executed! The simplest way is to serialize it first, for
example by using console.log(JSON.stringify(draft))

Op vr 18 jan. 2019 om 16:22 schreef Peter Bengtsson <
[email protected]>:

>

• Feature request: No
  
  
  
  • I am willing to implement this myself
  
  
• Issue: this issue
  
  
  
  • Version: 1.10.5
  
  
  • SIMPLE Reproduction: https://codesandbox.io/s/p39m2r54w0
  
  
  • Expected behavior: No TypeError
  
  
  • Observed behavior: TypeError: illegal operation attempted on a
    
    revoked proxy
  
  
  • Occurs when using Proxies (use setUseProxies(true)) (Don't know)
  
  
  • Occurs in the ES5 implementation (use setUseProxies(false))
    
    (Don't know)
  
  

The codesandbox does a good job of reproducing it every time. Open the Web
Console to see the error. Here's the code:

const text = this.refs.text.value.trim();
if (text) {

const tasks = produce(this.state.tasks, draft => {

draft.push([false, { text, date: new Date() }]);

console.log(draft);   // THIS causes the TypeError

});

this.setState({ tasks }, () => {

this.refs.text.value = "";

});

}

Note that the console.log actually works. It does print out: Proxy {
: (1) […], : {…} }

In Firefox I get:

TypeError: illegal operation attempted on a revoked proxy

In Chrome I get:

Uncaught TypeError: Cannot perform 'getPrototypeOf' on a proxy that has been revoked

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/mweststrate/immer/issues/294, or mute the thread
https://github.com/notifications/unsubscribe-auth/ABvGhI4Z-7Bh34TUvTVhUQ-2o1502UPRks5vEebFgaJpZM4aIGyb
.

[peterbe]

Also, the GitHub issue template on this project is quite confusing. When I'm filing is clearly an issue so why does it ask "what" and a checkbox?

[peterbe]

@mweststrate I figured as much. Is there something we can do to prevent the next schmuck, like me, to be stung by this? I don't know, can we implement a toString on the Proxy object or something?

[aleclarson]

This seems like a "bug" with console.log (or maybe just a caveat). You'd think it would "capture" its arguments synchronously, even if printing is done asynchronously. It seems they didn't take revocable proxies into account when implementing.

My suggestion would be to either override console.log with a function that stringifies the arguments eagerly, or use a debugger when you want to inspect a draft object.

[mweststrate]

@peterbe, no, it is just a limitation of console.log, and also happens when not using proxies, super trivial example:

https://twitter.com/mweststrate/status/1086285032258523144

[peterbe]

By the way, I blogged about Immer and mentioned this as a caveat to be aware of.
Thank you guys!

[macabeus]

Just commenting here to help if someone arrived here by google.... You can use current function from immer 7:

console.log(current(draft))

With redux-toolkit:

import { current } from '@reduxjs/toolkit'

...

const mySlice = createSlice({
  initialState,
  name,
  reducers: {
    myReducer(state) {
      console.log(current(state))
    }
  }
})