Error handling

[gwenaelp]

Hi there,

I am using v-runtime-template and it works like a charm! Thank you for your awesome work!

However, I'm not sure that the templates I'm rendering are correct. They can be valid or not and I have no control about that. I would like to execute some code (to display an error message) when they are not valid. The problem is that I can't catch the error to execute some code.I end up with this error : "Failed to mount component: template or render function not defined. And I can't catch it to execute some code.

Any ideas? If I solve this problem I may contribute to your lib to integrate error handling :D

[alexjoverm]

Hi! It'd be awesome if you can contribute by adding error handling!

It could be done on v-runtime-template using the errorCaptured hook: https://vuejs.org/v2/api/#errorCaptured

Then, we could provide a custom error event to the outside so the component using v-runtime-template can handle it.

Keep in mind that's available from 2.5+ so it's something we must add to the doc

[pepf]

Interested in this is well :) I did a quick check using errorCaptured hook in a parent component (basically a fancy wrapper around v-runtime-template), and it works fine :)

However, it only deals with a certain type of error, specifically the ones that will throw errors in runtime. For example, trying to bind a prop to a non-existent object or other things that will make your javascript break down the line.

Since the full Vue build is required for this anyways, I would like to try and also catch the template errors. These typically look like:

vue.common.js?2371:580 [Vue warn]: Error compiling template:

<div>
      <p>
          <c-button class="primary">submit</c-button>
      </p>
      {{{{{'NaN'}}}
      <div class="row dark">
          <c-button class="transparent invert">Left</c-button>
          <c-button class="transparent invert">Right</c-button>
      </div></div>

- invalid expression: Unexpected token { in

    "\n      "+_s({{{'NaN')+"}\n      "

  Raw expression: {{{{{'NaN'}}}

The function responsible for this is compileToFunctions in the main vue source code.. however it only logs a "warning" to the console if the compiled template is not a proper render function.

Do you think we could re-use some cure vue stuff to prevalidate templates as well :)

[alexjoverm]

Hey! 😄

Well, in this case the errors are runtime-only since the template is interpreted at runtime, that's why I thought errorCaptured would be enough. In fact, there is a core package vue-template-validator but it's for compile time.

AFAIK, Vue already does that template validation under the hood, so we would be repeating another step. IMO, this issues is more about catching those errors instead.

I think the best we can do is to investigate further what we can do to catch those errors. If we want to provide custom validation functionality, that's something we can add aside and let the user use it if needed since it could slightly decrease performance.

[pepf]

So a simple implementation of errorCaptured could look like this:

https://codesandbox.io/s/503yjk6vpp?module=%2Fsrc%2Fcomponents%2FLiveEdit.vue

As you can see, the second scenario triggers the Error Callback, but the third one doesn't. I actually wrote a warnHandler that is able to pass the warnings and show them in the correct (failing) template, but I doubt if you would want this functionality inside this component.

[alexjoverm]

Thanks for the example @pepf! Yep, unfortunately it seems that the syntax errors on the template are not handled. We cannot add a warnHandler into the plugin since is global to the Vue instance (plus is triggered only in development but not in production).

Let's see if we can find any approppiate way to do this.

[pepf]

If you need some inspiration, I've updated the example with the warnHandler that is able to intercept template errors and pass them on to components 😛

https://codesandbox.io/s/503yjk6vpp

[DelfsEngineering]

Any further thoughts on this?

[gwenaelp]

I had the error handling implemented as said above on a project, but it had some drawbacks (I was something like every other Vue error display changed or disappeared, I don't remember).

I got overwhelmed by a lot of tasks. I need to have another look into this, but I'm still interested and I'd be glad to contribute, but it will depend on my free time available, which is quite rare for me at the moment...

[gwenaelp]

But if anybody in interested in error handling, be careful about how the rest of your app behave with the snippets below.

[lfmunoz]

@pepf unfortunately the warnhandler doesn't work in production mode

https://vuejs.org/v2/api/#warnHandler

"Note this only works during development and is ignored in production."