Usage of Error Component

[anzhelikakovalchuk]

Description

Hi, I am trying to use errorComponent props to create a custom error handler. But it doesn't seem to work

Expected behavior

Expected to pass error component by props errorComponent

Steps To Reproduce

What I am trying to do:
<template>
  <placeholder
      name="main"
      :rendering="rendering"
      :errorComponent="errorComponent"
    />
</template>
<script>
import { Placeholder} from '@sitecore-jss/sitecore-jss-vue'

const errorComponent= {
  render (createElement) {
    return createElement('div', {}, 'this is a custom error component')
  }
}

export default {
  name: 'index',

  layout: 'jss-default',

  components: {
    Placeholder,  
    errorComponent
  },  

  props: {
    fields: {
      type: Object,
      default: () => ({})
    }
  } 
}
</script>

Your Environment

"@sitecore-jss/sitecore-jss": "^11.0.2", "@sitecore-jss/sitecore-jss-vue": "^11.0.2"

[aweber1]

In order to bind your component to the errorComponent prop on the Placeholder component in Vue, you need to expose it as a bindable property on the index Vue component instance, i.e. via props, computed, data, methods.

export default { 
  ...
  // accept errorComponent as a prop
  props: {
    errorComponent
  },
  // or create a computed property
  computed: {
    errorComponent
  },
  // or get the component via local method
  methods: {
    getErrorComponent() {
      return errorComponent;
    }
  }
  ...
}

[anzhelikakovalchuk]

Thank you! that works.

[sc-illiakovalenko]

@anzhelikakovalchuk If you have any issues feel free to reopen this issue or create another one

[anzhelikakovalchuk]

@sc-antonkulagin @aweber1 great, thank you s o much! I am just looking for the solution to that, if one component has an error then the whole placeholder falls with all other components that were quite good. I wonder if you can advise me something so that other components would render, and only the broken one would not be rendered.

[aweber1]

It is recommended that you handle component-level errors within individual components, just like you would for any other Vue app. This page has a good example of how to create an <error-boundary /> component that you can use to wrap your individual components as needed, or just use the errorCaptured handler: https://learn-vuejs.github.io/vue-patterns/patterns/#handling-errors

The placeholder error handler/component acts as an error boundary for the placeholder component to signal that there was an error either rendering the placeholder or within the placeholder code itself.