start testing /contact page with lighthouse & percy

.github/workflows/post-deploy.yml

@@ -51,6 +51,7 @@ jobs:
             --collect.url=${{ env.BASE_DEPLOY_URL }}/ \
             --collect.url=${{ env.BASE_DEPLOY_URL }}/notes/how-to-pull-request-fork-github/ \
             --collect.url=${{ env.BASE_DEPLOY_URL }}/projects/
+            --collect.url=${{ env.BASE_DEPLOY_URL }}/contact/
       - uses: actions/upload-artifact@v2
         with:
           name: lhci-results

.percy.yml

@@ -9,7 +9,8 @@ snapshot:
     iframe,
     video,
     img[src$=".gif"],
-    div#meta-hits {
+    .loading,
+    #contact-form-captcha {
       display: none !important;
     }
 
@@ -26,6 +27,7 @@ static:
     - "uses/index.html"
     - "notes/how-to-pull-request-fork-github/index.html"
     - "notes/shodan-search-queries/index.html"
+    - "contact/index.html"
 discovery:
   network-idle-timeout: 750
   disable-cache: true

api/contact.js

@@ -37,26 +37,28 @@ export default async (req, res) => {
 
     const { body } = req;
 
-    // all fields are required
+    // these are both backups to client-side validations just in case someone
+    // squeezes through without them. the codes are identical so they're caught
+    // in the same fashion.
     if (!body.name || !body.email || !body.message) {
-      throw new Error("missingData");
+      // all fields are required
+      throw new Error("MISSING_DATA");
     }
-
-    // either the captcha is wrong or completely missing
     if (!body["h-captcha-response"] || !(await validateCaptcha(body["h-captcha-response"]))) {
-      throw new Error("invalidCaptcha");
+      // either the captcha is wrong or completely missing
+      throw new Error("INVALID_CAPTCHA");
     }
 
     // sent directly to airtable
-    const sendResult = await sendMessage({
+    const airtableResult = await sendToAirtable({
       Name: body.name,
       Email: body.email,
       Message: body.message,
     });
 
     // throw an internal error, not user's fault
-    if (sendResult !== true) {
+    if (airtableResult !== true) {
-      throw new Error("airtableApiError");
+      throw new Error("AIRTABLE_API_ERROR");
     }
 
     // return in JSON format
@@ -64,10 +66,10 @@ export default async (req, res) => {
   } catch (error) {
     console.error(error);
 
-    const message = error instanceof Error ? error.message : "Unknown error.";
+    const message = error instanceof Error ? error.message : "UNKNOWN_EXCEPTION";
 
     // don't log PEBCAK errors to sentry
-    if (message !== "missingData" && message !== "invalidCaptcha") {
+    if (message !== "MISSING_DATA" && message !== "INVALID_CAPTCHA") {
       // log error to sentry, give it 2 seconds to finish sending
       Sentry.captureException(error);
       await Sentry.flush(2000);
@@ -95,7 +97,7 @@ const validateCaptcha = async (formResponse) => {
   return result.success;
 };
 
-const sendMessage = async (data) => {
+const sendToAirtable = async (data) => {
   const response = await fetch(`${AIRTABLE_API_ENDPOINT}${AIRTABLE_BASE}/Messages`, {
     method: "POST",
     headers: {

assets/js/src/contact.js

@@ -34,10 +34,10 @@ if (contactForm) {
       // we throw identical error messages to the server's so they're caught in
       // the same way below.
       if (!formData.name || !formData.email || !formData.message) {
-        throw new Error("missingData");
+        throw new Error("MISSING_DATA");
       }
       if (!formData["h-captcha-response"]) {
-        throw new Error("invalidCaptcha");
+        throw new Error("INVALID_CAPTCHA");
       }
 
       // post JSONified form input to /api/contact/
@@ -68,12 +68,12 @@ if (contactForm) {
           }
         });
     } catch (error) {
-      const message = error instanceof Error ? error.message : "Unknown";
+      const message = error instanceof Error ? error.message : "UNKNOWN_EXCEPTION";
 
       // give user feedback based on the error message returned
-      if (message === "invalidCaptcha") {
+      if (message === "INVALID_CAPTCHA") {
         errorSpan.innerText = "Did you complete the CAPTCHA? (If you're human, that is...)";
-      } else if (message === "missingData") {
+      } else if (message === "MISSING_DATA") {
         errorSpan.innerText = "Please make sure that all fields are filled in.";
       } else {
         // something else went wrong, and it's probably my fault...