vue-boundary v1.1.0

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

 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

Events

Slots

🔖 License

MIT