fix: improve error handling across various components; utilize getAuthErrorMessage for consistent user-facing error messages

This commit is contained in:
Usman Baig
2026-02-03 19:31:26 +01:00
parent af5d9631e5
commit eaf02c853f
12 changed files with 199 additions and 92 deletions

View File

@@ -29,6 +29,9 @@ interface UserPayload {
role?: string
}
/** Error type returned to client for mapping to user-facing copy (no sensitive details). */
export type AuthExchangeErrorType = 'network' | 'expired' | 'invalid' | 'server'
export async function exchangeAuthCode(code: string, codeVerifier: string, redirectUri: string) {
try {
const res = await fetch(`${AUTH_API_URL}/oauth/token`, {
@@ -46,8 +49,10 @@ export async function exchangeAuthCode(code: string, codeVerifier: string, redir
})
if (!res.ok) {
const data = await res.json()
throw new Error(data.error || 'Failed to exchange token')
const status = res.status
const errorType: AuthExchangeErrorType =
status === 401 ? 'expired' : status === 403 ? 'invalid' : 'server'
return { success: false as const, error: errorType }
}
const data: AuthResponse = await res.json()
@@ -96,9 +101,12 @@ export async function exchangeAuthCode(code: string, codeVerifier: string, redir
}
}
} catch (error: any) {
} catch (error: unknown) {
console.error('Auth Exchange Error:', error)
return { success: false, error: error.message }
const isNetwork =
error instanceof TypeError ||
(error instanceof Error && (error.name === 'AbortError' || /fetch|network|ECONNREFUSED|ETIMEDOUT/i.test(error.message)))
return { success: false as const, error: isNetwork ? 'network' : 'server' }
}
}
@@ -152,7 +160,7 @@ export async function setSessionAction(accessToken: string, refreshToken?: strin
}
} catch (e) {
console.error('[setSessionAction] Error:', e)
return { success: false, error: 'Invalid token' }
return { success: false as const, error: 'invalid' }
}
}

View File

