Odyssey Lift-Off Part 5: Application Error When Deploying Apollo Client, App Crashing 503

Hi,

I followed the tutorial up until the step to deploy the client. My production server is running and I’m able to query it. I added my production URL to the client code and deployed it to my repository and Heroku, but currently seeing this:

In my inspector tools, Console tab I also see the error messageBlocked a frame with origin "https://xia-client-catstronauts.herokuapp.com" from accessing a frame with origin "https://www.herokucdn.com". Protocols, domains, and ports must match.

Any suggestions are welcome!

Hey @feedXia! Could you post your production server URL?

When you tried running the client locally using that production URL, did you get the same error?

I have the same problem. I finished the lift off. the application worked for a while and suddenly I have the same error even tho I didnt make any changes. Locally it works without any problem.

Also I have a problem with installing dependencies at full stack tutorial and side quest with authentication. after saying npm install it gives me like 200 rows of errors and I dont understand it at all from what I think there is some problem with an sqlite3 dependency because it leads to some url from where it should download the dependency probably and the url throws an error not found. So it will never install packages.

@Pavel_Hajduch Hmm, when you view the logs in Heroku (not in the browser console), what are you getting?

Could you please also open up a new forum post for the installation issue? It will be easier to troubleshoot that separately. Thank you!

My production server URL is: https://xia-server-catstronauts.herokuapp.com/

and the client URL is: https://xia-client-catstronauts.herokuapp.com

I see the Catstronaut page with ERROR: Failed to fetch when I try running the client locally using the production URL

I will open a new one Thanks. It shows me this
2022-08-26T16:19:54.576217+00:00 heroku[router]: at=error code=H10 desc=“App crashed” method=GET path=“/favicon.ico” host=client-catstronauts-test.herokuapp.com request_id=30710e66-9e6f-49d4-800b-1308d138f361 fwd=“37.48.35.250” dyno= connect= service= status=503 bytes= protocol=https

@Pavel_Hajduch I also have the same error message:
2022-08-26T17:00:46.759587+00:00 heroku[router]: at=error code=H10 desc=“App crashed” method=GET path=“/favicon.ico” host=xia-client-catstronauts.herokuapp.com request_id=4db41246-fa6f-4e28-b99a-333585440a9a fwd=“137.220.78.79” dyno= connect= service= status=503 bytes= protocol=https

Thank you both for the info!

I can confirm I’m getting the same error when trying to connect Apollo Client with your production server URL https://xia-server-catstronauts.herokuapp.com/.

It seems to work when using the course-provided link (https://odyssey-lift-off-server.herokuapp.com/).

The error points to being a CORS issue, but as this docs page says:

Apollo Server’s default CORS behavior enables any website on the internet to tell a user’s browser to connect to your server.

So it should automatically allow your client to connect without any additional configuration.

Would you be able to share your repo for the server and client? I can troubleshoot further from there!

Thank you so much @MichelleMabuyo

Here are my repos:

Server: GitHub - feedXia/odyssey-lift-off-part5-server: Odyssey Lift-off V - Server - Course Companion App

I did have CORS issues with my server too: Unable to query production server · Issue #184 · apollographql/apollo-studio-community · GitHub

I had to add require('dotenv').config(); to the top of my src/index.js file even though this step is not included in this tutorial

Then added to my ApolloServer

cors: {
      credentials: true,
      origin: ["https://xia-server-catstronauts.herokuapp.com/", "https://studio.apollographql.com"]
    },

to make it work

Client: GitHub - feedXia/odyssey-lift-off-part5-client: Odyssey Lift-off V - Client - Course Companion App

I’ll need to investigate more what has changed since the course (it looks like the course was using ApolloServer 3.0.2 while yours uses 3.10).

In the meantime, it looks like you added cors config which got your Studio connection working. Can you try updating the below code snippet to point to your client URI instead of your server?

So it should look like this:

      origin: ["https://xia-client-catstronauts.herokuapp.com/", "https://studio.apollographql.com"]

This will tell your server to allow requests from https://xia-client-catstronauts.herokuapp.com/. Hope that helps!

Hey @MichelleMabuyo,

Thank you so much. I have followed your suggestions and updated origin to:

cors: {
      credentials: true,
      origin: ["https://xia-client-catstronauts.herokuapp.com/", "https://studio.apollographql.com"]
    },

Now I can see in the logs for my client that it starts up rather than crashing straight away, and I am getting a HTTP status code of 200 now.

In the browser I now see the Catstronaut page with no content displayed like in my local environment, it just shows the error message ERROR: Load failed

Hey @feedXia ! Thank you for your patience. Coming back to this with fresh eyes over the weekend and I believe I’ve found the issue!

First, to fix the CORS issue was one tiny little thing. In the server app, we need to remove the trailing slash! So it should say:

      origin: ["https://xia-client-catstronauts.herokuapp.com", "https://studio.apollographql.com"]

No slash at the end of the client URL! I have encountered this before and it was definitely frustrating!! With that, it should fix your issues with the client saying “Failed to fetch”.

Second, if your client is still crashing in the logs, you can try this suggestion another user proposed. It requires adding a new config var in Heroku: NODE_OPTIONS set to --max_old_space_size=1024.

Let me know if those work for you and thank you again for your patience!

I also want to note that I removed the cors options in my server and it still worked! So I’m not sure what the original issue was there. You can try the above suggestions, make sure they work, and then afterwards, try removing the cors options from the server as well.

Happy to continue troubleshooting with you and get this sorted!

Hi @MichelleMabuyo !

Hope you had a nice weekend.

Thank you so much for helping me, I started seeing the Catstronauts page displayed correctly after adding the new config var in Heroku: NODE_OPTIONS set to --max_old_space_size=1024 to my Apollo client.

When I removed the CORS options, the server and the client appeared to still be running, but when I used Apollo Studio Explorer to query my server it started showing this error again:

"name": "TypeError",
  "message": "Failed to fetch",
  "stack": "TypeError: Failed to fetch

with this in Inspect > Console:

I am able to query my local server with no issues

After adding the CORS options back, Apollo Studio Explorer now works!

I have just completed the Odyssey List Off Tutorials and earned my certificate :partying_face:

Thank you so much for all your help @MichelleMabuyo

1 Like

Happy to hear that @feedXia ! :smile:

Thank you for reporting your issues, we’ll continue to investigate the discrepancy between the course content and the server behaviour.