diff options
Diffstat (limited to 'posts/2021-01-28-undefined-javasript-is-undefined.html')
| -rw-r--r-- | posts/2021-01-28-undefined-javasript-is-undefined.html | 163 |
1 files changed, 163 insertions, 0 deletions
diff --git a/posts/2021-01-28-undefined-javasript-is-undefined.html b/posts/2021-01-28-undefined-javasript-is-undefined.html new file mode 100644 index 0000000..e12203b --- /dev/null +++ b/posts/2021-01-28-undefined-javasript-is-undefined.html @@ -0,0 +1,163 @@ +<!DOCTYPE html> +<html> + <head> + <link rel="stylesheet" href="/includes/stylesheet.css" /> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <meta + property="og:description" + content="The World Wide Web pages of Adam Carpenter" + /> + <meta + property="og:image" + content="https://nextcloud.53hor.net/index.php/s/Nx9e7iHbw4t99wo/preview" + /> + <meta property="og:site_name" content="53hor.net" /> + <meta property="og:title" content="Undefined? JavaSript Is Undefined." /> + <meta property="og:type" content="website" /> + <meta property="og:url" content="https://www.53hor.net" /> + <title>53hornet ➙ Undefined? JavaSript Is Undefined.</title> + </head> + + <body> + <nav> + <ul> + <li> + <a href="/"> + <img src="/includes/icons/home-roof.svg" /> + Home + </a> + </li> + <li> + <a href="/info.html"> + <img src="/includes/icons/information-variant.svg" /> + Info + </a> + </li> + <li> + <a href="https://git.53hor.net"> + <img src="/includes/icons/git.svg" /> + Repos + </a> + </li> + <li> + <a href="/hosted.html"> + <img src="/includes/icons/desktop-tower.svg" /> + Hosted + </a> + </li> + <li> + <a type="application/rss+xml" href="/rss.xml"> + <img src="/includes/icons/rss.svg" /> + RSS + </a> + </li> + </ul> + </nav> + + <article> + <h1>Undefined? JavaSript Is Undefined.</h1> + + <p class="description"> + So I've been working on a web app for my mom. Nothing too fancy, but + it's a store front for her glass art. It's an easy way for her to keep + track of inventory, update photos of her products, and for people to + shop and search and sort and browse through it. This backend is an HTTP + service written in Rust. The frontend is a Vue.js app. I've used Vue and + JavaScript many times before but I recently ran into an incredibly + strange bug. One that I would have hoped JavaScript would have some + guard against. But JavaScript is an undefined language. + </p> + + <p> + I have a small component that uses a file input to collect an image from + the user. Then I append that file to a FormData and set that FormData as + a Fetch API request body. So I've got fetch API sending + multipart/form-data across the network to my backend. Awesome! The + backend is supposed to take each field of the request, turn the chunks + into a single stream of binary data, and write them out to an image. + Everything on the front seems like it's working great, it fires off the + request and throws no errors. But then the backend only sees a few bytes + of this multi-megabyte image. Not awesome! short chunks on the back-end. + The array of data in the API is less than ten bytes long, when this is a + many-kilobyte file I'm trying to upload. + </p> + + <p> + At this point I'm relentlessly debugging, trying to find out what's + wrong with the API. Why is it truncating the request down to a few + bytes, where's the rest of the data? It took me forever to actually + inspect what those few bytes are and, lo and behold they're ASCII for + <code>undefined</code> The request happily stringified an + <code>undefined</code> object, instead of maybe throwing a null + reference or undefined error during request creation because that's just + what JavaScript does. <em>The linter didn't even catch it.</em> + </p> + + <p> + You can see what the debugging logs looked like on the backend below. + Note that the <code>&data</code> is the field that spells out + "undefined". Also note that the file picker/FormData was constructed + alright because the key for the image name is correct. + </p> + + <pre> + <code> +[src/handlers.rs:114] &field = +Field: application/octet-stream + boundary: ---------------------------175314640631070190963311652907 + headers: + "content-disposition": "form-data; name=\"clu.jpg\"" + +[src/handlers.rs:119] &chunk = Ok( + b"undefined", +) +[src/handlers.rs:123] &data = [ + 117, + 110, + 100, + 101, + 102, + 105, + 110, + 101, + 100, +] +ImageWrite("The image format could not be determined") + </code> + </pre> + + <p> + The <em>working</em> JS is here (it was late at night and I was so + donion rings I just fixed it and pushed it without saving the errors for + posterity): + </p> + + <pre> + <code> +let file = event.target.files[0]; +if (!file) { + return; +} + +const fd = new FormData(); +fd.append(file.name, file); + +const response = await fetch("http://localhost:8000/photos", { + method: "POST", + body: fd +}); + +console.log(response); + </code> + </pre> + <p> + I've gotten frustrated by JS before but not like this. I don't know if + TypeScript would have solved this issue but writing in a language that + gets transpiled back into the language I'm trying to avoid doesn't seem + like the way forward. I'm looking forward to Web Assembly as a way of + using more type-safe languages in the browser. + </p> + </article> + </body> +</html> |