Error handling in HTTP calls in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the HTTP call fails in this Vue component?

Consider this Vue 3 component using fetch inside onMounted. What will the user see if the HTTP request returns a 404 error?

Vue

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const data = ref(null);
    const error = ref(null);

    onMounted(async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        data.value = await response.json();
      } catch (err) {
        error.value = err.message;
      }
    });

    return { data, error };
  },
  template: `<div>
    <p v-if="error">Error: {{ error }}</p>
    <p v-else-if="data">Data loaded</p>
    <p v-else>Loading...</p>
  </div>`
};

A The component crashes with an uncaught exception.

B The component shows 'Error: Network response was not ok'.

C The component shows 'Loading...' indefinitely.

D The component shows 'Data loaded' even though the request failed.

💡 Hint

Think about what happens when response.ok is false and how the error is handled.

The code checks response.ok and throws an error if false. The catch block sets error.value, so the template shows the error message.

📝 Syntax

intermediate

Which option correctly handles HTTP errors in this Vue 3 fetch example?

Identify the option that properly throws an error when the HTTP response is not successful.

Vue

async function fetchData() {
  const response = await fetch('https://api.example.com/items');
  // Error handling here
  const data = await response.json();
  return data;
}

A if (!response.ok) throw new Error('Failed to fetch');

B if (response.status >= 400) console.log('Error');

C if (response.ok) throw new Error('Error occurred');

D if (response.status !== 200) return null;

💡 Hint

Check which condition correctly detects an error and throws an exception.

Option A throws an error when response.ok is false, which is the standard way to handle HTTP errors.

🔧 Debug

advanced

Why does this Vue 3 component not show the error message on HTTP failure?

Look at the code below. The HTTP call fails but the error message never appears. What is the cause?

Vue

import { ref, onMounted } from 'vue';

export default {
  setup() {
    const error = ref(null);

    onMounted(async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          return;
        }
        const data = await response.json();
      } catch (e) {
        error.value = e.message;
      }
    });

    return { error };
  },
  template: `<div>
    <p v-if="error">Error: {{ error }}</p>
    <p v-else>Loading...</p>
  </div>`
};

A The error is set but the HTTP failure does not trigger the catch block, so the message is never set.

B The error is set but the template does not display it because 'error' is not returned from setup.

C The error is set but the component does not re-render because 'error' is not reactive.

D The error is set but the component returns before setting the error, so it never updates.

💡 Hint

Consider when the catch block runs and how errors from HTTP status codes are handled.

fetch() does not throw for HTTP error status codes (4xx/5xx); the promise resolves but response.ok is false. The if block returns early without setting error.value or throwing, so catch is skipped, error remains null, and 'Loading...' is shown indefinitely.

❓ state_output

advanced

What is the value of 'error' after this fetch call in Vue 3?

Given this code snippet, what will be the value of error.value after the fetch call if the server returns a 500 status?

Vue

import { ref } from 'vue';

const error = ref(null);

async function loadData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`Error: ${response.status}`);
    }
    const data = await response.json();
  } catch (e) {
    error.value = e.message;
  }
}

await loadData();

A null

B "Network response was not ok"

C "Error: 500"

D "Error: Internal Server Error"

💡 Hint

Look at the error message thrown when response.ok is false.

The code throws an error with message including the status code. For a 500 status, the message is 'Error: 500'.

🧠 Conceptual

expert

Which approach best ensures user-friendly error handling in Vue HTTP calls?

Choose the option that best describes a robust way to handle HTTP errors in Vue components to provide clear feedback to users.

A Use synchronous XMLHttpRequest calls to block UI until data loads, then show data or error.

B Ignore HTTP status codes and always display the fetched data, assuming the server returns valid JSON.

C Only catch network errors and ignore HTTP status errors, showing loading until data arrives.

D Throw errors on bad HTTP status, catch them, set a reactive error message, and display it in the template with fallback UI.

💡 Hint

Think about how to handle both network and HTTP errors gracefully in a reactive UI.

Option D describes the best practice: throwing errors on bad HTTP status, catching them, updating reactive state, and showing user-friendly messages.