feat(e2e): seperated messages for fetch and decrypt errors

Author: technikhil314

constants/messages.ts

@@ -1,19 +1,22 @@
 export const E2E_LINK_GENERATION_ERROR =
   'Failed to generate E2E Link. Please try again later.'
 
-export const E2E_LINK_GENERATION_SUCCESS = 'E2E Link copied to your clipboard'
+export const E2E_LINK_GENERATION_SUCCESS = 'E2E encrypted diff link copied to your clipboard'
 
 export const E2E_DATA_LOADING_INFO = 'Loading your end to end encrypted diff...'
 
 export const E2E_DATA_DECRYPTING_INFO = 'Decrypting your diff on your browser...'
 
 export const E2E_DATA_FINALIZING_INFO = 'Diffing your data...'
 
-export const E2E_DATA_ERROR =
-  "We couldn't fetch/decrypt your diff. Please try again later."
+export const E2E_DATA_FETCH_ERROR =
+  "We couldn't fetch your diff. Please try again later."
+
+export const E2E_DATA_DECRYPTION_ERROR =
+  "We couldn't decrypt your diff. Please check the link and try again."
 
 export const E2E_DATA_NO_LONGER_AVAILABLE_ERROR =
-  'Looks like your diff data is no longer available. Sorry for the inconvenience.'
+  'Looks like the link has expired. Please check the link or generate a new one.'
 
 export const LINK_COPY_SUCCESS = 'Link copied to your clipboard'
 

pages/v2/diff.vue

@@ -73,7 +73,8 @@ import { getDecryptedText, getDepryctionKey } from '~/helpers/decrypt'
 import { v2DiffData } from '~/helpers/types'
 import {
   E2E_DATA_DECRYPTING_INFO,
-  E2E_DATA_ERROR,
+  E2E_DATA_DECRYPTION_ERROR,
+  E2E_DATA_FETCH_ERROR,
   E2E_DATA_FINALIZING_INFO,
   E2E_DATA_LOADING_INFO,
   E2E_DATA_NO_LONGER_AVAILABLE_ERROR,
@@ -134,12 +135,20 @@ export default Vue.extend({
     },
     async getE2EData() {
       this.e2eDataStatusText = E2E_DATA_LOADING_INFO
+      const url = new URL(window.location.href)
+      const id = url.searchParams.get('id')
+      const key = url.hash.replace(/^#/, '')
+      let response = null;
+        let data = null
+      try {
+        response = await fetch(`/api/getLink?id=${id}`)
+        data = await response.json()
+      } catch (error) {
+        console.error(error)
+        this.e2eDataStatusText = E2E_DATA_FETCH_ERROR
+        return null
+      }
       try {
-        const url = new URL(window.location.href)
-        const id = url.searchParams.get('id')
-        const key = url.hash.replace(/^#/, '')
-        const response = await fetch(`/api/getLink?id=${id}`)
-        const data = await response.json()
         if (data.length === 0) {
           this.e2eDataStatusText = E2E_DATA_NO_LONGER_AVAILABLE_ERROR
           return null
@@ -157,7 +166,7 @@ export default Vue.extend({
         return decryptedData
       } catch (error) {
         console.error(error)
-        this.e2eDataStatusText = E2E_DATA_ERROR
+        this.e2eDataStatusText = E2E_DATA_DECRYPTION_ERROR
         return null
       }
     },