Blank screen when running reactjs webapp in browser - javascript

I'm using Reactjs to create a browser based web application which interacts with MongoDB. Everything was working fine until I added webpack. Now, everything still seems to be working fine except when I try to run the application I get a blank screen.
I've went through my code and can't see what I've done wrong and after doing some online research I believe the issue could be caused by any number of things.
Are there any logs which could be used to help investigate this? Failing that, is there a recommended way to investigate this?

As #konekoya stated, the Browser developer tools can be used to identify issues. In my case it showed the error that was preventing my browser from loading properly, I was then able to troubleshoot and solve my issue off the back of it.

Related

Angular 7: no compile errors, but blank screen

I've been working on an Angular app for a couple months now, and recently I started seeing a condition where the app compiles without errors, but when it reloads in Chrome there's just a blank screen. Also, no errors in the console. When I look at the markup, I can see the tag for my root component, but nothing else renders. I'm fairly certain I should NOT see the tag for the root component, but rather the rendered HTML, right? So it loads index.html, then craps out without any indication of what the issue could be. I have been attempting to move my components out of app.module and into feature modules to clean things up, but when I reverse those changes I still can't get the app to load. I've tried stopping and restarting the live dev server, but still no joy.
I'd post code here, but there's a ton of code in this app, and I don't know where the problem is. Why would Angular refuse to render without any compile or console errors, or any indication of what I can do to fix this?? If anyone has any idea where I can start to look, I'll be happy to post code.
FYI, I'm using Angular CLI 7.2.3, Angular 7.2.2. I'm developing in Visual Studio Code with the latest updates on a Windows 10 machine. I should also say that this has happened a few times during development, but I was always able to figure out what was causing the problem.
As requested, here is my answer. It's a bit embarrassing, given that I've been doing web development for over 20 years, but I forgot that I had disabled some options in the Chrome debugger settings. So Angular WAS sending errors when I got the blank screens, I just couldn't see those errors because I had disabled them. Once I reset the options to the default for Chrome, I was able to see all of the errors causing the page not to render. I realized this when I loaded the app in IE Edge and was able to see the errors in the console. I figured if IE is showing me the errors, I must have disabled them in Chrome.

XAMPP won't update web source files until they're committed to Git on Chrome

I'm trying to create a web application for university. I've been doing fine with XAMPP, using Visual Studio Code and Sublime Text as my editors and so far so good. However, a couple of days ago, I ran into what seemed to be a bug.
While accessing "localhost" on Chrome, the website didn't seem to reflect the last changes to the HTML and CSS code. I also modified some Javascript and it didn't work either, the website stayed the same.
Not even simple things like changing a colour on CSS or adding an alert window on Javascript would appear on the actual web.
Inspecting the website in Chrome shows the old documents and source code, however, when going to the "htdocs" folder at XAMPP, the documents were successfully changed, and no matter what I did, relaunching XAMPP or Chrome didn't fix it either.
I decided to give up for the day and committed the changes to my GitHub repository. To my surprise, I refreshed the website afterwards and it worked.
I thought it was an isolated bug, but it seems like it is not, it happened today again while working on a completely different project.
What's more surprising, this behaviour doesn't seem to happen on Firefox or even Safari, I've tried both and it seems to be fine. However, I prefer the tools included in Chrome, so I'd rather use this one.
Has anyone else had the same issue? If so, how did you fix it? Or in case it is intended to work like that, why is it? I don't see any possible scenario where this could be useful.
Thank you in advance.
This is more of a workaround than a solution really, but you could just try ctrl+F5, this will clear your cache and you're good to go again.
This is probably the single worst Chrome bug when you're doing incremental small changes but Chrome loads it from the cache and not the original files.
What does Ctrl+F5 do?
This ignores the page saved in the cache and does a fresh GET. This should serve well enough as any changes made will be reflected in Chrome on doing so. Or you can manually clear the cache from the Chrome settings.

Why does has my javascript stopped working on live site, but works fine in test environment?

