feat: handle 429 errors and redirect to rate-limited page

packages/ui/src/routes/AuthRoutes.jsx

@@ -10,6 +10,7 @@ const VerifyEmailPage = Loadable(lazy(() => import('@/views/auth/verify-email'))
 const ForgotPasswordPage = Loadable(lazy(() => import('@/views/auth/forgotPassword')))
 const ResetPasswordPage = Loadable(lazy(() => import('@/views/auth/resetPassword')))
 const UnauthorizedPage = Loadable(lazy(() => import('@/views/auth/unauthorized')))
+const RateLimitedPage = Loadable(lazy(() => import('@/views/auth/rateLimited')))
 const OrganizationSetupPage = Loadable(lazy(() => import('@/views/organization/index')))
 const LicenseExpiredPage = Loadable(lazy(() => import('@/views/auth/expired')))
 
@@ -45,6 +46,10 @@ const AuthRoutes = {
             path: '/unauthorized',
             element: <UnauthorizedPage />
         },
+        {
+            path: '/rate-limited',
+            element: <RateLimitedPage />
+        },
         {
             path: '/organization-setup',
             element: <OrganizationSetupPage />

packages/ui/src/store/context/ErrorContext.jsx

@@ -14,7 +14,22 @@ export const ErrorProvider = ({ children }) => {
 
     const handleError = async (err) => {
         console.error(err)
-        if (err?.response?.status === 403) {
+        if (err?.response?.status === 429) {
+            const retryAfterHeader = err?.response?.headers?.['retry-after']
+            let retryAfter = 60 // Default in seconds
+            if (retryAfterHeader) {
+                const parsedSeconds = parseInt(retryAfterHeader, 10)
+                if (Number.isNaN(parsedSeconds)) {
+                    const retryDate = new Date(retryAfterHeader)
+                    if (!Number.isNaN(retryDate.getTime())) {
+                        retryAfter = Math.max(0, Math.ceil((retryDate.getTime() - Date.now()) / 1000))
+                    }
+                } else {
+                    retryAfter = parsedSeconds
+                }
+            }
+            navigate('/rate-limited', { state: { retryAfter } })
+        } else if (err?.response?.status === 403) {
             navigate('/unauthorized')
         } else if (err?.response?.status === 401) {
             if (ErrorMessage.INVALID_MISSING_TOKEN === err?.response?.data?.message) {

packages/ui/src/views/auth/rateLimited.jsx

@@ -0,0 +1,46 @@
+import { Box, Stack, Typography } from '@mui/material'
+import { useLocation } from 'react-router-dom'
+import unauthorizedSVG from '@/assets/images/unauthorized.svg'
+import MainCard from '@/ui-component/cards/MainCard'
+
+// ==============================|| RateLimitedPage ||============================== //
+
+const RateLimitedPage = () => {
+    const location = useLocation()
+
+    const retryAfter = location.state?.retryAfter || 60
+
+    return (
+        <MainCard>
+            <Box
+                sx={{
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: 'calc(100vh - 210px)'
+                }}
+            >
+                <Stack
+                    sx={{
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        maxWidth: '500px'
+                    }}
+                    flexDirection='column'
+                >
+                    <Box sx={{ p: 2, height: 'auto' }}>
+                        <img style={{ objectFit: 'cover', height: '20vh', width: 'auto' }} src={unauthorizedSVG} alt='rateLimitedSVG' />
+                    </Box>
+                    <Typography sx={{ mb: 2 }} variant='h4' component='div' fontWeight='bold'>
+                        429 Too Many Requests
+                    </Typography>
+                    <Typography variant='body1' component='div' sx={{ mb: 2, textAlign: 'center' }}>
+                        {`You have made too many requests in a short period of time. Please wait ${retryAfter}s before trying again.`}
+                    </Typography>
+                </Stack>
+            </Box>
+        </MainCard>
+    )
+}
+
+export default RateLimitedPage