Improving Error Handling: From alert() to Toast Notifications

Release: v0.1.117 · Category: Error Resilience (ERR-13)

Overview

In v0.1.117 we resolved a user-facing error handling inconsistency in the billing and settings pages. Two pages were surfacing runtime errors using the browser's native alert() function — a pattern that blocks the UI, disrupts the user's workflow, and discards contextual error information. These calls have been replaced with the Sonner toast API, which is already installed and configured in the root layout.

What Changed

Before

When a Stripe checkout request failed on the billing page, or when a GDPR data export failed on the settings page, users would see a native browser dialog:

[Browser alert popup]
"Something went wrong."
[ OK ]

This approach has several problems:

• Blocks the UI — The page is completely frozen until the user dismisses the dialog.
• Loses context — The raw error message is typically not shown; users see a generic string.
• Inconsistent UX — Every other error path in the application uses in-page state or Sonner toast notifications.

After

Errors are now surfaced as non-blocking toast notifications using the Sonner API:

import { toast } from 'sonner';

// On Stripe checkout failure (billing/page.tsx)
try {
  await initiateCheckout();
} catch (err) {
  toast.error('Failed to start checkout. Please try again.');
}

// On GDPR export failure (settings/page.tsx)
try {
  await requestDataExport();
} catch (err) {
  toast.error('Data export request failed. Please try again.');
}

Toast notifications:

• Do not block the UI — The user can continue interacting with the page immediately.
• Auto-dismiss — Disappear after a few seconds without any user action required.
• Consistent — Match the error presentation pattern used everywhere else in the dashboard, including the existing autoTopupError pattern on the same billing page.

Affected Pages

Page	File	Error scenario fixed
Billing	src/app/dashboard/billing/page.tsx	Stripe checkout request failure
Settings	src/app/dashboard/settings/page.tsx	GDPR data export request failure

Why This Matters

For compliance teams using the platform under time pressure — for example, during an active sanctions screening workflow — a blocking browser dialog is a significant interruption. Non-blocking toasts allow users to see the error, understand it, and decide how to respond without losing their place in the UI. This change brings the error resilience of the billing and settings pages in line with the rest of the application.