Showing failed re-building development npm/react/gatsy errors in browser - reactjs

I'm doing development work using gatsby develop. Basically, this script monitors the source code files and re-builds whenever there are changes.
When the re-build succeeds, the browser automatically refreshes and shows the newly built page.
However, when the re-build fails, the browser does nothing, and if I were to manually refresh the webpage, it still loads the last working version, leading to confusion as to why my changes are not reflected.
The only way to tell that the re-build failed is by looking at the terminal output of gatsby develop, which I often hide in order to maximize screen real estate.
Is there a way to for me to just look at the browser and code, and be able to tell that a re-build has failed? The best would be to have the errors show up in the browser, much like the javascript errors, where the re-build was successful, but the code ran into issues in the browser, i.e. TypeErrors, undefined etc.
Thank you.

After #gnujoow's comments, I did a quick check and realized that build failures already show up in the browser.
For some reason, my browser does not always refresh when there are build failures. Thanks #gnujoow

Related

2sxc TimelineJS thumbnails failing? PagePeeker.com API issues?

I have a new deploy of the latest version of TimelineJS app running on 2sxc 9.42 and for reasons I can't seem to figure out or find any useful errors on this, the api.pagepeeker.com seems to be failing or not getting used. You can see at the link below that it has worked sometimes, but as you progress to the later entities, it just gives up and displays the URL for the media without trying to create a thumbnail.
https://www.glencoeparkdistrict.com/News/Special-Projects/Timeline
I have tried restarting the app pool, clearing the cache and deleting and re-adding the items, but am unable to get things working as expected. Is there some way to force the API to retry getting the initial thumbnail?
How can I debug this or get a handle on what is going wrong here?

How to reload "index.html" in angularJS without manual intervention?

I have a website developed in AngularJS, and index.html serves the root of the application.
All the JS and CSS versions are maintained in the index.html itself, which means for any changes to reflect to the user, "index.html" is to be reloaded at the browser.(correct me if I am wrong here).
This is a problem, since there could be chances that the user has a tab opened of our website in his browser and we have published a new release. This release will not be published at user's browser till the time a "Manual refresh" is not triggered and "index.html" is not reloaded and hence bring up the possibility that the user will not be using our latest release.
We have written a framework to reload all resources once a release is detected by sending the latest version from web-server and comparing this with the current version in the browser and trigger a reload automatically. This fix works fine, but the problem again is, how to publish this release first time to all user's browser?
I hope you get my problem? let me know otherwise.
This is not possible. There is no way to force an open page to refresh if it does not already have code to implement that feature. You will have to wait until the user refreshes it themselves, and the browser cache expires, and any intermediate caches between the user and your servers.
I recommend searching to learn about "HTTP caching" if you are not already familiar, as well as "cache busting." In general, you may want to consider making index.html a small file that references your big files in <script> tags, setting the cache control for index.html very low, and use cache busting techniques on your big files.
But for your first release, there is no way to invalidate open tabs or existing caches. If this will cause a problem with your server, read up on "API versioning" for different ways to handle it.

localhost serving old file saves

First, I apologize that I don't fully understand what's going on here. I am new to AngularJS and I am building an app that I am running on localhost:3000. I make changes to my files, and I refresh the localhost:3000 page.
But after a few times of doing this, my changes do not get passed to the server.
Upon inspecting the developer tools, I see that it is using an older version of the file that I have overwritten with new code. No matter how many times I refresh the page, the changes do not get passed to the server.
If I come back after a few hours, it gets all the changes like it should. But only the first time, because every time after that I have the same problem.
I've tried restarting the http-server, I've tried closing and opening the editor, closing and opening the tab, restarting my computer, but none of these fixes the problem permanently.
If you need any more information, I'll edit it into this question. Thanks!
Try clearing your browser cache
Either
ctrl + f5
or
Right click on refresh button and choose the last option (hard reload)
(only in chrome, I guess)
That's almost certainly a caching issue.
You need to look at the network traffic when the page is downloading.
How you do that will depend on the browser you use, but try pressing F12 for a start
Check the RESPONSE headers for anything "cache"
Also check for a Status code of 304 - "Not Modified"
That might reveal to you instructions from the server to the browser to cache the file for a few hours, or that the browser is being told the copy it has is up to date.
Alternatively it might be server side caching, in which case I can't help you much.
One other solution is to change the file reference to include the date modified as a query string.
e.g.
instead of
src="/scripts/myscript.js"
use
src="/scripts/myscript.js?dt={filemodifieddateformyscripts.js}"

angular app suddenly stopped working on chrome

weirdest thing just happened. My angular app was working fine until last night. This morning, when I run it, it doesn't work on Chrome. I haven't modified anything to the code, and I see no errors on the developer console. What makes it even more weird is, the app works just fine all other browsers and even in incognito mode in Chrome. I tried disabling some extensions but that didn't do the trick either. On the surface, what seems to be the problem is that the any paths following the hashtag is not being populated whether I use ui.router or ngroute. Manually typing the paths does not work either. Does anybody have the same problem? What is going on?!
Just clearing cache didn't work. I had to to clear the cookies and plugin data as well. I'm thinking it might be related to recent Auth0 implementation. Will need to look into it so the problem doesn't occur again. For now though, I will close the question.

App Engine doesn't recognize file change

Often times when i make small changes in my python or html file and upload it to Google App Engine, the changes doesn't seem to apply. I tried clearing my browser cache, and refresh, but still can't see the small change i made in my html file. How do i fix this? how do i know that the changes get uploaded?
Major changes seems to get updated just fine. But if i change a character for example, it doesn't get uploaded. I can't seem to see the change after clearing my browser cache. So, i assume it doesn't get uploaded. Anyone has experience with this?
Does the version in app.yaml match the version that's selected as default in the admin console? A mismatch would explain what you're seeing.
I had the same problem in Java with eclipse. I had to clear all my project and close eclipse, reopen it and deploy my app to appEngine..
Hope it help you

Resources