Invalid template results can cause cryptic errors.

[theengineear]

A template result can successfully be created and then fail to render. Because it's common that an element will only override the "template" method, the stack trace will not actually print the name of the problematic file — this makes debugging incredibly difficult.

One approach would be to wrap the call to lit-html's render in a try-catch such that we can append DOM pathing information when we encounter an error.

Example cryptic stack trace:

Uncaught TypeError: items is not iterable
    at repeat.ts:122
    at NodePart.commit (parts.ts:210)
    at TemplateInstance.update (template-instance.ts:53)
    at NodePart.__commitTemplateResult (parts.ts:280)
    at NodePart.commit (parts.ts:221)
    at render (render.ts:55)
    at HTMLElement.render (x-element.js:158)
    at Function.__updateHost (x-element.js:838)
    at Function.__initializeHost (x-element.js:742)
    at HTMLElement.connectedCallback (x-element.js:131)

But we could modify the message to be:

Uncaught TypeError: items is not iterable — Invalid template for "HelloElement" at path "hello-world < div#container"
    at repeat.ts:122
    at NodePart.commit (parts.ts:210)
    at TemplateInstance.update (template-instance.ts:53)
    at NodePart.__commitTemplateResult (parts.ts:280)
    at NodePart.commit (parts.ts:221)
    at render (render.ts:55)
    at HTMLElement.render (x-element.js:158)
    at Function.__updateHost (x-element.js:837)
    at Function.__initializeHost (x-element.js:741)
    at HTMLElement.connectedCallback (x-element.js:131)

In the later case, you immediately know where to start debugging. You may not know why items is not iterable, but at least you know where to look for the culprit.