lit-element(lit-html) needs to provider better diagnostic support

[moonlitknight]

I'm seeing the stack trace below in my console. The root cause is that one of my arrays = undefined, so the following code is throwing an exception...

// updatingElement.js:39
 fromAttribute(value, type) {
    switch (type) {
...
      case Array:
        return JSON.parse(value);

It took me an hour of Chrome debugging to isolate which array in which of my data objects was undefined. It would be great if lit-element could catch that kind of error and log a message which indicated the name of the Attribute causing the problem. I believe this is one instance of a more general exercise to trap errors and provide meaningful console messages.

Uncaught SyntaxError: Unexpected token u in JSON at position 0
    at JSON.parse (<anonymous>)
    at fromAttribute (updating-element.ts:166)
    at Function._propertyValueFromAttribute (updating-element.ts:448)
    at HTMLElement._attributeToProperty (updating-element.ts:621)
    at HTMLElement.attributeChangedCallback (updating-element.ts:564)
    at AttributeCommitter.commit (parts.ts:103)
    at AttributePart.commit (parts.ts:142)
    at TemplateInstance.update (template-instance.ts:60)
    at NodePart._commitTemplateResult (parts.ts:299)
    at NodePart.commit (parts.ts:230)
fromAttribute | @ | updating-element.ts:166
-- | -- | --
  | _propertyValueFromAttribute | @ | updating-element.ts:448
  | _attributeToProperty | @ | updating-element.ts:621
  | attributeChangedCallback | @ | updating-element.ts:564
  | commit | @ | parts.ts:103
  | commit | @ | parts.ts:142
  | update | @ | template-instance.ts:60
  | _commitTemplateResult | @ | parts.ts:299
  | commit | @ | parts.ts:230
  | render | @ | render.ts:57
  | render | @ | shady-render.ts:284
  | update | @ | lit-element.ts:231
  | performUpdate | @ | updating-element.ts:772
  | _enqueueUpdate | @ | updating-element.ts:717
  | async function (async) |   |  
  | _enqueueUpdate | @ | updating-element.ts:706
  | _requestUpdate | @ | updating-element.ts:663
  | initialize | @ | updating-element.ts:484
  | initialize | @ | lit-element.ts:147
  | UpdatingElement | @ | updating-element.ts:240
  | LitElement | @ | lit-element.ts:88
  | (anonymous) | @ | connect-mixin.ts:52
  | CnLitElement | @ | cn-lit-element.js:26
  | EditNote | @ | edit-note.js:26
  | _clone | @ | template-instance.ts:72
  | _commitTemplateResult | @ | parts.ts:298
  | commit | @ | parts.ts:230
  | updatePart | @ | repeat.ts:37
  | containerPart | @ | repeat.ts:442
  | commit | @ | parts.ts:214
  | update | @ | template-instance.ts:60
  | _commitTemplateResult | @ | parts.ts:288
  | commit | @ | parts.ts:230
  | render | @ | render.ts:57
  | render | @ | shady-render.ts:284
  | update | @ | lit-element.ts:231
  | performUpdate | @ | updating-element.ts:772
  | _enqueueUpdate | @ | updating-element.ts:717
  | async function (async) |   |  
  | _enqueueUpdate | @ | updating-element.ts:706
  | _requestUpdate | @ | updating-element.ts:663
  | set | @ | updating-element.ts:335
  | stateChanged | @ | my-viewdev.js:393
  | _storeUnsubscribe.store.subscribe | @ | connect-mixin.ts:59
  | dispatch | @ | redux.js:214
  | action | @ | redux_store.js:110
  | (anonymous) | @ | index.js:11
  | dispatch | @ | redux.js:613
  | F_N_Common.hydrateFiles.then | @ | notestate-redux.js:114
  | Promise.then (async) |   |  
  | dispatch | @ | notestate-redux.js:113
  | (anonymous) | @ | index.js:8
  | MyReduxStore.dispatch.action | @ | redux_store.js:21
  | firstUpdated | @ | app-c.js:71
  | LogMethod.descriptor.value | @ | index.js:29
  | performUpdate | @ | updating-element.ts:794
  | _enqueueUpdate | @ | updating-element.ts:717
  | async function (async) |   |  
  | _enqueueUpdate | @ | updating-element.ts:706
  | _requestUpdate | @ | updating-element.ts:663
  | initialize | @ | updating-element.ts:484
  | initialize | @ | lit-element.ts:147
  | UpdatingElement | @ | updating-element.ts:240
  | LitElement | @ | lit-element.ts:88
  | (anonymous) | @ | connect-mixin.ts:52
  | MyApp | @ | app-c.js:44
  | (anonymous) | @ | app-c.js:335

[justinfagnani]

If you paused on exceptions in devtools, could you see the attribute name in attributeChangedCallback?

I'm a little wary of adding too much weight to the package via error messages.

[kevinpschaaf]

Now that we have development build runtime warnings, we should ensure errors thrown out of e.g. attribute parsing have good warnings.