Misformed htm template can crash the page

[cben]

yield html`<bx</b>`
// or even `<</>`

• error logged in JS console
• results do not render
  • if you reload page at this stage, page comes up remains blank — not even code editor so user can't recover 😢 FIXED NOW
• results do not render even if you fix the code in the editor (<b>x</b>). FIXED NOW
  • But saveCode works, so if you reload after code is good, it'll work again.

Firefox console:

Uncaught (in promise) DOMException: String contains an invalid character
   Preact x36
   saveCode http://127.0.0.5:8000/:156
   onUpdate http://127.0.0.5:8000/:208
   ...

(Preact source map doesn't load in FF, does in Chrome)

Chrome console:

Uncaught (in promise) InvalidCharacterError: Failed to execute 'createElementNS' on 'Document': The qualified name provided ('bx<') contains the invalid character '<'.
    at N (index.js:436:18)
    at j (index.js:321:28)
    at $ (children.js:96:16)
    at N (index.js:527:4)
    at j (index.js:321:28)
  ...
x.setState  component.js:54
o.__c.o.__  index.js:195
saveCode    (index):156
...

Specifically, it fails in "As a node" rendering ${evalResult}.

• Maybe unrelated, but adding ErrorBoundary to "As a node" render breaks by itself, why?

[cben]

Another crash MRE: EDIT: not interesting, see next message

yield html`</b>`

or even </>.

Chrome:

TypeError: h.push is not a function
    at https://unpkg.com/htm@3.1.1/dist/htm.mjs:1:1053
    at Function.default (https://unpkg.com/htm@3.1.1/dist/htm.mjs:1:1168)
    at eval (evaluated-code:4:11)
    at Generator.next (<anonymous>)
    at x.EditEvalRenderLoop [as constructor] (http://127.0.0.4:8000/:166:31)
    at x.B [as render] (https://unpkg.com/preact@10.25.4/dist/preact.mjs:1:9118)
    at j (https://unpkg.com/preact@10.25.4/dist/preact.mjs:1:6248)
    at P (https://unpkg.com/preact@10.25.4/dist/preact.mjs:1:1475)

FF essentially same stack, just h[0].push is not a function

[cben]

Adding per-DisplayResult boundary mitigated the worst — still fails but reloading is now safe.
had to lift key= hack up so that error clears after fixing code):

            ${evalResults.map(({ result, err }) =>
              html`<${ErrorBoundary}
                key=${code /*force ErrorBoundary reset after edit (TODO: reduce excessive remounts?)*/}
              >
                <${DisplayResult}
                  evalResult=${result}
                  err=${err}  
                /> 
              <//>
              <hr/>`
            )}

Interestingly, the 2 crashes are different, if you yield them and then other results to display:

• <bx</b> fails to render only this result, displays the next;
• </> prevents displaying of following results. By adding console.log, I confirmed the code evalutation itself crashed there, next line is not reached.

Oh I see the latter actually hits the normal "Exception:" rendering path. That is fine then, nothing to improve there ✅
The first is the tricky one where html`...` successfully returns a data structure that only explodes later inside Preact when we try to render it... Hmm, maybe this counts as an htm bug? 🤔

[cben]

Related upstream: developit/htm#188 (which more a bug report than PR).

I'm trying to diagnose exception-in-htm vs. later-exception-in-preact more precisely:
https://codepen.io/cben/pen/qEBWmdE?editors=1000

=> OK, so htm deliberately does minimal validation and doesn't care about readable messages.
=> </i> is at least a good case where htm throws at template processing time: h[0].push is not a function.
=> For <bX</b> htm successfully calls h("bX<"), which with Preact's h() builds virtual dom {"type":"iX<","props":{},"__k":null,"__":null,"__b":0,"__e":null,"__c":null,"__h":null,"__v":2}. Then, Preact arguably successfully tries to render such vdom in browser DOM — it's actually browser's document.createElement('iX<') API that throws InvalidCharacterError.

[cben]

Closing, with ErrorBoundary bad templates fail to render but are not "sticky", edit to good template and it works.

I don't have much more to do here if htm doesn't care to validate templates 🤷‍♂