Error handling in HTTP calls in Vue

Introduction

When your app talks to the internet, things can go wrong. Error handling helps your app stay friendly and clear when problems happen.

When fetching data from a server and the server is down or slow.

When submitting a form and the internet connection is lost.

When an API returns a message saying something went wrong.

When you want to show a message to users if data can't load.

When retrying a request after a temporary failure.

Syntax

Vue

<script setup>
import { ref } from 'vue'

const error = ref(null)

async function fetchData() {
  error.value = null
  try {
    const response = await fetch('https://api.example.com/data')
    if (!response.ok) {
      throw new Error(`Error: ${response.status}`)
    }
    const data = await response.json()
    // use data here
  } catch (err) {
    error.value = err.message
  }
}
</script>

Use try...catch to catch errors from HTTP calls.

Check response.ok to handle HTTP errors like 404 or 500.

Examples

This example fetches user data and shows a custom error if the user is not found.

Vue

<script setup>
import { ref } from 'vue'

const error = ref(null)

async function loadUser() {
  error.value = null
  try {
    const res = await fetch('https://api.example.com/user')
    if (!res.ok) throw new Error('User not found')
    const user = await res.json()
  } catch (e) {
    error.value = e.message
  }
}
</script>

This example fetches posts and shows the HTTP status code in the error message if it fails.

Vue

<script setup>
import { ref } from 'vue'

const error = ref(null)

async function getPosts() {
  error.value = null
  try {
    const response = await fetch('https://api.example.com/posts')
    if (!response.ok) {
      throw new Error(`Failed to load posts: ${response.status}`)
    }
    const posts = await response.json()
  } catch (error) {
    error.value = error.message
  }
}
</script>

Sample Program

This Vue component has a button to load data from a public API. If the fetch fails, it shows a clear error message in red. If it succeeds, it shows the data nicely formatted. The error message uses ARIA roles for accessibility.

Vue

<template>
  <main>
    <button @click="fetchData">Load Data</button>
    <p v-if="error" role="alert" aria-live="assertive" style="color: red;">Error: {{ error }}</p>
    <pre v-if="data">{{ JSON.stringify(data, null, 2) }}</pre>
  </main>
</template>

<script setup>
import { ref } from 'vue'

const data = ref(null)
const error = ref(null)

async function fetchData() {
  error.value = null
  data.value = null
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    data.value = await response.json()
  } catch (err) {
    error.value = err.message
  }
}
</script>

Important Notes

Always reset error state before new requests to avoid stale messages.

Use aria-live and role="alert" to announce errors to screen readers.

Network errors and HTTP errors are different; catch both with try...catch and response.ok.

Summary

Error handling keeps your app friendly when internet calls fail.

Use try...catch and check response.ok to catch problems.

Show clear messages and use accessibility features for all users.