Okay, this is very weird...
http://connecttofriends.com/admin/login
I'm writing an administration control panel and am using a template from Theme Forest (because I didn't sign on to create any graphics, so my client bought it). For the login page listed above, I had to program it to run through Javascript due to the way it was set up.
I got it working and everything. Suddenly, though, something bizarre happened, and Javascript has not worked on that page at all since. None of my Javascript will even appear in Firebug, and I haven't been able to find anything to suggest that there's a Javascript error. Worse yet... on my local test server, it works perfectly fine. It just refuses to work on the live server for whatever reason.
Has anything like this ever happened before? How can I possibly fix this? I can't find anything wrong, and it works fine on my test server. I've at least been able to continue development on the test server, but without the live version working its useless.
I'll post code if people ask, but I don't see much of a reason to under these circumstances because the code actually works.
Any help is appreciated...
jQuery doesn't load.
It tries to fetch jQuery from this address: http://connecttofriends.com/admin/js/jquery-1.7.min.js, and it's not there. Missing a /, to indicate root?
the path you using is not loading, why dont you use jquery link as https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js
this'll also reduce your server hits.
jquery library is not getting loaded.Please check the path of the jquery-1.7.min.js.

Viewing the updated HTML in ie6

I am working with ie6 (unfortunately) and i am having a javascript error. Its wondrous error message gives me a line in the html source, but unfortunately the javascript that does run changes the code for the page(dramatically). So the error that its pointing me to is a closing div tag, not actual code.
Is there a way to view the updated code for the page so I can at least know where my code is breaking?
I should also point out what im developing in.
I am developing a sharepoint 2007 solution for an winxp and ie6 user base. I am working via remote desktop on a sandbox winserver 2008 r2 and can access the site from my terminal. Now, unfortunately in my sandbox server i have ie 8 in which my code works. So im stuck on ideas. If anyone knows how to view the updated source on the page, i would be very grateful.
Thanks.
Edit. I should also mention i dont have admin access on my terminal. So i cant install visual studio. It would take a couple weeks for an issue ticket for temp admin access to install it, and this is sort of important.
If you can't install anything and the error console information isn't meaningful, then about all you can do is start modifying your code until you can find which section is causing the error. The kinds of modifications you can do are as follows:
Comment out a chunk of code in a way that won't cause more errors. If the error goes away, then you know it's in that block of code or something that code calls. Put that block back in and then comment out a piece of it and so on until you narrow down where the problem is.
Start inserting alert("1"), alert("2") prompts into your code with the goal of identifying which alert the error comes before and after until you've eventually tracked down where it is. When you rule out an area, remove the alerts to make it feasible to still run the app.
On a more modern computer (e.g. Vista/Win7) go to Microsoft's site and download both Microsoft Virtual PC and the Windows image for XP with IE6. You can then actually install things into the VM and do real IE6 debugging or at least see what the actual error is.
Find a computer with XP/IE6 on it that you can install real debugging tools on.
Build your own dummy little debug window using a textarea and a couple functions that append text to it. Put that into your browser page and start sprinkling mydebug("Entering function foo") statements throughout your code so you can narrow down which statements occur before and after the error and eventually find the error. This is how I've done some IE6 debugging when it was't worth the trouble of setting up a full-blown debug environment for IE6. This works much better than alerts for some types of problems because it doesn't interrupt the flow of the app or require lots of user intervention and you can scroll back through the history.
If you are using visual studio you can use it to debug js errors in ie.
Go to the Advanced Internet settings in ie and make sure that the two
Disable script debugging settings are turned off (so that script debugging is enabled)
and that the setting
display a notification on every script error is enabled.
If you don't have visual studio installed you can download and install microsofts script debugger (it's free just google it) and use that, tho it is not as easy to work with and won't give you as much useful information

Trouble with iOS and PhoneGap

Just started trying to adapt my html, css, javascript files to iOS using PhoneGap (I've also tried NimbleKit but the result is the same). I have a web app that I originally wrote for the Blackberry Playbook. The app works fine on the Playbook and in Chrome and Safari. However, when I try and run it through XCode with PhoneGap, the app displays on the simulator but does not seem to properly run the database coding (at least I think that is the problem). I do not get any build errors.
From the documentation, NimbleKit seems to just support its own internal SQLite, but PhoneGap seems to support WebDB, which is what my database is written in.
Finally, the simulator doesn't seem to run some global variables I have (I know, I know, don't use global variables) although that could be because they appear just after my DB initialization at the beginning of my javascript file.
Any thoughts or points in the right direction would be very helpful. Even if it is to some documentation which can help me debug the app in the iOS sim.
Thanks in advance.
Cold your problem be related to this?
http://phonegap.com/2012/04/18/ios-5-1-and-the-embedded-uiwebview-with-cordova/
I was facing a similar problem with PhoneGap and iOS Simulator last week,
all the code i wrote seem to have no problem,
anyway i tried this remote web inspector, and tried to create a database remotely using Safari Javascript Console,
bottom line I found that I was not able to create web database using iPhone Simulator,
looks like you need to deploy your app onto your device to make use of it.
I might be wrong, but that was what I found.

Categories