Skip to content

Conversation

@nhunzaker
Copy link
Contributor

@nhunzaker nhunzaker commented Aug 13, 2018

I noticed this working on the Hydration fixture. It looks like we have a warning that depends on the %s replacement to stringify an array into a list of words. Instead it reports Array(n):

image

I use the 1Password browser extension, which adds some data attributes when you engage with a form.

Steps to reproduce

Using the 1Password browser extension (I've added some extra steps if you don't have this):

  1. Open http://react-hydration.surge.sh/hydration
  2. Uncheck "Hydrate" to render markup without executing React
  3. Type into the input (anything, and really only necessary for 1password )
  4. If you do not have the browser extension, add some data attributes to the input in the JS console
  5. Click "hydrate"

Expected Warning: Extra attributes from the server: data-com.onepassword.iv, data-com.agilebits.onepassword.user-edited (Or whatever attributes you added)

Actual: Warning: Extra attributes from the server: Array(2)

This prevents a bug where Chrome reports `Array(n)` where `n` is the
size of the array.
@nhunzaker nhunzaker changed the title Manually join extra attributes in warning Manually join extra attributes in hydration warning Aug 13, 2018
@gaearon
Copy link
Collaborator

gaearon commented Aug 13, 2018

Run Prettier?

@gaearon
Copy link
Collaborator

gaearon commented Aug 13, 2018

Hmm. Should we disallow non-string/number args to warning?

@nhunzaker
Copy link
Contributor Author

Run Prettier?

Oops. Done.

Hmm. Should we disallow non-string/number args to warning?

I kind of think so, ya. I wonder if we could just set this with Flow and fix what fails.

Copy link
Collaborator

@gaearon gaearon left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not fix this here.

Instead, change warningWithoutStack to coerce all substitutions to string. That's how it worked earlier when formatting was done inside the warning implementation .


let argIndex = 0;
const message =
'Warning: ' + format.replace(/%s/g, () => `${args[argIndex++]}`);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hmmm. 'Warning: ' + is redundant with ${ args }. Fixing real quick.

}

let argIndex = 0;
const message = 'Warning: ' + format.replace(/%s/g, () => args[argIndex++]);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gaearon Ended up just moving this line up a bit so the string replacement is consistent between the two blocks. Feel okay?

Copy link
Collaborator

@gaearon gaearon Aug 13, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, that was an intentional change. See my collapsed comment below (silly GitHub)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay. No worries :)


if (typeof console !== 'undefined') {
console.error('Warning: ' + format, ...args);
console.error(message);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The part about passing ...args is intentional. It lets other tools read the stack separately.

I'm only suggesting to map over them and coerce them to strings.

}
if (typeof console !== 'undefined') {
console.error('Warning: ' + format, ...args);
const strings = args.map(item => '' + item);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: maybe stringArgs

@gaearon gaearon changed the title Manually join extra attributes in hydration warning Ensure arguments are coerced to strings in warnings Aug 13, 2018
@gaearon
Copy link
Collaborator

gaearon commented Aug 13, 2018

Thanks for catching this before the release!

@nhunzaker nhunzaker merged commit 5550ed4 into facebook:master Aug 13, 2018
@NE-SmallTown
Copy link
Contributor

the release?

@gaearon
Copy link
Collaborator

gaearon commented Aug 15, 2018

We’ll need to cut a patch soon

@nhunzaker nhunzaker mentioned this pull request Aug 30, 2018
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants