Error handling in HTTP calls in Vue - Performance & Optimization

Performance: Error handling in HTTP calls

MEDIUM IMPACT

This affects the responsiveness and smoothness of the user interface during and after HTTP requests.

Handling errors during HTTP calls in a Vue component

Vue

import { ref } from 'vue';

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

async function fetchData() {
  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();
    error.value = null;
  } catch (err) {
    error.value = err.message;
  }
}

Using reactive error state allows non-blocking UI updates and smooth user experience.

📈 Performance GainNo UI blocking, fewer re-renders, better INP score.

Handling errors during HTTP calls in a Vue component

Vue

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    this.data = data;
  })
  .catch(error => {
    alert('Error occurred: ' + error.message);
  });

Using alert blocks the UI thread and interrupts user interaction, causing poor responsiveness.

📉 Performance CostBlocks rendering and user input until alert is dismissed, increasing INP.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Blocking alert() in catch	Minimal DOM changes	Triggers reflow after alert dismissed	Blocks paint during alert	[X] Bad
Reactive error state update	Updates reactive DOM nodes	Single reflow for error message	Smooth paint without blocking	[OK] Good

Rendering Pipeline

Error handling in HTTP calls affects the interaction responsiveness stage by controlling UI updates and preventing blocking dialogs.

→JavaScript Execution

→Layout

→Paint

→Composite

⚠️ BottleneckJavaScript Execution when blocking dialogs like alert() are used

Core Web Vital Affected

INP

This affects the responsiveness and smoothness of the user interface during and after HTTP requests.

Optimization Tips

1Avoid blocking UI methods like alert() for error handling.

2Use reactive state to display errors asynchronously.

3Keep error UI updates minimal to reduce reflows and paints.

Performance Quiz - 3 Questions

Which error handling method improves interaction responsiveness during HTTP calls in Vue?

A Reloading the page on error

B Using reactive state to show error messages

C Using alert() to notify errors

D Ignoring errors silently

DevTools: Performance

How to check: Record a session while triggering an HTTP error and observe the Main thread activity and responsiveness.

What to look for: Look for long tasks caused by alert() blocking and check responsiveness metrics like INP.