Report Builder Docs

Appearance

Handle API Errors in Frontend ​

After this page, you can handle metadata API errors cleanly in your UI.

Problem ​

Users see confusing failures when a source is missing or access is denied.

Prerequisites ​

  • Frontend HTTP client
  • Metadata API integration

Steps ​

Handle status codes by intent:

  • 403: user is not allowed to access this source
  • 404: source key is missing or stale
ts
async function loadSource(sourceKey: string) {
  const response = await fetch(`/report-builder/sources/${sourceKey}`);

  if (response.status === 403) {
    throw new Error('You do not have permission to access this source.');
  }

  if (response.status === 404) {
    throw new Error('This source does not exist anymore. Please refresh.');
  }

  if (!response.ok) {
    throw new Error('Unable to load source metadata right now.');
  }

  return response.json();
}

Verify ​

  • Use one unauthorized user account and confirm 403 UI state.
  • Request a fake source key and confirm 404 UI state.

Common mistakes ​

  • Showing generic “Something went wrong” for all cases.
  • Treating 404 and 403 the same way.
  • Depending on server message strings instead of status codes.