diff options
| author | Adam T. Carpenter <atc@53hor.net> | 2021-01-28 15:45:18 -0500 |
|---|---|---|
| committer | Adam T. Carpenter <atc@53hor.net> | 2021-01-28 15:45:18 -0500 |
| commit | 5ed37a2015f404e623c2d3be53374ffa7875e432 (patch) | |
| tree | f3af67bb7e59aec641f5d4c819b43e5d9b7e88fd | |
| parent | 03a343727c95aac9ef994cfdfe8f75703ac69cb1 (diff) | |
| download | 53hor-5ed37a2015f404e623c2d3be53374ffa7875e432.tar.xz 53hor-5ed37a2015f404e623c2d3be53374ffa7875e432.zip | |
updated robots, makefile destination, added undefined javascript
| -rw-r--r-- | Makefile | 2 | ||||
| -rw-r--r-- | index.html | 1 | ||||
| -rw-r--r-- | posts/programming/2021-01-28-undefined-javasript-is-undefined-.html | 161 | ||||
| -rw-r--r-- | robots.txt | 3 | ||||
| -rw-r--r-- | rss.xml | 1 |
5 files changed, 166 insertions, 2 deletions
@@ -24,4 +24,4 @@ post: sed -i '' "s#<ul id=\"index\">#<ul id=\"index\">\n<li> <a href=\"/$$FILENAME\">$$TITLE <code>$$LONG_DATE</code> </a> </li>#" index.html live: - rsync -r ./* atc@192.168.1.104:/var/www/ + rsync --recursive --update --exclude=Makefile --exclude=.git/ ./* atc@192.168.1.104:/zroot/www/ @@ -67,6 +67,7 @@ </h1> <ul id="index"> +<li> <a href="/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html">Undefined? JavaSript Is Undefined. <code>Thu, 28 Jan 2021</code> </a> </li> <li> <a href="/posts/life/2021-01-15-adam-s-2020-reading-list.html">Adam's 2020 Reading List <code>Fri, 15 Jan 2021</code> </a> </li> <li> <a diff --git a/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html b/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html new file mode 100644 index 0000000..8ff3e7c --- /dev/null +++ b/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html @@ -0,0 +1,161 @@ +<!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/s/iBGxB7P3BKRbj9P/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". + </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> @@ -1,6 +1,7 @@ User-agent: * Crawl-delay: 120 +Disallow: /.git/ +Disallow: /drafts/ Disallow: /includes/ Disallow: /rss.xml Disallow: /templates/ -Disallow: /drafts/ @@ -138,5 +138,6 @@ <guid>https://www.53hor.net/posts/unix/2021-01-15-root-on-zfs-a-zpool-of-mirror-vdevs-the-easy-way.html</guid> </item> <item> <title>Adam's 2020 Reading List</title> <pubDate>Fri, 15 Jan 2021</pubDate> <link>https://www.53hor.net/posts/life/2021-01-15-adam-s-2020-reading-list.html</link> <guid>https://www.53hor.net/posts/life/2021-01-15-adam-s-2020-reading-list.html</guid> </item> +<item> <title>Undefined? JavaSript Is Undefined.</title> <pubDate>Thu, 28 Jan 2021</pubDate> <link>https://www.53hor.net/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html</link> <guid>https://www.53hor.net/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html</guid> </item> </channel> </rss> |