Component no longer works

[Gabby995]

Hi, i came across this component when looking into error handling in vue. I followed the documentations to setup a project and test its functionality and I believe that the component no longer works.

Please see this CodeSanbox

And this StackOverflow for further information

[dillonchanis]

Hey @Gabby995 thanks for filling out an issue and providing a sandbox! Really appreciate that.

It looks like it's working fine, maybe I'm missing something? I see the It Triggered being logged in the console and the correct component being rendered.

I'm not 100% sure this is it but it confused me at first so it maybe the case for you too - Codesandbox seems to default on the "Problems" tab in the console, if you switch over to actual "Console" tab you should see the logs. And you'll need to get rid of the error overlay by hitting the "X" in the top right.

Let me know if that helps!

[Gabby995]

@dillonchanis Thanks for getting back to me and providing the screenshot. If you refer back to the stackoverflow post I provided, I explain there that the component is indeed rendered, and the on-error method is triggered. However unlike the screenshot you provided, for me, the app crushes. I get the same console output but the app is no longer responsive.

I'm sorry if this is something I am misunderstanding but I was under impression that wrapping any component inside VErrorBoundary should replace the problematic component with a provided substitute and prevent the app from crushing.

Please see screenshot of what I see:

Ps. If you look closely on the screenshot, you can see that the problematic component WAS replaced with the specified substitute (Look behind the 'TypeError' text)

[dillonchanis]

@Gabby995 If I'm not mistaken that error overlay is specific to Codesandbox and you wouldn't see it in production. As you saw the correct component is still rendered if you close the overlay. I created a fresh project locally with Vue CLI you can find here and no overlay appears if that overlay is ruining your dev experience!

[Gabby995]

@dillonchanis Thanks for a quick response. You are correct moving the code into a local project fixes the overlay issue, sorry for creating an issue for this. The reason why I created the SandBox in the first place was because I tried implementing the component inside my main project (Locally) and it did not work.

Please see this repo where I tweaked the code slightly to replicate your original example on CodeSanbox where a v-for is used to display component with data, and when troublesome data is passed to a component the VErrorBoundary replaces the component with a specified substitute.

[dillonchanis]

Awesome! Just pulled down your project, looks like I should update the docs to reflect this situation using it inside a v-for - I think in this case you'll need to utilize the stop-propagation prop! In your case:

<VErrorBoundary :on-error="TriggerMe" :fall-back="fallBack" stop-propagation>
  <user-comp :userData="user" />
</VErrorBoundary>

In Vue 2 I don't think this was an issue and the docs still reflect that, I will update it later today! Thanks for bringing it up

[Gabby995]

Thank you for your time! This fixes the issue.