handle error if use wrong env vars

package.json

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@iconify/svelte": "^3.0.1",
+    "axios": "^1.2.0",
     "clsx": "^1.2.1",
     "crypto-js": "^4.1.1"
   }

src/lib/ShortURL.svelte

@@ -3,6 +3,7 @@
   import { getShortLink } from '../utils/shortLink'
   import Button from './Button.svelte'
   import CopyToClipboard from './CopyToClipboard.svelte'
+  import { AxiosError } from 'axios'
 
   interface $$Props {
     campaign: Campaign
@@ -58,12 +59,19 @@
   }
 
   async function generateShortUrl(): Promise<void> {
-    const fullUrl = generateFullUrl(campaign)
-    if (!fullUrl) {
-      return
+    try {
+      const fullUrl = generateFullUrl(campaign)
+      if (!fullUrl) {
+        return
+      }
+      const shortLink = await getShortLink(fullUrl)
+      shortUrl = shortLink
+    } catch (err) {
+      if (err instanceof AxiosError) {
+        console.error(err.response?.data.error)
+        alert(err.response?.data.error)
+      }
     }
-    const shortLink = await getShortLink(fullUrl)
-    shortUrl = shortLink
   }
 
   $: fullUrl = generateFullUrl(campaign)

src/utils/shortLink.ts

@@ -1,19 +1,18 @@
+import axios from 'axios'
+
 export async function getShortLink(url: string): Promise<string> {
-  const data = {
+  const body = {
     domain: import.meta.env.VITE_SHORT_IO_DOMAIN,
     originalURL: url,
   }
 
-  const response = await fetch('https://api.short.io/links/public', {
-    method: 'post',
+  const { data } = await axios.post('https://api.short.io/links/public', body, {
     headers: {
       accept: 'application/json',
       'Content-Type': 'application/json',
       authorization: import.meta.env.VITE_SHORT_IO_PUBLIC_KEY,
     },
-    body: JSON.stringify(data),
   })
 
-  const json = await response.json()
-  return json['shortURL']
+  return data['shortURL']
 }