feat: improved error handling

.vscode/launch.json

@@ -22,9 +22,9 @@
     {
       "type": "node",
       "request": "launch",
-      "name": "Debug pull-components",
-      "program": "${workspaceFolder}/dist/cli.mjs",
-      "args": ["push-components", "components.295017.json", "--space", "295018"],
+      "name": "Debug login",
+      "program": "${workspaceFolder}/dist/index.mjs",
+      "args": ["login", "--token", "295018"],
       "cwd": "${workspaceFolder}",
       "console": "integratedTerminal",
       "sourceMaps": true,

src/commands/login/actions.ts

@@ -1,5 +1,8 @@
+import chalk from 'chalk'
 import { regionsDomain } from '../../constants'
+import type { FetchError } from 'ofetch'
 import { ofetch } from 'ofetch'
+import { maskToken } from '../../utils'
 
 export const loginWithToken = async (token: string, region: string) => {
   try {
@@ -10,7 +13,12 @@ export const loginWithToken = async (token: string, region: string) => {
     })
   }
   catch (error) {
-    throw new Error('Error logging with token', error)
+    if ((error as FetchError).response?.status === 401) {
+      throw new Error(`The token provided ${chalk.bold(maskToken(token))} is invalid: ${chalk.bold(`401 ${(error as FetchError).data.error}`)}
+      
+  Please make sure you are using the correct token and try again.`)
+    }
+    throw new Error('Error logging with token', error as Error)
   }
 }
 
@@ -22,7 +30,7 @@ export const loginWithEmailAndPassword = async (email: string, password: string,
     })
   }
   catch (error) {
-    throw new Error('Error logging in with email and password', error)
+    throw new Error('Error logging in with email and password', error as Error)
   }
 }
 
@@ -34,6 +42,6 @@ export const loginWithOtp = async (email: string, password: string, otp: string,
     })
   }
   catch (error) {
-    throw new Error('Error logging in with email, password and otp', error)
+    throw new Error('Error logging in with email, password and otp', error as Error)
   }
 }

src/commands/login/index.ts

@@ -53,7 +53,7 @@ export const loginCommand = program
         konsola.ok(`Successfully logged in with token`)
       }
       catch (error) {
-        handleError(error as Error)
+        handleError(error as Error, true)
       }
     }
     else {
@@ -123,7 +123,7 @@ export const loginCommand = program
         }
       }
       catch (error) {
-        handleError(error as Error)
+        handleError(error as Error, true)
       }
     }
   })

src/constants.ts

@@ -1,40 +1,40 @@
-export const commands = {
+export const commands: Record<string, string> = {
   LOGIN: 'login',
 }
 
-export const regions = {
+export const regions: Record<string, string> = {
   EU: 'eu',
   US: 'us',
   CN: 'cn',
   CA: 'ca',
   AP: 'ap',
 }
 
-export const regionsDomain = {
+export const regionsDomain: Record<string, string> = {
   eu: 'api.storyblok.com',
   us: 'api-us.storyblok.com',
   cn: 'app.storyblokchina.cn',
   ca: 'api-ca.storyblok.com',
   ap: 'api-ap.storyblok.com',
 }
 
-export const managementApiRegions = {
+export const managementApiRegions: Record<string, string> = {
   eu: 'mapi.storyblok.com',
   us: 'mapi-us.storyblok.com',
   cn: 'mapi.storyblokchina.cn',
   ca: 'mapi-ca.storyblok.com',
   ap: 'mapi-ap.storyblok.com',
 }
 
-export const regionNames = {
+export const regionNames: Record<string, string> = {
   eu: 'Europe',
   us: 'United States',
   cn: 'China',
   ca: 'Canada',
   ap: 'Australia',
 }
 
-export const DEFAULT_AGENT = {
+export const DEFAULT_AGENT: Record<string, string> = {
   SB_Agent: 'SB-CLI',
   SB_Agent_Version: process.env.npm_package_version || '4.x',
 }

src/index.ts

@@ -7,7 +7,7 @@ import './commands/login'
 const program = getProgram()
 console.clear()
 const introText = chalk.bgHex('#45bfb9').bold.black(` Storyblok CLI `)
-const messageText = ` Starting Blok machine... `
+const messageText = ` `
 console.log(formatHeader(`
 ${introText} ${messageText}`))
 
@@ -18,6 +18,14 @@ program.on('command:*', () => {
   program.help()
 })
 
+/* console.log(`
+${chalk.hex('#45bfb9')(' ─────╮')}
+${chalk.hex('#45bfb9')('│     │')}
+${chalk.hex('#45bfb9')('│')} ◠ ◡ ◠
+${chalk.hex('#45bfb9')('|_  __|')}
+${chalk.hex('#45bfb9')('  |/ ')}
+`) */
+
 try {
   program.parse(process.argv)
 }

src/utils/index.ts

@@ -10,3 +10,14 @@ export const __dirname = dirname(__filename)
 export function isRegion(value: string): value is keyof typeof regions {
   return Object.values(regions).includes(value)
 }
+
+export function maskToken(token: string): string {
+  // Show only the first 4 characters and replace the rest with asterisks
+  if (token.length <= 4) {
+    // If the token is too short, just return it as is
+    return token
+  }
+  const visiblePart = token.slice(0, 4)
+  const maskedPart = '*'.repeat(token.length - 4)
+  return `${visiblePart}${maskedPart}`
+}

src/utils/konsola.test.ts

@@ -24,7 +24,8 @@ describe('konsola', () => {
       const consoleSpy = vi.spyOn(console, 'error')
 
       konsola.error(new Error('Oh gosh, this is embarrasing'))
-      expect(consoleSpy).toHaveBeenCalledWith(chalk.red(`Oh gosh, this is embarrasing`))
+      const errorText = `${chalk.red('x')} Oh gosh, this is embarrasing`
+      expect(consoleSpy).toHaveBeenCalledWith(errorText)
     })
 
     it('should prompt an error message with header', () => {

src/utils/konsola.ts

@@ -23,7 +23,7 @@ export const konsola = {
       console.error(formatHeader(errorHeader))
     }
 
-    console.error(chalk.red(err.message || err))
+    console.error(`${chalk.red('x')} ${err.message || err}`)
     console.log('') // Add a line break
   },
 }