vue-boundary

Catch javascript errors in a vue 2 component and render fallback components of easy way.

Introduction

This plugin available an component to catches javascript errors in a vue 2 component and handles it by rendering a fallback component, isolating the error and handling it specifically, ensuring that the rest of the application is not affected by an isolated error in some UI component.

Error Boundaries is a concept introduces by React 16: Read more about

---

## 🚚 Install

 yarn add vue-boundary  // npm install --save vue-boundary

Global

import Vue from 'vue';
import VueBoundary from "vue-boundary";

Vue.use(VueBoundary);

Local

import VueBoundary from "vue-boundary";

export default {
  components: {
    VueBoundary
  },
};

📌 Usage

Fallback component

With slot #fallback

<template>
  <VueBoundary @error-captured="onError" >
      <SomeComponent />

      <template #fallback>
        <div>Oops, something went wrong!</div>
      </template>
  </VueBoundary>
</template>

<script>
export default {
    methods:{
        onError({ error, info, vm }){
            console.error(error.fileName, error.message, error.stack)
            console.error('Error info =>', info)
            console.error('Component instance =>', vm)
        }
    }
}
</script>

with prop fallback

<template>
  <VueBoundary :fallback="ErrorMessage">
      <SomeComponent />
  </VueBoundary>
</template>

<script>
import ErrorCard from './ErrorCard.vue'

export default {
    data: () => ({
        ErrorMessage: ErrorCard
    }),
}
</script>

Error catch

Whit prop onError

<template>
  <VueBoundary :onError="myCallbackHere" >
      ...
  </VueBoundary>
</template>

<script>

export default {
    ...
    methods:{
        myCallbackHere({ error, info, vm }){
            console.error(error, info, vm)
        }
    }
}
</script>

Or errorCaptured event

<template>
  <VueBoundary :fallback="componentFallback" :@errorCaptured="onErrorCaptured" >
      ...
  </VueBoundary>
</template>

<script>

export default {
    ...
    methods:{
        onErrorCaptured({ error, info, vm }){
            console.error(error, info, vm)
        }
    }
}
</script>

Props

Name	type	Default	description
onError	Function	undefined	Callback to listen when an error it's captured, receive an object with 3 property: error, info and vm
fallback	Object	null	Component to render if the default slot catch an error.
propagation	Boolean	false	Prevents further propagation of the current error for another "errorCaptured" parents hooks. https://vuejs.org/v2/api/#errorCaptured

Events

Name	Description
error-captured	Receive an object with 3 property: error, info and vm

Slots

Name	Description
default	The default slot
fallback	Slot to render if the default slot catch an error.

🔖 License

MIT