Prevent request from being fired if user selected no image for upload (…

…#704)

Other Changes:
- Remove deprecated Sentry tracing module
- Add dozzle to dev docker-compose config

README.md

@@ -39,7 +39,7 @@ GA_TRACKING_ID=<Google Analytics Tracking ID (Universal Analytics)>
 LOGIN_TO_UPLOAD=true  # omit this variable if you don't want to require users to login to upload
 FILE_SIZE_LIMIT=5000000 # omit this variable if you want the default file size limit of 500 MB
 
-EVALUATION_MODE=true # omit this variable to diable automatic removal of images
+EVALUATION_MODE=true # omit this variable to disable automatic removal of images
 EXPIRE_AFTER_SECONDS=300 # set this to set time for the images to be stored in database in evaluation mode (default is 300 if unspecified)
 
 SENTRY_DSN=<Sentry DSN>                     # endpoint to upload Sentry events

assets/js/file-upload.js

@@ -111,6 +111,14 @@ $(document).ready(function () {
 
     $("#upload-button").on("click", function (evt) {
         performLoggedInAction(evt, function () {
+            if (currentFile == null) {
+                uploadPreview.style.boxShadow = "";
+                uploadPreview.classList.add("error");
+                showNotification("Nothing was selected to upload.", {
+                    error: true,
+                });
+                return;
+            }
             uploadFile(currentFile);
         });
     });

assets/js/sentry.js

@@ -1,14 +1,18 @@
 import * as Sentry from "@sentry/browser";
-import { Integrations } from "@sentry/tracing";
 
 Sentry.init({
     dsn: SENTRY_DSN,
-    integrations: [new Integrations.BrowserTracing()],
+    integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
     release: `simpleimage@${SI_VERSION}`,
     environment: NODE_ENV,
 
     // Set tracesSampleRate to 1.0 to capture 100%
     // of transactions for performance monitoring.
     // We recommend adjusting this value in production
     tracesSampleRate: 1.0,
+
+    // Capture Replay for 10% of all sessions,
+    // plus for 100% of sessions with an error
+    replaysSessionSampleRate: 0.1,
+    replaysOnErrorSampleRate: 1.0,
 });

cypress/e2e/1-homepage/home.cy.js

@@ -329,6 +329,27 @@ describe("simpleimage homepage", () => {
         });
     });
 
+    it("should display an error if nothing is selected for upload without sending a request", () => {
+        // Wait a second for all page elements to load and for the document ready handler to clear out selected filename from cache
+        // TODO listen for document ready handler to fire instead
+        cy.wait(1000);
+
+        // Listen for upload request to make sure later that it never fired
+        cy.intercept("POST", "/upload").as("uploadReq");
+
+        // Click upload button without attaching any image
+        cy.get("#upload-button").should("exist").click();
+
+        // TODO assert using an error code or some other form of error ID instead
+        cy.assertErrorMessageContains("Nothing was selected to upload.");
+
+        // Upload request should have never fired
+        cy.get("@uploadReq").should("be.null");
+
+        // Should still be on the homepage
+        cy.url().should("eq", `${Cypress.env("baseUrl")}/`);
+    });
+
     describe("info toggle", () => {
         it("shows info element when mouse hovers over it", () => {
             // move mouse somewhere else - sometimes page loads with info element already appearing, this doesn't happen in normal usage

docker-compose.dev.yml

@@ -16,6 +16,13 @@ services:
     si_sessions:
         ports:
             - "6379:6379"
+    dozzle:
+        container_name: si-dozzle
+        image: amir20/dozzle:latest
+        volumes:
+        - /var/run/docker.sock:/var/run/docker.sock
+        ports:
+        - 9999:8080
 
 volumes:
     node_modules:

package.json

@@ -24,7 +24,6 @@
   "dependencies": {
     "@gumlet/gif-resize": "1.3.1",
     "@sentry/browser": "^7.57.0",
-    "@sentry/tracing": "^7.61.0",
     "@sentry/webpack-plugin": "^1.20.0",
     "@vingle/bmp-js": "0.2.5",
     "bcryptjs": "^2.4.3",