Amphtml: amp-mustache: Better debug logging e.g. for template syntax errors

[morsssss]

Currently, I don't know of a good way to debug a mustache template. If I make a syntax error, or if the data returned by <amp-list> doesn't match what the template expects, I'm just stuck. I can only debug by trial and error or by simply getting lucky.

For example, just now, my entire <amp-list> failed because I forgot the / in a close tag. Even when I added #development, AMP couldn't help me.

It would be wonderful if #development let AMP output something about its attempts to apply my data to my template. And it would let me know if there was a mismatch or my template was simply invalid.

/cc @nainar

[morsssss]

Here's an example of the sort of information <amp-list> does give me on the console:

[amp-bind] Default value () does not match first result (null) for <INPUT [value]="itemToRemove.productId">. We recommend writing expressions with matching default values, but this can be safely ignored if intentional.

This gives me a hint in this case... but I'd love if we could do better.

[cathyxz]

Not sure this will help debug mustache templates, but (slightly related) setting a lower log level can sometimes be helpful in debugging. You can try setting AMP.setLogLevel(4) with the JS console, and it will give you the various mutations that amp-bind goes through.

export const LogLevel = {
  OFF: 0,
  ERROR: 1,
  WARN: 2,
  INFO: 3,
  FINE: 4,
};

[morsssss]

Thanks! This does look useful, and I will try it out.

Looks like there's no getter for the log level?

Also, this would not be useful for things that happen on page load, unless I am missing something...

[choumx]

You can also add #log=4 to get "fine" level logging for example. Though I'm not sure we have any useful info/fine logging for amp-mustache.

[westonruter]

The lack of good error messages bit me today as well.

Consider this amp-list markup:

<amp-list
    layout="fixed-height"
    height="300"
    items="."
    src="https://make.wordpress.org/core/wp-json/wp/v2/posts"
>
    <template type="amp-mustache">
        <div>{{{title.rendered}}</div>
    </template>
    <div placeholder>Loading...</div>
    <div fallback>Failed to load data.</div>
</amp-list>

Notice the unbalanced braces in {{{title.rendered}}. Even with #development=1&log=4 the only relevant console entries are:

I would expect there to be some error message about a syntax error for unbalanced braces. Instead I only see “Unknown error”.

[choumx]

@samouri A nice quality of life improvement here, since you've been looking at template code. :)

[morsssss]

This would be a huge help!

I haven't posted in this issue for a while, but I did try increased log levels, without much help for my faulty mustache templates. I can't tell you how long I've stared at these without noticing my horrible syntax errors and the like.

[samouri]

A pretty codeframe highlighting the error would take more time, but something simple like this would be trivial. WDYT:

[samouri]

@choumx: can we make this a validator error in addition to a runtime one? The validator should be capable of running mustache.parse() on all of the templates within the page.

[morsssss]

If AMP can output syntax errors to the console, that would be ultra-fantastic.

The other thing I'd love is a way to trace the way in which <amp-mustache> applied data to the template. Then you'd know if you were missing an items, if your data didn't match the template, etc.

[samouri]

If AMP can output syntax errors to the console, that would be ultra-fantastic.

AFAICT, the underlying mustache library doesn't provide us useful info when throwing errors (besides for this message with a character index). Therefore super-helpful messaging may be difficult to create.

The other thing I'd love is a way to trace the way in which applied data to the template. Then you'd know if you were missing an items, if your data didn't match the template, etc.

That sounds perfectly reasonable. Would you want this just for amp-list or for all mustache rendering? My first instinct is to add user().fine() logging to amp-mustache:

[samouri]

Here is a similar message applied to amp-list instead of amp-mustache:

[morsssss]

Of course it's a little hard for me to get a feel for this experience without being able to try it out... but I'm sure this would be a huge improvement, saving developers countless hours of trial and error.

It would be useful for any mustache template. Though I can't tell from this whether you get additional info if it happens at the <amp-list> stage instead of at <amp-mustache>. It would be really nice to be able to know when <amp-mustache> had some sort of problem applying the data to the template - like if data expected by the template wasn't present. But simply seeing the data output like this (which I imagine is what you're doing) is something.