You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
The text was updated successfully, but these errors were encountered:
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 atry-catch
such that we can append DOM pathing information when we encounter an error.Example cryptic stack trace:
But we could modify the message to be:
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.The text was updated successfully, but these errors were encountered: