compress request before sending to BE

Author: Or-Mi

src/taskpane/components/App.tsx

@@ -18,6 +18,7 @@ import {
 } from "@fluentui/react-components";
 import { getCellAddress } from "../taskpane";
 import { useState } from "react";
+import pako from 'pako';
 
 
 // ProJets brand color
@@ -175,7 +176,7 @@ const App = () => {
 
   const readWorkbook = async () => {
     resetProgress();
-  
+
   const readRange = async (worksheetData, range) => {
     range.load([
             "columnCount",
@@ -317,17 +318,42 @@ const App = () => {
 
     try {
       const workbook = await readWorkbook();
-
-      await fetch(targetUrl as string, {
-        method: "POST",
-        body: JSON.stringify({
+      let jsonData = JSON.stringify({
           worksheets: workbook,
           params: { param1, param2 },
-        }),
+        });
+
+      const compressedData = pako.gzip(jsonData);
+      const response = await fetch(targetUrl as string, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'Content-Encoding': 'gzip',
+          'Accept-Encoding': 'gzip'
+        },
+        body: compressedData
       });
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+
+      // // Handle compressed response
+      // const responseBuffer = await response.arrayBuffer();
+      // const responseUint8Array = new Uint8Array(responseBuffer);
+      // const responseString = responseUint8Array.toString();
+      // // const decompressedResponse = pako.ungzip(responseUint8Array, { to: 'string' });
+
+      // return JSON.parse(responseString);
+      return await response.json();
     } catch (error) {
-      setReadErrorMessage(error.message || "An error occurred during the read operation");
-    } finally {
+  // Compose a detailed error message with stack trace
+  const   detailedError =
+    (error.message ? `Error: ${error.message}\n` : "") +
+    (error.stack ? `Stack trace:\n${error.stack}` : "");
+  console.error("Error reading workbook:", detailedError);
+  setReadErrorMessage(detailedError || "An error occurred during the read operation");
+} finally {
       setIsReadLoading(false);
     }
   };
@@ -411,8 +437,13 @@ const App = () => {
       const jsonData = JSON.parse(textArea as string);
       await writeWorkbook(jsonData);
     } catch (error) {
-      setWriteErrorMessage(error.message || "An error occurred during the write operation");
-    } finally {
+  // Compose a detailed error message with stack trace
+  const detailedError =
+    (error.message ? `Error: ${error.message}\n` : "") +
+    (error.stack ? `Stack trace:\n${error.stack}` : "");
+  console.error("Error reading workbook:", detailedError);
+  setReadErrorMessage(detailedError || "An error occurred during the write operation");
+} finally {
       setIsWriteLoading(false);
     }
   };