New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError trying to console.log the draft #294

Closed
peterbe opened this Issue Jan 18, 2019 · 7 comments

Comments

Projects
None yet
3 participants
@peterbe
Copy link

peterbe commented Jan 18, 2019

  • 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

This comment has been minimized.

Copy link
Author

peterbe commented Jan 18, 2019

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

This comment has been minimized.

Copy link
Owner

mweststrate commented Jan 18, 2019

@peterbe

This comment has been minimized.

Copy link
Author

peterbe commented Jan 18, 2019

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

This comment has been minimized.

Copy link
Author

peterbe commented Jan 18, 2019

@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 aleclarson added the question label Jan 18, 2019

@aleclarson

This comment has been minimized.

Copy link
Collaborator

aleclarson commented Jan 18, 2019

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.

@aleclarson aleclarson closed this Jan 18, 2019

@mweststrate

This comment has been minimized.

Copy link
Owner

mweststrate commented Jan 18, 2019

@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

This comment has been minimized.

Copy link
Author

peterbe commented Jan 18, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment