Refreshing Angular app breaks one component, but only on version hosted on Heroku - node.js

I am working on a personal project for my portfolio and I'm completely stuck.
I have an Angular 14 app I've been working on. The stack is PEAN. I currently have a live version of it hosted on Heroku. The issue I'm running into is that in my local development version of the app, everything works as intended, however on the live version on Heroku, If I refresh the page using f5 while on the main backlog page, it does not refresh, and instead shows a blank page with "[ ]" at the top of the page. Every other part of the app functions fine, and it does not fully crash when I run into this issue. If I type a different URL in and go to that page, it works again. If after doing so, I click a link that loads the crashed component, it will reload just fine. It appears that the component only breaks if I refresh the component with f5 (or clicking the refresh button on chrome).
I've been working on this for a long time and I think I've narrowed it down a bit. So far I've:
confirmed that my express server is serving my static HTML files from their folder correctly
added a catch all code block at the bottom of my express file to redirect to index.html
made sure that Heroku was actually executing my server.js file
removed potential offending portions of code, like auth/error interceptors and newly added Google Sign-in
I've also:
checked with various browsers/mobile browsers
checked for console errors (there are none)
checked network tab on refresh. (just shows a 304-OK response)
checked Heroku logs. No errors there either.
The issue can not be recreated locally, and it only happens on refresh of one component, the Backlog component.
If there is any more info I can add please let me know, I'm hoping this is a regularly encountered issue. I can't seem to find anything that specifically deals with my exact issue by searching. Any help is greatly appreciated.
update
The blank page with "[ ]" appears to be my database's response when hit without a user ID to check against, and return data. I've narrowed this down to an HTTP-INTERCEPTOR that injects the user ID into the headers, which the route that would use that info for the DB wouldn't have. This makes my DB return "[]".
The only thing I don't understand is that this happens only when hosted on heroku, and not locally.

Related

the contents of my website is not showing

When I deployed my react website with three fiber, the contents such as my html would show at first before the content in the div start disappearing on the live. The js would load at first and then disappear. The model did not show at all.
Here is the live site:
https://xavi4075.github.io/portfolio/
It was fine before I compiled and exported onto github. I have no idea why this is happening
the development build is currently facing the same issues as the live one .The hosted code is on the gh-pages branch. The only thing that seems to be working is the background.
I did this from gui's response
however this was the response from the live site. It is working now in the development site with the fetch being portfolio/assets/airplane.fbx. how can I get rid of the second portfolio?
The only actionable item I can discern is your model not showing up. This is because the fetch for it is returning a 404 error. I'm unsure if this is the cause of everything else not loading correctly but if you open your console you'll see something like this:
Console error
I believe if you change the fetch from https://xavi4075.github.io/assets/airplane.fbx to https://xavi4075.github.io/portfolio/assets/airplane.fbx. Your model should show up since that is where your model lives in your files.

Why on refreshing my deployed app I get error as "Cannot GET /posts"?

I am making a web application using node and react. I have deployed this app using Heroku.
At the time of development suppose I am at URL http://localhost:3000/posts. Now when I refresh the page I am redirected to the same URL.
But after I have deployed my application when I am at URL https://xyz.herokuapp.com/posts and try to refresh this page I get a window showing the following message Cannot GET /posts.
I am unable to understand this problem of my code or I missed something while deploying it. Please guide me on this problem, also let me know if more information is required.

ASP.NET Core 5 MVC web app returning bad request errors in some pages after deployment to IIS

