summaryrefslogtreecommitdiff
path: root/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html
diff options
context:
space:
mode:
Diffstat (limited to 'posts/programming/2021-01-28-undefined-javasript-is-undefined-.html')
-rw-r--r--posts/programming/2021-01-28-undefined-javasript-is-undefined-.html163
1 files changed, 0 insertions, 163 deletions
diff --git a/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html b/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html
deleted file mode 100644
index e12203b..0000000
--- a/posts/programming/2021-01-28-undefined-javasript-is-undefined-.html
+++ /dev/null
@@ -1,163 +0,0 @@
-<!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>