Concern

Toast notifications and ephemeral user feedback (success, error, info).

Technology

sonner

Documentation

• Website: https://sonner.emilkowal.ski/
• Repository: https://github.com/emilkowalski/sonner
• Getting started: https://sonner.emilkowal.ski/getting-started
• Toaster API: https://sonner.emilkowal.ski/toaster

Integration

form-handling / react-hook-form

Server errors (5xx) from mutations are shown via toaster in mutation onError (e.g. toast.error(message)). Client errors (4xx) stay in the form via setError; do not toast those.

server-state / TanStack Query

Use toast (e.g. toast.error, toast.success) in mutation onError and optionally onSuccess for user feedback. The shared Form component uses sonner for its default onError handler.

responses

When handleRequest throws ServerError (5xx), mutation onError receives it; show the message with toast.error(error.response?.message ?? 'Something went wrong').

Implementation

The desktop app includes sonner. The root component (e.g. App.tsx) renders <Toaster /> once (e.g. with richColors and position="top-center"). The shared Form component (in frontends/desktop or frontends-shared) uses toast from sonner for its default onError callback: when the mutation throws (e.g. ServerError), it calls toast.error(message ?? 'Something went wrong'). Any component can call toast(), toast.success(), toast.error(), etc. from sonner for ad-hoc notifications.

Version

v2