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.

Practice

1. What is the main purpose of using try...catch blocks in Vue HTTP calls?

easy

A. To handle errors when the HTTP request fails or returns an error

B. To speed up the HTTP request

C. To style the HTTP response data

D. To automatically retry the HTTP request

Solution

1. Step 1: Understand the role of try...catch

   The try...catch block is used to catch errors that happen during code execution, such as network failures or exceptions.

2. Step 2: Apply to HTTP calls in Vue

   When making HTTP calls, errors like failed requests or server errors can occur. Using try...catch helps catch these errors and handle them gracefully.

3. Final Answer:

   To handle errors when the HTTP request fails or returns an error -> Option A

4. Quick Check:

   Error handling = To handle errors when the HTTP request fails or returns an error [OK]

Hint: Use try...catch to catch HTTP errors in Vue calls [OK]

Common Mistakes:

• Thinking try...catch speeds up requests
• Using try...catch to style data
• Assuming try...catch retries requests automatically

2. Which of the following is the correct syntax to check if an HTTP response was successful in Vue?

easy

A. if (response.status === 200) { ... }

B. if (response.success) { ... }

C. if (response.error) { ... }

D. if (response.ok) { ... }

Solution

1. Step 1: Identify the standard property for success

   The response.ok property is a boolean that is true if the HTTP status code is in the 200-299 range, indicating success.

2. Step 2: Compare options

   if (response.status === 200) { ... } checks for exactly 200, which is valid but less flexible. if (response.ok) { ... } uses response.ok, which is the recommended and clearer way. Options C and D are not valid properties.

3. Final Answer:

   if (response.ok) { ... } -> Option D

4. Quick Check:

   Check response.ok for success = if (response.ok) { ... } [OK]

Hint: Use response.ok to check HTTP success easily [OK]

Common Mistakes:

• Checking response.error which does not exist
• Checking response.success which is invalid
• Only checking for status 200, missing other success codes

3. Consider this Vue code snippet:
<pre>async function fetchData() { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); return data; } catch (error) { return 'Fetch failed'; } } What will fetchData() return if the server responds with status 404?

medium

A. The JSON data from the response

B. 'Fetch failed'

C. undefined

D. An unhandled error

Solution

1. Step 1: Analyze response status handling

   The code checks response.ok. For status 404, response.ok is false, so it throws an error.

2. Step 2: Understand catch block behavior

   The thrown error is caught by the catch block, which returns the string 'Fetch failed'.

3. Final Answer:

   'Fetch failed' -> Option B

4. Quick Check:

   404 triggers catch, returns 'Fetch failed' = 'Fetch failed' [OK]

Hint: Non-ok response triggers catch block return [OK]

Common Mistakes:

• Assuming JSON data is returned on 404
• Expecting undefined instead of catch return
• Thinking error is unhandled and crashes

4. Identify the error in this Vue HTTP call code:

async function getUser() {
  try {
    const response = await fetch('/user');
    if (response.ok) {
      const user = response.json();
      return user;
    }
  } catch (e) {
    console.error(e);
  }
}

medium

A. Missing await before response.json() causing a Promise to be returned

B. Incorrect use of try...catch block

C. Using response.ok instead of response.status

D. No error, code is correct

Solution

1. Step 1: Check response.json() usage

   The response.json() method returns a Promise, so it must be awaited to get the actual data.

2. Step 2: Identify missing await

   The code returns response.json() without await, so it returns a Promise instead of user data.

3. Final Answer:

   Missing await before response.json() causing a Promise to be returned -> Option A

4. Quick Check:

   Always await response.json() to get data [OK]

Hint: Always await response.json() to get actual data [OK]

Common Mistakes:

• Forgetting to await response.json()
• Thinking response.ok is incorrect usage
• Assuming try...catch is wrongly used

5. You want to show a user-friendly error message in your Vue app when an HTTP call fails. Which approach best combines error handling and accessibility?

hard

A. Log errors to console only without user notification

B. Ignore errors and reload the page automatically

C. Use try...catch to catch errors, set an error message in state, and display it with aria-live="polite" for screen readers

D. Show a popup alert without any ARIA attributes

Solution

1. Step 1: Combine error handling with user feedback

   Using try...catch allows catching errors. Setting an error message in Vue state lets the UI update to inform the user.

2. Step 2: Ensure accessibility with ARIA

   Using aria-live="polite" on the error message container ensures screen readers announce the message politely, improving accessibility.

3. Final Answer:

   Use try...catch to catch errors, set an error message in state, and display it with aria-live="polite" for screen readers -> Option C

4. Quick Check:

   Error handling + aria-live = Use try...catch to catch errors, set an error message in state, and display it with aria-live="polite" for screen readers [OK]

Hint: Use aria-live with error messages for accessibility [OK]

Common Mistakes:

• Ignoring errors or not showing messages
• Using alerts without ARIA support
• Logging errors only without user feedback