Astro / Node / Firebase Hosting - API Values returned not valid JSON

[bkingsleyc]

[REQUIRED] Environment info

firebase-tools:13.13.2

Platform:Windows 11

[REQUIRED] Test case

1. Create new astro project
2. Install Node, React
3. Set Experimental / Init Firebase Hosting
4. Create a pages/api/contactrequest that can get a request and respond with JSON.stringify and a property
5. Create a contact form component with .tsx that submits FormData to the endpoint and converts the JSON response to an object.
6. Deploy the site to firebase

[REQUIRED] Steps to reproduce

Put information in and click submit.

[REQUIRED] Expected behavior

This does work locally, it is just once it is in firebase hosting returns an uncaught promise error when parsing the JSON.

[REQUIRED] Actual behavior

The JSON would be parsed into a variable for use in the component

[google-oss-bot]

This issue does not have all the information required by the template. Looks like you forgot to fill out some sections. Please update the issue with more information.

[bkingsleyc]

[aalej]

Hey @bkingsleyc, thanks for reaching out and for filing a detailed report. Could you check your Google Cloud Function logs to see if there were any errors raised during the function's runtime? Also, using the networks panel of the developer console, could you check if the request has a 500 response status code?

From what I can gather, the issue you’re encountering might be similar to #7046.

[google-oss-bot]

Hey @bkingsleyc. We need more information to resolve this issue but there hasn't been an update in 7 weekdays. I'm marking the issue as stale and if there are no new updates in the next 3 days I will close it automatically.

If you have more information that will help us get to the bottom of this, just add a comment!

[bkingsleyc]

{ "insertId": "66a2aae900049f8d13158367", "httpRequest": { "requestMethod": "GET", "requestUrl": "https://fh-d9c24fcbcc9d0b9e---ssrorangecountyanswers-eexmf5ywvq-uc.a.run.app/robots.txt", "requestSize": "1148", "status": 404, "responseSize": "97", "userAgent": "Mozilla/5.0 (compatible; AhrefsBot/7.0; +http://ahrefs.com/robot/)", "remoteIp": "66.249.93.74", "serverIp": "216.239.32.53", "latency": "1.603440689s", "protocol": "HTTP/1.1" }, "resource": { "type": "cloud_run_revision", "labels": { "location": "us-central1", "revision_name": "ssrorangecountyanswers-00003-ter", "service_name": "ssrorangecountyanswers", "configuration_name": "ssrorangecountyanswers", "project_id": "truebluesites" } }, "timestamp": "2024-07-25T19:43:35.537790Z", "severity": "WARNING", "labels": { "goog-managed-by": "cloudfunctions", "instanceId": "0087244a805d5be13a97b673a45da67340c3360b402fdfaaec0b8370c1871ffd1469bc085fd82dc150e05a1303c7d20bcf73d98d9ff3ec905596d47c6e117c8f26" }, "logName": "projects/truebluesites/logs/run.googleapis.com%2Frequests", "trace": "projects/truebluesites/traces/9ae00ec801aee779ae0cc5e0ef20f6e7", "receiveTimestamp": "2024-07-25T19:43:37.306123422Z", "spanId": "14190558267558933030", "traceSampled": true }

[jamesdaniels]

@leoortizz PTAL

[bkingsleyc]

{ "insertId": "66a2abb600068ed222ee5c02", "httpRequest": { "requestMethod": "POST", "requestUrl": "https://fh-3e8737ee59996eff---ssrtruebluesites-eexmf5ywvq-uc.a.run.app/api/contactrequest", "requestSize": "2190", "status": 500, "responseSize": "106", "userAgent": "Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.36", "remoteIp": "66.249.84.169", "referer": "https://www.truebluecrm.com/", "serverIp": "216.239.38.53", "latency": "0.588588797s", "protocol": "HTTP/1.1" }, "resource": { "type": "cloud_run_revision", "labels": { "revision_name": "ssrtruebluesites-00052-qug", "location": "us-central1", "service_name": "ssrtruebluesites", "configuration_name": "ssrtruebluesites", "project_id": "truebluesites" } }, "timestamp": "2024-07-25T19:47:01.838274Z", "severity": "ERROR", "labels": { "instanceId": "0087244a80cfaa3b14dfaa4d5b444e4667876897c4478c731f5e4e8d22783ad2ca9835b8f8aff1c7ff6bbc408957aa7153644a9cdea3a64dd74ce70d0904e8e947", "goog-managed-by": "cloudfunctions" }, "logName": "projects/truebluesites/logs/run.googleapis.com%2Frequests", "trace": "projects/truebluesites/traces/43d41202739aaec17250fc8518b4375e", "receiveTimestamp": "2024-07-25T19:47:02.434528667Z", "spanId": "10818335362136201948", "traceSampled": true }

[bkingsleyc]

Let me know if you need anything else. This is hosted at: https://www.truebluecrm.com/

[bkingsleyc]

I tried updating astro and firebase tools and tried redeploying hosting. Still the same issue? First I got an infinite terminal run and then it deployed with the same problem as before. Is this fix in a later release? @chalosalvador

[leoortizz]

Hey @bkingsleyc, the new version of firebase-frameworks with the fix was just released! Can you please try redeploying?

[bkingsleyc]

Newer than 13.15.1?

[chalosalvador]

@bkingsleyc the fix is part of the firebase-framework v11.0.4 release which includes #234. I have confirmed the fix in this mcve, could you please try redeploying and confirm if the forms gets submitted successfully?

[bkingsleyc]

Hey @chalosalvador I am running astro vs next and it's using a react component and I am still receiving a failure and an error. I did make sure I downloaded the latest today: Please feel free to check https://truebluesites.web.app/ for my mcve and let me know if you want me to dig into anything else.

[chalosalvador]

@bkingsleyc here's the repo for the mcve I shared. If you can share your mcve code I could take a deeper look.

[bkingsleyc]

@chalosalvador I created a fresh project updating everything again. Here is a repo for the code: https://github.com/CollabTech/firebase-astro-badjson

It does look like there is some difference in how it it handled in the node adapter vs in your mcve.... I use "const data = await request.json();" which does works in my docker implementation.

You use " const formData = await request.formData()" which I think would be a little difference in capabilities because with the node implementation I could overload the api with JSON or formdata as well, correct? I think I would prefer the overloading vs needing to have a one for one api name. (Just my thoughts: keeping parody with what works in Docker might make sense)

I did get it working with the formData.request, but it I did need to add in the extra integration properties of having a hybrid server in middleware mode.

Thank you for all the work on this! It's really amazing watching everything move along so quickly.

[chalosalvador]

@bkingsleyc In your Form component you are sending the data as a FormData object which needs to be parsed with request.fromData() on the server. If you need to use request.json() you should send the data as json instead, you could you something like this in your submit function:

const formData = new FormData(e.target as HTMLFormElement);

  // Convert FormData to a JSON object
  const formDataObject = Object.fromEntries(formData.entries());

  const response = await fetch("/api/contactrequest", {
    method: "POST",
    headers: {
      "Content-Type": "application/json", // Set the Content-Type to application/json
    },
    body: JSON.stringify(formDataObject), // Send JSON stringified data
  });

If you need to support json and formData then you could check the content-type header and decide which method to use to parse the data.

Let me know if that helps or if I am missing something.