retry on 503 when paused + rotate loading messages

Author: allansson

src/components/Profile/GrafanaCloudSignIn/FetchingToken.tsx

@@ -1,14 +1,33 @@
+import { ReactNode, useEffect, useState } from 'react'
 import { LoadingMessage } from '../LoadingMessage'
 import { FetchingTokenState } from '@/types/auth'
 
+function useCarousel(message: ReactNode[], interval = 10_000) {
+  const [index, setIndex] = useState(0)
+
+  useEffect(() => {
+    const timeout = setInterval(() => {
+      setIndex((index) => (index + 1) % message.length)
+    }, interval)
+
+    return () => {
+      clearInterval(timeout)
+    }
+  }, [message.length, interval])
+
+  return message[index] ?? ''
+}
+
 interface FetchingTokenProps {
   state: FetchingTokenState
 }
 
 export function FetchingToken({ state }: FetchingTokenProps) {
-  return (
-    <LoadingMessage>
-      Setting up profile for {state.stack.name}...
-    </LoadingMessage>
-  )
+  const message = useCarousel([
+    `Setting up profile for ${state.stack.name}...`,
+    `Waiting for the stack to become available...`,
+    'This is taking a while, hang tight...',
+  ])
+
+  return <LoadingMessage>{message}</LoadingMessage>
 }

src/handlers/auth/states.ts

@@ -215,7 +215,7 @@ export class SignInStateMachine extends EventEmitter<StateEventMap> {
     })
 
     const apiTokenResponse = await fetchPersonalToken(
-      stack.id,
+      stack,
       grant.token,
       this.#signal
     )

src/services/k6/index.ts

@@ -1,3 +1,5 @@
+import { Stack } from '@/types/auth'
+import { timeout } from '@/utils/async'
 import { z } from 'zod'
 
 const PersonalTokenResponseSchema = z.object({
@@ -15,36 +17,52 @@ interface NotAMember {
 
 export type FetchPersonalTokenRespone = TokenExchanged | NotAMember
 
+const MAX_RETRIES = 5
+
 export async function fetchPersonalToken(
-  stackId: string,
+  stack: Stack,
   token: string,
   signal: AbortSignal
 ): Promise<FetchPersonalTokenRespone> {
-  const response = await fetch(`${K6_API_URL}/api_token`, {
-    headers: {
-      'X-Stack-Id': stackId,
-      Authorization: `Bearer ${token}`,
-    },
-    signal,
-  })
-
-  if (response.status === 403) {
-    return {
-      type: 'not-a-member',
+  for (let i = 0; i < MAX_RETRIES; ++i) {
+    const response = await fetch(`${K6_API_URL}/api_token`, {
+      headers: {
+        'X-Stack-Id': stack.id,
+        Authorization: `Bearer ${token}`,
+      },
+      signal,
+    })
+
+    // It might take a while for the stack to wake up after being paused
+    // and the permissions check might timeout, so we retry a few times.
+    if (response.status === 503 && stack.status === 'paused') {
+      await timeout(1000)
+
+      continue
     }
-  }
 
-  if (response.status !== 200) {
-    throw new Error(
-      `Failed to fetch personal token. The server responsed with ${response.status}.`
-    )
-  }
+    if (response.status === 403) {
+      return {
+        type: 'not-a-member',
+      }
+    }
+
+    if (response.status !== 200) {
+      throw new Error(
+        `Failed to fetch personal token. The server responsed with ${response.status}.`
+      )
+    }
 
-  const data: unknown = await response.json()
-  const parsed = PersonalTokenResponseSchema.parse(data)
+    const data: unknown = await response.json()
+    const parsed = PersonalTokenResponseSchema.parse(data)
 
-  return {
-    type: 'token-exchanged',
-    token: parsed.personal_token,
+    return {
+      type: 'token-exchanged',
+      token: parsed.personal_token,
+    }
   }
+
+  throw new Error(
+    `Failed to fetch personal token after ${MAX_RETRIES} retries.`
+  )
 }

src/utils/async.ts

@@ -0,0 +1,5 @@
+export function timeout(milliseconds: number) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, milliseconds)
+  })
+}