Compress string using gzip and native browser APIs

Compress string.js

function compress(string, encoding) {
  const byteArray = new TextEncoder().encode(string);
  const cs = new CompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer();
}

function decompress(byteArray, encoding) {
  const cs = new DecompressionStream(encoding);
  const writer = cs.writable.getWriter();
  writer.write(byteArray);
  writer.close();
  return new Response(cs.readable).arrayBuffer().then(function (arrayBuffer) {
    return new TextDecoder().decode(arrayBuffer);
  });
}

@Explosion-Scratch Thanks for your reply, Sir. I'm sorry if my question was ambiguous.

I know that it was going to fail. It's just an example to make the function throw an error at me. Another example would be if the compressed data is altered, it will throw error Uncaught (in promise) TypeError : Junk found after the end of compressed data. But if I use .catch(err=>{console.log(err)}), it catch a totally different message, TypeError : Failed to fetch.

My question is how can I catch the real error message?

My codes is like this:
return new Response(cs.readable).arrayBuffer() .catch(err=>{console.log(err)})

@A99US There are two errors going on here, and Failed to fetch is the first one (so the one you catch). await (new Response(cs.readable)).arrayBuffer() causes the error (for me TypeError: The compressed data was not valid) but because we're returning the promise, not the result of awaiting said promise that error message gets turned into "Failed to fetch".

Basically:

Compressed array buffer -> decompression stream writer -> try to create a Response object (error here so Response object gets returned, error in response object = Failed to fetch) -> (if no error) Convert response to string and return string

So if there's an error, you get a Response promise that throws an error, if there's not you get a string. The error you're seeing is from the zlib internal library and I'm not sure how to catch that error message.

@Explosion-Scratch I appreciate your times and your replies, Sir.
Cheers

@Explosion-Scratch So I've found a way to catch the error message. Apparently it's in the writer's Promise. I still dont know if it is the correct way, but it's one of those moments of "Dont know how or why it works, but it works". If you or anyone else understand more about it, please correct my codes.

async function decomp(str,mode="gzip"){
  // Using Node Buffer for encoder
  str = Buffer.from(str, "base64")
  const cs = new DecompressionStream(mode)
  const writer = cs.writable.getWriter()
  writer.write(str)
  writer.close()
  return await new Response(cs.readable).arrayBuffer()
    .then(
      // Resolve Function
      arr=>(Buffer.from(arr)).toString("utf8"),
      // Reject Function
      async _=>{throw new Error(await Promise.reject(await writer.closed))}
    )
}

let string = [
  // "These strings were compressed!" compressed with gzip and base64 encoder
  `H4sIAAAAAAAACgvJSC1OVSguKcrMSy9WKE8tSlVIzs8tKEotLk5NUQQAfREzrR4AAAA`,
  // Change capital R near the end
  `H4sIAAAAAAAACgvJSC1OVSguKcrMSy9WKE8tSlVIzs8tKEotLk5NUQQAfREzrr4AAAA`,
  // Change 1 char at the end
  `H4sIAAAAAAAACgvJSC1OVSguKcrMSy9WKE8tSlVIzs8tKEotLk5NUQQAfREzrR4AAAx`,
  // Add 1 char at the end
  `H4sIAAAAAAAACgvJSC1OVSguKcrMSy9WKE8tSlVIzs8tKEotLk5NUQQAfREzrR4AAAAx`,
  ],
  result = []

console.clear()

for(let item of string){
  try{
    result.push(
      "Succesfully decompressing!\n\n" + "String Result : "+ (await decomp(item))
    )
  }
  catch(err){
    result.push("Failed to decompress!\n\n"+ err.name +" : "+ err.message)
  }
}

console.log(result.join("\n\n=====================================================================\n\n"))