Skip to content
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

More user friendly errors in layout.js #26448

Merged
merged 3 commits into from
Jan 24, 2020

Conversation

dreamofabear
Copy link

Fixes #26398.

src/layout.js Outdated
userAssert(inputLayout !== undefined, 'Unknown layout: %s', layoutAttr);
userAssert(
inputLayout !== undefined,
'Invalid "layout" value: %s',
Copy link
Contributor

Choose a reason for hiding this comment

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

Is it relatively trivial to include in this error message the name of the offending component?

Copy link
Author

Choose a reason for hiding this comment

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

Added the element itself. 👍

/** @const {string|null|undefined} */
const inputHeight =
heightAttr && heightAttr != 'fluid' ? parseLength(heightAttr) : heightAttr;
userAssert(inputHeight !== undefined, 'Invalid height value: %s', heightAttr);
Copy link
Member

Choose a reason for hiding this comment

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

For my own learning, why do you prefer variable interpolation via %s instead of via backticks?

Copy link
Author

Choose a reason for hiding this comment

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

We have a feature that extracts error strings at compile time and replaces them with an error code for a smaller binary size. It doesn't play nice with JS string templating unfortunately.

Copy link
Author

Choose a reason for hiding this comment

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

Actually I'm poking around now and I'm not sure this is true and/or if the feature was launched. :)

@dreamofabear
Copy link
Author

Any other comments or can we merge? :)

@morsssss
Copy link
Contributor

@choumx I admit I did make another suggestion about even friendlier error messages (is such a thing even possible?) Please see above....

Copy link
Member

@samouri samouri left a comment

Choose a reason for hiding this comment

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

Seems like @morsssss has morsss ideas for improvement. Code LGTM though.

@dreamofabear
Copy link
Author

@morsssss Are you talking about #26448 (comment)? I made a change for that already.

@morsssss
Copy link
Contributor

@choumx I don't know if I can get a direct link to this particular comment - but it's the one above that suggests language like

<amp-foo>: Invalid "width" value: 300

and

<amp-foo>: length units should be the same for "width" and "height"

instead of like

Length units should be the same for "width" and "height": px, em, <amp-foo>

@dreamofabear
Copy link
Author

As is, devtools will render the element itself into console (e.g. supports highlight on hover). Try it out and let me know if you'd still prefer a prefix tag string.

@dreamofabear dreamofabear merged commit a91a37c into ampproject:master Jan 24, 2020
@dreamofabear dreamofabear deleted the better-layout-errors branch January 24, 2020 22:23
robinvanopstal added a commit to jungvonmatt/amphtml that referenced this pull request Jan 27, 2020
* master: (62 commits)
  📦 Update dependency fetch-mock to v8.3.2 (ampproject#26491)
  Revert 'Move mutator implementations out to a standalone service' (ampproject#26479)
  Fix syntax error (ampproject#26481)
  Add pespective back. (ampproject#26486)
  More user friendly errors in layout.js (ampproject#26448)
  ✨ Start logging AMP URL on SwG Pages (ampproject#26480)
  Fix border around desktop amp-story-pages. (ampproject#26449)
  Fix Story tests. (ampproject#26464)
  ✨ Performance Measurement Chrome Extension (ampproject#26333)
  amp-consent restrict iframe fullScreen if no focus  (ampproject#26461)
  Add performance benchmark task (ampproject#26026)
  ♻️ amp-script: emit warning if zero height and width. (ampproject#26444)
  ✨ Launch minimal-wrapper native CEv1 (ampproject#26360)
  ♻️ Lint: include externs (round 2) (ampproject#26446)
  amp-script: Create 'fill content' container for responsive/fluid (ampproject#26400)
  amp-consent remove cmp iframe focus (ampproject#26437)
  Disable macro-after-long-task in inabox. (ampproject#26459)
  Launch layoutbox-invalidate-on-scroll (ampproject#26430)
  Add amp-ad support for ByPlay (ampproject#25663)
  🏗 Add specific RTV opt-in to experiments.html (ampproject#26434)
  ...
@morsssss
Copy link
Contributor

That highlight on hover will be excellent! (I don't get this yet in my v0.js) But I think that if it's just as easy to output friendlier, more human-readable errors, we should. I think that, otherwise, we're making ourselves less accessible than other programming frameworks.

That said, this is not matter of broken functionality, so I'm not going to belabor the point :)

@morsssss
Copy link
Contributor

just wanted to bump this one up again...

@dreamofabear
Copy link
Author

Here's what the error looks like now:
image

I think that's what you wanted right?

@morsssss
Copy link
Contributor

That's really nice!

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.

<amp-script> outputs error to console for layout != 'container'
5 participants