@@ -1,10 +1,11 @@
'use client'
import { useEffect, useState, Suspense, useRef } from 'react'
import { useEffect, useState, Suspense, useRef, useCallback } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { useAuth } from '@/lib/auth/context'
import { AUTH_URL } from '@/lib/api/client'
import { exchangeAuthCode, setSessionAction } from '@/app/actions/auth'
import { authMessageFromErrorType, type AuthErrorType } from '@/lib/utils/authErrors'
import { LoadingOverlay } from '@ciphera-net/ui'
function AuthCallbackContent() {
@@ -12,39 +13,58 @@ function AuthCallbackContent() {
const searchParams = useSearchParams()
const { login } = useAuth()
const [error, setError] = useState<string | null>(null)
const [isRetrying, setIsRetrying] = useState(false)
const processedRef = useRef(false)
const runCodeExchange = useCallback(async () => {
const code = searchParams.get('code')
const codeVerifier = localStorage.getItem('oauth_code_verifier')
const redirectUri = typeof window !== 'undefined' ? window.location.origin + '/auth/callback' : ''
if (!code || !codeVerifier) return
const result = await exchangeAuthCode(code, codeVerifier, redirectUri)
if (result.success && result.user) {
login(result.user)
localStorage.removeItem('oauth_state')
localStorage.removeItem('oauth_code_verifier')
if (localStorage.getItem('pulse_pending_checkout')) {
router.push('/pricing')
} else {
router.push('/')
}
} else {
setError(authMessageFromErrorType(result.error as AuthErrorType))
}
}, [searchParams, login, router])
useEffect(() => {
// * Prevent double execution (React Strict Mode or fast re-renders)
if (processedRef.current) return
if (processedRef.current && !isRetrying) return
// * Check for direct token passing (from auth-frontend direct login)
// * This flow exposes tokens in URL, kept for legacy support.
// * Recommended: Use Authorization Code flow (below)
const token = searchParams.get('token')
const refreshToken = searchParams.get('refresh_token')
if (token && refreshToken) {
processedRef.current = true
const handleDirectTokens = async () => {
const result = await setSessionAction(token, refreshToken)
if (result.success && result.user) {
login(result.user)
const returnTo = searchParams.get('returnTo') || '/'
router.push(returnTo)
} else {
setError('Invalid token received')
}
processedRef.current = true
const handleDirectTokens = async () => {
const result = await setSessionAction(token, refreshToken)
if (result.success && result.user) {
login(result.user)
const returnTo = searchParams.get('returnTo') || '/'
router.push(returnTo)
} else {
setError(authMessageFromErrorType('invalid'))
}
handleDirectTokens()
return
}
handleDirectTokens()
return
}
const code = searchParams.get('code')
const state = searchParams.get('state')
// * Skip if params are missing (might be initial render before params are ready)
if (!code || !state) return
const storedState = localStorage.getItem('oauth_state')
@@ -61,47 +81,33 @@ function AuthCallbackContent() {
}
processedRef.current = true
if (isRetrying) setIsRetrying(false)
runCodeExchange()
}, [searchParams, login, router, isRetrying, runCodeExchange])
const exchangeCode = async () => {
try {
const redirectUri = window.location.origin + '/auth/callback'
const result = await exchangeAuthCode(code, codeVerifier, redirectUri)
if (!result.success || !result.user) {
throw new Error(result.error || 'Failed to exchange token')
}
login(result.user)
// * Cleanup
localStorage.removeItem('oauth_state')
localStorage.removeItem('oauth_code_verifier')
// * Check for pending checkout
if (localStorage.getItem('pulse_pending_checkout')) {
router.push('/pricing')
} else {
router.push('/')
}
} catch (err: any) {
setError(err.message)
}
}
exchangeCode()
}, [searchParams, login, router])
const handleRetry = () => {
setError(null)
setIsRetrying(true)
}
if (error) {
const isNetworkError = error.includes('Network error')
return (
<div className="flex min-h-screen items-center justify-center p-4">
<div className="rounded-md bg-red-50 dark:bg-red-900/20 p-4 text-red-500">
Error: {error}
<div className="mt-4">
<button
onClick={() => window.location.href = `${AUTH_URL}/login`}
className="text-sm underline"
{error}
<div className="mt-4 flex flex-col gap-2">
{isNetworkError && (
<button type="button" onClick={handleRetry} className="text-sm underline text-left">
Try again
</button>
)}
<button
type="button"
onClick={() => { window.location.href = `${AUTH_URL}/login` }}
className="text-sm underline text-left"
>
Back to Login
Back to Login
</button>
</div>
</div>

View File

@@ -4,6 +4,7 @@ import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { createOrganization } from '@/lib/api/organization'
import { useAuth } from '@/lib/auth/context'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { LoadingOverlay } from '@ciphera-net/ui'
import { Button, Input } from '@ciphera-net/ui'
@@ -24,8 +25,8 @@ export default function OnboardingPage() {
await createOrganization(name, slug)
// * Redirect to home, AuthContext will detect the new org and auto-switch
router.push('/')
} catch (err: any) {
setError(err.message || 'Failed to create organization')
} catch (err: unknown) {
setError(getAuthErrorMessage(err) || (err as Error)?.message || 'Failed to create organization')
} finally {
setLoading(false)
}

View File

@@ -11,6 +11,7 @@ import SiteList from '@/components/sites/SiteList'
import { Button } from '@ciphera-net/ui'
import { BarChartIcon, LockIcon, ZapIcon, CheckCircleIcon, XIcon } from '@ciphera-net/ui'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
function DashboardPreview() {
return (
@@ -114,7 +115,7 @@ export default function HomePage() {
const data = await listSites()
setSites(Array.isArray(data) ? data : [])
} catch (error: any) {
toast.error('Failed to load sites: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to load sites: ' + ((error as Error)?.message || 'Unknown error'))
setSites([])
} finally {
setSitesLoading(false)
@@ -143,7 +144,7 @@ export default function HomePage() {
toast.success('Site deleted successfully')
loadSites()
} catch (error: any) {
toast.error('Failed to delete site: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to delete site: ' + ((error as Error)?.message || 'Unknown error'))
}
}

View File

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
import { useParams, useSearchParams, useRouter } from 'next/navigation'
import { getPublicDashboard, getPublicStats, getPublicDailyStats, getPublicRealtime, getPublicPerformanceByPage, type DashboardData, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { LoadingOverlay } from '@ciphera-net/ui'
import Chart from '@/components/dashboard/Chart'
import TopPages from '@/components/dashboard/ContentStats'
@@ -171,7 +172,7 @@ export default function PublicDashboardPage() {
} else if (error.status === 404 || error.response?.status === 404) {
toast.error('Site not found')
} else if (!silent) {
toast.error('Failed to load dashboard: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to load dashboard: ' + ((error as Error)?.message || 'Unknown error'))
}
} finally {
if (!silent) setLoading(false)

View File

@@ -7,6 +7,7 @@ import { getSite, type Site } from '@/lib/api/sites'
import { getStats, getRealtime, getDailyStats, getTopPages, getTopReferrers, getCountries, getCities, getRegions, getBrowsers, getOS, getDevices, getScreenResolutions, getEntryPages, getExitPages, getDashboard, getPerformanceByPage, type Stats, type DailyStat, type PerformanceByPageStat } from '@/lib/api/stats'
import { formatNumber, formatDuration, getDateRange } from '@/lib/utils/format'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { LoadingOverlay } from '@ciphera-net/ui'
import { Select, DatePicker, DownloadIcon } from '@ciphera-net/ui'
import ExportModal from '@/components/dashboard/ExportModal'
@@ -191,8 +192,8 @@ export default function SiteDashboardPage() {
setScreenResolutions(Array.isArray(data.screen_resolutions) ? data.screen_resolutions : [])
setPerformance(data.performance || { lcp: 0, cls: 0, inp: 0 })
setPerformanceByPage(data.performance_by_page ?? null)
} catch (error: any) {
toast.error('Failed to load data: ' + (error.message || 'Unknown error'))
} catch (error: unknown) {
toast.error(getAuthErrorMessage(error) || 'Failed to load data: ' + ((error as Error)?.message || 'Unknown error'))
} finally {
setLoading(false)
}

View File

@@ -5,6 +5,7 @@ import { useParams, useRouter } from 'next/navigation'
import { getSite, type Site } from '@/lib/api/sites'
import { getRealtimeVisitors, getSessionDetails, type Visitor, type SessionEvent } from '@/lib/api/realtime'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { LoadingOverlay } from '@ciphera-net/ui'
function formatTimeAgo(dateString: string) {
@@ -44,8 +45,8 @@ export default function RealtimePage() {
if (visitorsData && visitorsData.length > 0) {
handleSelectVisitor(visitorsData[0])
}
} catch (error: any) {
toast.error('Failed to load data')
} catch (error: unknown) {
toast.error(getAuthErrorMessage(error) || 'Failed to load data')
} finally {
setLoading(false)
}
@@ -81,8 +82,8 @@ export default function RealtimePage() {
try {
const events = await getSessionDetails(siteId, visitor.session_id)
setSessionEvents(events || [])
} catch (error) {
toast.error('Failed to load session details')
} catch (error: unknown) {
toast.error(getAuthErrorMessage(error) || 'Failed to load session details')
} finally {
setLoadingEvents(false)
}

View File

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import { getSite, updateSite, resetSiteData, deleteSite, type Site, type GeoDataLevel } from '@/lib/api/sites'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { LoadingOverlay } from '@ciphera-net/ui'
import VerificationModal from '@/components/sites/VerificationModal'
import { PasswordInput } from '@ciphera-net/ui'
@@ -105,7 +106,7 @@ export default function SiteSettingsPage() {
setIsPasswordEnabled(false)
}
} catch (error: any) {
toast.error('Failed to load site: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to load site: ' + ((error as Error)?.message || 'Unknown error'))
} finally {
setLoading(false)
}
@@ -142,7 +143,7 @@ export default function SiteSettingsPage() {
toast.success('Site updated successfully')
loadSite()
} catch (error: any) {
toast.error('Failed to update site: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to update site: ' + ((error as Error)?.message || 'Unknown error'))
} finally {
setSaving(false)
}
@@ -157,7 +158,7 @@ export default function SiteSettingsPage() {
await resetSiteData(siteId)
toast.success('All site data has been reset')
} catch (error: any) {
toast.error('Failed to reset data: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to reset data: ' + ((error as Error)?.message || 'Unknown error'))
}
}
@@ -173,7 +174,7 @@ export default function SiteSettingsPage() {
toast.success('Site deleted successfully')
router.push('/')
} catch (error: any) {
toast.error('Failed to delete site: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to delete site: ' + ((error as Error)?.message || 'Unknown error'))
}
}

View File

@@ -5,6 +5,7 @@ import { useRouter } from 'next/navigation'
import { createSite, listSites } from '@/lib/api/sites'
import { getSubscription } from '@/lib/api/billing'
import { toast } from '@ciphera-net/ui'
import { getAuthErrorMessage } from '@/lib/utils/authErrors'
import { Button, Input } from '@ciphera-net/ui'
export default function NewSitePage() {
@@ -46,7 +47,7 @@ export default function NewSitePage() {
toast.success('Site created successfully')
router.push(`/sites/${site.id}`)
} catch (error: any) {
toast.error('Failed to create site: ' + (error.message || 'Unknown error'))
toast.error(getAuthErrorMessage(error) || 'Failed to create site: ' + ((error as Error)?.message || 'Unknown error'))
} finally {
setLoading(false)
}