Silent failure when referencing an attribute of non-existent object in a tag

[jspeis]

Noticed that if I accidentally reference {{ foo.bar }} without having foo declared there is no error message but I just get a blank screen.

Reproduced here: https://svelte.technology/repl/?version=1.6.5&gist=96eac2057376cf37f092145e4b22fcc6

[Conduitry]

It looks like this silent failure is only affecting the REPL. The code that the compiler is generating does actually throw an exception at runtime - while trying to evaluate var text4 = createText( root.bug.fake ); - so if you were using the compiled code directly, you'd get a helpful error in the console. I would guess the REPL is eating the exception here.

I'm not sure whether something like this particular issue would fall under the eventual more-rigorous compile-time checks. Either way, there will still always be runtime errors that the compiler can't foresee. In your own code, you can handle this however you want - but it's not entirely clear to me what a nice, general way to display arbitrary errors in the REPL UI would be. Perhaps for now the REPL could be console.log-ing the exceptions so there's at least a record of them?

edit - Ah, in fact, the REPL is already doing pretty much exactly this for errors that arise from attempting to update the data for an existing component - here. I would think that same approach could be used for errors that arise during the instantiation of the component as well.

[jspeis]

Thanks @Conduitry for the reply.

One thing I wonder about is in regard to localizing the effects of a failure. For example, assuming there is a variable "name" but not "example" what would happen is that none of the component below would render even though part of the component could resolve successfully:

<h2>I might think this should show up since there would be no error here {{ name }} </h2>
<h1>Hello {{ example.fake }}</h1>
<h2>this also wont show up {{ name }} </h2>

Looking at what gets compiled:

    var h2 = createElement( 'h2' );

    appendNode( createText( "I might think this should show up since there would be no error here " ), h2 );
    var text1 = createText( root.name );
    appendNode( text1, h2 );
    var text2 = createText( "\n" );

    var h1 = createElement( 'h1' );

    appendNode( createText( "Hello " ), h1 );
    var text4 = createText( root.example.fake );
    appendNode( text4, h1 );
    var text5 = createText( "\n" );

    var h21 = createElement( 'h2' );

    appendNode( createText( "this also wont show up " ), h21 );
    var text7 = createText( root.name );
    appendNode( text7, h21 );

I wonder if isolating the creation of elements with variables resolved at runtime like text4 in the example above would be more robust so that could render what is renderable and still raise the error but not have it prevent the whole component from rendering to the page?

[Rich-Harris]

Thanks, I've opened sveltejs/v2.svelte.dev#39 — the REPL should indeed give more useful feedback.

As far as localising errors goes, I reckon that should fall under development warnings — the cost of always checking that objects exist before accessing their properties is too high to always do it, I think.

[Rich-Harris]

We can close this now, as the REPL gives much better feedback — it reports the error, and uses sourcemaps to figure out which character to highlight in the editor: