CLASSROOMIO-T-105: Add try again + sentry replay

.gitignore

@@ -9,3 +9,6 @@ package-lock.json
 
 # Local Netlify folder
 .netlify
+
+# Sentry Auth Token
+.env.sentry-build-plugin

package.json

@@ -17,6 +17,7 @@
     "@sentry/browser": "^7.61.0",
     "@sentry/integrations": "^7.61.0",
     "@sentry/tracing": "^7.61.0",
+    "@sentry/vite-plugin": "^2.6.2",
     "@supabase/supabase-js": "^2.31.0",
     "@sveltejs/adapter-auto": "^2.1.0",
     "@sveltejs/adapter-netlify": "^2.0.8",

src/lib/components/Course/components/Lesson/Materials/Video/LocalVideo.svelte

@@ -75,6 +75,11 @@
     }
   }
 
+  function tryAgain() {
+    formRes = null;
+    isLoaded = false;
+  }
+
   $: isDoneUploading(formRes);
 </script>
 
@@ -124,7 +129,7 @@
         Sorry we video wasn’t uploaded. The file size is too big,<br /> maximum size is 50 MB. Try again!
       </p>
     </span>
-    <PrimaryButton label="Try again" onClick={() => fileInput?.click()} />
+    <PrimaryButton label="Try another file" onClick={tryAgain} />
   </div>
 {:else if !formRes?.success}
   <div class="h-full w-full flex flex-col items-center justify-center rounded-xl">
@@ -134,14 +139,11 @@
         Oops 😬, couldn’t upload video
       </h3>
       <p class="text-center text-xs font-normal text-[#ADADAD]">
-        Sorry we video wasn’t uploaded, the file format isn’t supported.<br /> Upload MP4, MOV and AVI
-        files.
+        Sorry we video wasn’t uploaded, the file format isn’t supported or something went wrong on
+        the server.<br /> Upload MP4, MOV and AVI files.
       </p>
     </span>
-    <PrimaryButton
-      label="Try again later"
-      onClick={() => ($uploadCourseVideoStore.isModalOpen = false)}
-    />
+    <PrimaryButton label="Please try again" onClick={tryAgain} />
   </div>
 {:else}
   <div class="flex flex-col w-full h-full items-start justify-between">
@@ -162,6 +164,7 @@
           <img src="/delete-video.svg" alt="deletevideo" class="dark:invert" />
         </button>
       </div>
+      <PrimaryButton label="Done" onClick={() => ($uploadCourseVideoStore.isModalOpen = false)} />
     </div>
   </div>
 {/if}

src/routes/+layout.svelte

@@ -55,7 +55,8 @@
           new Integrations.BrowserTracing(),
           new CaptureConsole({
             levels: ['error']
-          })
+          }),
+          new Sentry.Replay()
         ],
         environment: !dev ? 'production' : 'development',
         // Set tracesSampleRate to 1.0 to capture 100%

vite.config.ts

@@ -1,6 +1,10 @@
+import { sentryVitePlugin } from "@sentry/vite-plugin";
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [sveltekit(), sentryVitePlugin({
+    org: "the-next-greats",
+    project: "classroomio"
+  })],
 });