bug: Fix multiple feedback file attachments

Ensure that the feedback form limits the user to 5 attachments and shows a warning toast if too many are added

Ensure that multiple file attachments are supported in email, which requires buffering all the attachments as the email provider does not seem to support multiple file streams at once

Author: paustint

apps/api/src/app/services/user-feedback.service.ts

@@ -1,7 +1,7 @@
 import { ENV, getExceptionLog, logger, rollbarServer } from '@jetstream/api-config';
 import { sendUserFeedbackEmail } from '@jetstream/email';
 import { Request } from 'express';
-import fs from 'node:fs';
+import fs from 'node:fs/promises';
 import z from 'zod';
 
 export const UserFeedbackPayloadSchema = z.object({
@@ -67,11 +67,18 @@ export async function handleUserFeedbackEmail(
   const files = (req.files as Express.Multer.File[] | undefined) || [];
 
   // Prepare attachments from uploaded files
-  const attachments = files.map((file, i) => ({
-    data: fs.createReadStream(file.path),
-    filename: filenames?.[i] || file.originalname,
-    contentType: file.mimetype,
-  }));
+  // NOTE: ideally we would have the ability to stream the files to avoid loading them all into memory
+  // but this is unsupported by the email service provider
+  const attachments: { data: Buffer; filename: string; contentType: string }[] = [];
+  let i = 0;
+  for (const file of files) {
+    attachments.push({
+      data: await fs.readFile(file.path),
+      filename: filenames?.[i] || file.originalname,
+      contentType: file.mimetype,
+    });
+    i++;
+  }
 
   // Send email with feedback
   await sendUserFeedbackEmail(ENV.JETSTREAM_EMAIL_REPLY_TO, userId, feedbackContent, attachments);
@@ -96,21 +103,11 @@ export async function cleanupFeedbackAttachments(req: Request, loggerInfo: Recor
       return;
     }
     const filePaths = files.map((file) => file.path);
-    await Promise.allSettled(
-      filePaths.map((path) => {
-        return new Promise<void>((resolve, reject) => {
-          // Clean up temp files
-          return fs.unlink(path, (err) => {
-            if (err) {
-              logger.error({ message: err.message }, 'Error deleting temp feedback attachment file');
-              reject(err);
-              return;
-            }
-            resolve();
-          });
-        });
-      }),
-    );
+    // Clean up temp files
+    const results = await Promise.allSettled(filePaths.map((path) => fs.unlink(path)));
+    if (results.some((result) => result.status === 'rejected')) {
+      throw new Error('Error deleting one or more temp feedback attachment files');
+    }
     (req.log || logger).info({ filePaths, ...loggerInfo }, 'Temp feedback attachment files cleaned up');
   } catch (ex) {
     (req.log || logger).error({ ...getExceptionLog(ex), ...loggerInfo }, 'Error during cleanup of feedback attachments');

libs/shared/ui-core/src/app/ErrorBoundaryFallback.tsx

@@ -14,12 +14,10 @@ export const ErrorBoundaryFallback: FunctionComponent<FallbackProps> = ({ error,
     if (error && rollbar) {
       try {
         logger.error(error);
-        // logger.error(componentStack);
         rollbar.error(`[UNCAUGHT] ${error.message}`, error, {
           errorName: error.name,
           message: error.message,
           stack: error.stack,
-          // componentStack,
         });
       } catch (ex) {
         try {
@@ -30,7 +28,7 @@ export const ErrorBoundaryFallback: FunctionComponent<FallbackProps> = ({ error,
         }
       }
     }
-  }, [/** componentStack, */ error, rollbar]);
+  }, [error, rollbar]);
 
   function resetPage() {
     window.location.reload();

libs/ui/src/lib/user-feedback-widget/UserFeedbackWidget.tsx

@@ -95,7 +95,13 @@ export const UserFeedbackWidget = () => {
       fireToast({ message: 'You can only upload up to 5 screenshots.', type: 'warning' });
       return;
     }
-    setScreenshots((prev) => [...prev, fileContent]);
+    setScreenshots((prev) => {
+      if (prev.length >= 5) {
+        setTimeout(() => fireToast({ message: 'You can only upload up to 5 screenshots.', type: 'warning' }), 0);
+        return prev;
+      }
+      return [...prev, fileContent];
+    });
   };
 
   const handleRemoveScreenshot = (index: number) => {