I have tried everything. I configured Windows Server 2019 according to Microsoft documentation and I successfully deployed a .NET 5 web application to the IIS.
I can get to the login page. I can even get to the forgot password page and they show themselves fine. However when I try to do any action (send the forgot password link or login to the page) I get a "Bad Request" from the server. I haven't found a way to explain why.
I have tried several, and I mean several things found Googling around but nothing helps. This include disabling https within the .NET Core application, trying to get a detailed error page using the app.UseDeveloperExceptionPage(); instruction inside Startup, etc etc but nothing works. I always receive this page trying to execute any action:
If someone could help or point me into the right direction, I will really, REALLY appreciate it.
Thank you
PD: In case it has anything to do with the problem, the error, at least the two that I can reproduce (because I can't even log in), happens, I think (maybe don't) when redirecting to another page in Microsoft Identity.
EDIT: code was asked by one of you. Thank you.
As you see, there's nothing specific in the forgot password screen for my application. This is scaffold code from Microsoft Identity. I even edited it and just let one line of code inside it, which is the default return code anyway as follow:
public async Task<IActionResult> OnPostAsync()
{
return RedirectToPage("./ForgotPasswordConfirmation");
}
As you can see, there's nothing special with that code. Here's the html that calls it, again, is a scaffold of Microsoft Identity with little to no changes (by little, I mean, maybe some CSS and a new value of view data):
But then again, forgot password page actually shows and seems well in the front end, but immediately I try to enter my email and click enter in this page, (also, just a scaffold of Microsoft Identity):
Nothing happens. I receive the bad request. There's NO magic nor custom code here. Something silly is going on.
EDIT II: YES, locally it works perfectly. The strange behavior happens only when deployed to IIS.
EDIT III: I coded and enabled logging in my .NET Core APP and wrote that to a file, and I think I finally got, at least the error (not the reason yet):
But why?? Cookies are enabled in the server browser without avail, same issue. Someone has a better idea than disabling anti forgery rules to login and forgot password pages?
Thank you
For some reason, when I deployed the first version of my app into IIS, I thought it was a good idea to just browse it from the IIS link. Of course, in a new mounted Windows Server 2019, IE is still the default browser. I connected directly to the IP of my web app via VPN, but used Chrome this time. Guess what? All problems disappeared. Yes, it's a bad idea to try to use a modern framework like .NET Core Identity with IE.

Website comes up as soon as I start typing

I have an application in Node/Express that is exhibiting some strange (to me, at least) behavior. I am not sure why this happens, but as soon as I begin typing in the URL, the web page instantly comes up. All the logs start populating data and I have my home screen. This is on a local instance for now as I'm still trying to work out bugs related here. I believe these two may be inter-related, but I can't find any data online; perhaps I'm using the wrong search terms, but the long and the short of it is this:
I'm connected to a VM (CentOS7) and everything is run through AWS. I type in my IP:PORT (e.g. 12.34.56.78:9999). As SOON as I type the '1' in the URL, all the logs fire, running through all the scripts. Since I'm at my home page, I hit 'Enter' and is SUPPOSED to go through a redirect to an authorization page (e.g. 12.34.56.78:9999/auth). At that point we're running into my original post, identified above, but this question is simply an attempt to understand why my web page is being shown before I ever 'finish' the call by hitting the 'Enter' key. Is this normal behavior when an application is being accessed locally?
Because your browser is "smart" and guesses that you want to open that website and will therefore load it before you complete the url. That of course only happens if you have previously visited that site, otherwise the browser does not know the url yet. What logic the browser internally uses for this decision depends mostly on the browser and its settings, wether it factors in how recently you visited it or how often, or ...
If you actually want to browse that website when you finish typing the browser has already loaded the page and can instantly display it instead of now loading it and letting you wait a couple of seconds. If you decide you want to go to 123.com instead the browser simply discards the preloaded page and continues as normal.

How to change Ghost Routing to make a landing page first

I am building a Ghost Theme at the moment and I am having trouble swapping the blog for the home.
I went and created a post called "news", then change it to a static page, so I can access the slug. Then I created a "page-news.hbs" and it worked fine.
The problem is that when I add {{pagination}} everything breaks. I get a 500 with error
[page-news.hbs] pagination data is not an object or is a function
(/Users/lulato/Desktop/DD/DESKTOP/ghost_exper/jagag_exp/node_modules/ghost/core/server/helpers/pagination.js:14:23)
I'm also running the home.hbs. Not sure if that's relevant.
I checked an earlier version of this question here but it was from 2014.

Resources