Master Error Handling in a Vue.js App

Error handling might not be the most exciting part of front-end development, but it's undoubtedly one of the most critical. In our Vue.js course "Handling Errors in Vue Like a Pro," we take a deep dive into error handling strategies that will elevate your Vue applications from fragile to production-ready.

What You'll Learn in This Comprehensive Vue Error Handling Course

This comprehensive course walks you through multiple levels of error handling in Vue applications, from component-level strategies, composable error handling, to application-wide solutions. Here's what we cover:

(Prefer learning via video? Skip the read, and jump straight into the course!)

1. Catching Errors at the Vue Component Level

Component-level error handling is your first line of defense. This can be done with a traditional try/catch along with reactive error data.

<script setup>
const error = ref();

function doRiskyThing(){
    try{
      // risky thing
    }catch(err){
      error.value = err
    }
}
</script>
<template>
  <div v-if="error">{{ error.message }}</div>
</template>

If there is potential for any descendant components to throw errors, you can catch errors from them with the onErrorCaptured lifecycle hook.

<script setup>
const error = ref()
onErrorCaptured((err)=>{
    error.value = err
})
</script>
<template>
  <div v-if="error">{{ error.message }}</div>
    <div v-else>
        <RiskyComponent />
        <OrComponentWithRiskyDescendants />
    </div>
</template>

Also in the course, we go in depth exploring all the cases that onErrorCaptured can catch including errors triggered by user events, Vue lifecycle hooks, and more.

2. A Vue Error Boundary Component

While onErrorCaptured is useful, another pattern called an ErrorBoundary can be a little easier to use (plus it uses onErrorCaptured under the hood to get things done). In the course, you’ll make the short leap from understanding onErrorCaptured, to building a custom ErrorBoundary component, to picking off-the-shelf error boundary solutions.

<!-- error boundary allows you to... -->
  <ErrorBoundary>
    <!-- display component that might throw an error -->
    <RiskyComponent />

    <!-- and use the error slot to 
     conditionally display an error message 
     (if error is thrown)
     -->
    <template #error="{ error, clearError }">
      <p>Error Template: {{ error }}</p>

      <!-- Plus provide a way to clear the error -->
      <button class="btn btn-primary" @click="clearError">Clear Error</button>
    </template>
  </ErrorBoundary>

3. An Error Handling Pattern for Vue Composables

Like components, composables are central to Vue application architecture, but the recommended technique for handling errors within composables differs form within components. In the course, learn how return reactive error data from composables so that the consuming components, already responsible for the “view” layer, can responsibly show error messages.

export const usePost = async (id: string) => {
  const post = ref<any>(null);

  // Reactive error is null by default
  const error = ref<null | unknown>(null);

  async function getPost() {
    try {
      // risky request
      post.value = await res.json();
    } catch (err) {
        // in the catch block of a risky operation 
        // set the reactive error to the thrown error
      error.value = err;
    }
  }

  await getPost();

    // return the reactive error from the composable
  return { post, error };
};

4. Catching Errors at the Vue App Level

If not prevented from doing so with a surrounding try/catch or an onErrorCaptured that returns false, every error thrown within your Vue app bubbles to the top. The errors that make it there are handled by a global error handler configured with app.config.errorHandler.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// Global error handler
app.config.errorHandler = (err, instance, info) => {
    // error - the thrown error object
    // instance - the component instance that threw the error
    // info - error code - https://vuejs.org/error-reference/

  // report to error handling service 
  // or other cool things like we do in the course
}

This app level error handler is a great place to report errors to an error reporting service like Sentry. But it can also be useful for other strategies like supporting a custom AlertableError as we do within the course.

5. Display Error Messages Inline or In (Pretty) Alerts

Sometimes error messages are best displayed inline with the content that has errored out.

Other times, it’s easier and just as effective to display errors in a general notifications panel (like you often see in the bottom right hand corner of many modern apps).

In the course, we’ll break down strategies to handle both use cases.

Checkout the Vue Error Handling Course!

Error handling is often overlooked in front-end development courses, but it's what separates amateur applications from professional ones. By implementing the strategies taught in this course, you'll:

• Prevent cascading failures that can bring down entire applications
• Provide graceful degradation when errors do occur
• Improve user experience by communicating errors effectively
• Create more maintainable code with clear error boundaries
• Speed up debugging with better error information

Ready to handle errors like a pro? Go watch the course “Handling Errors in Vue.js Like a Pro” now!