Save the following HTML as a local file. Something like /tmp/foo.html, then open that in Firefox (I'm on 49.0.2)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script src="http://localhost:1234/a.js"></script>
<script src="http://localhost:1234/b.js"></script>
<script src="http://localhost:1234/c.js"></script>
<script src="http://localhost:1234/d.js"></script>
<script src="http://localhost:1234/e.js"></script>
</body>
</html>
I don't have a server running on port 1234, so the requests don't even successfully connect.
The behavior I'd expect here is for all the requests to fail, and be done with it.
What actually happens in Firefox is all 5 .js files are requested in parallel, they fail to connect, then the last 4 get re-requested in serial. Like so:
Why?
If I boot a server on 1234 that always 404s, the behaviour is the same.
This particular example doesn't reproduce the same behavior in Chrome, but other similar examples is how I originally fell upon this behavior.
EDIT: Here's how I tested this happens when it 404's as well.
$ cd /tmp
$ mkdir empty
$ cd empty
$ python -m SimpleHTTPServer 1234
Then reloaded Firefox. It shows this:
The server actually sees all those requests too (the first 5 arrive out of order because they're requested in parallel, but the last 4 are always b, c, d, e, since they get re-requested in serial).
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /d.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /c.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /b.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /a.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /e.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /b.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /c.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /d.js HTTP/1.1" 404 -
127.0.0.1 - - [02/Nov/2016 13:25:40] code 404, message File not found
127.0.0.1 - - [02/Nov/2016 13:25:40] "GET /e.js HTTP/1.1" 404 -
This has to do with edge-cases that could arise with parallel resource loading, where JavaScript is expected to block other resources from loading.
This behavior starts to get more-clear when you add a delay into the error responses. Here is a screenshot of the Firefox network panel with a 1-second delay added to each request.
As we can see, all 5 scripts were requested in parallel, as modern browser do, to reduce loading times.
However, except for the first one, those scripts that returned a 404 were re-requested, not in parallel but in series. This is almost-certainly to maintain backwards compatibility with some edge-cases with the legacy browser behavior.
Historically, a browser would load and execute one script at a time. Modern browser will load them in parallel, while still maintaining execution order.
So why might this matter?
Imagine if the first script request changed the application state, perhaps setting a cookie or something to authenticate further requests. With the new parallel loading, those scripts would be requested before this state was changed, and assuming the web application is well-enough designed, throw an error.
So the only way to ensure the other resources didn't error because the script did not have a chance to change the state before they were requested is to re-request the resources again.
In fact, this re-requesting behavior is not limited to just scripts, and can also be seen to effect images that error after a script tag that was loaded in parallel.
Potentially, because those images may have failed to load because a prior script did not execute first, they are all re-requested in parallel.
Interestingly, I can't find anything directly about this in the spec, but this section from The Living Standard suggests this behavior may actually violate the spec.
For classic scripts, if the async attribute is present, then the classic script will be fetched in parallel to parsing and evaluated as soon as it is available (potentially before parsing completes). If the async attribute is not present but the defer attribute is present, then the classic script will be fetched in parallel and evaluated when the page has finished parsing. If neither attribute is present, then the script is fetched and evaluated immediately, blocking parsing until these are both complete.
If parsing were actually blocked, then it would seem the following script tags and images should not have been read to be able to load. I suspect that the browsers reconcile this issue by not making the following tags available in the DOM until after execution.
Note:
The exact behavior you will see in these cases may vary a bit. Only those resources that were actually requested in parallel with a script will actually be reloaded. If an image afterwards errors, but it was not requested while a script was loading, then there is no need to re-request it. Additionally, it appears Chrome only triggers this behavior if the potentially-state-changing script does not error, however Firefox triggers this behavior even if it does error.
Related
In my laravel application, I'm using translation through localization javascript. When I'm using it offline the only localhost it's working fine but on the server, it is giving me GET https://my_url.com/js/lang.js net:: ERR_ABORTED 404 and file is accessed by the browser.
If an HTTP error like 404 is thrown, it means your file can't be found.
I have built an Angular 7 application that works nicely when I do the ng serve command from my local mac or from a remote centos server.
This application is using php files that access MySQL data base both served on my google cloud.
Now after doing the gcloud app deploy the last thing I see on the screen is the message:
nebula#0.0.0 start /app
ng serve
sh: 1: ng: not found
and I am dead in the water.
I have tried so many different versions of app.yaml and cloudbuild.yaml file that I feel like i have not learned anything.
I have tried the same thing by starting with the very basic "Hero's" app and get the same issue.
i.e.
ng new xxx
cd xxx
npm install
ng serve
Then I see the default Heros screen in my browser.
I then create this app.yaml file
runtime: nodejs
env: flex
manual_scaling:
instances: 1
resources:
cpu: 1
memory_gb: 0.5
disk_size_gb: 10
service:
xxx
I then try to deploy using:
gcloud app deploy
When this finishes I get the message
Deployed service [xxx] to [https://xxx-dot-project.appspot.com]
When I go to that url, I get:
Error: Server Error
The server encountered an error and could not complete your request.
Please try again in 30 seconds.
The log file for this run is:
gcloud app logs tail -s xxx
Waiting for new log entries...
2019-05-04 15:27:35 xxx[20190504t102436] "GET / HTTP/1.1" 404
2019-05-04 15:27:35 xxx[20190504t102436] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:28:56 xxx[20190504t102436] "GET / HTTP/1.1" 404
2019-05-04 15:32:45 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:32:50 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:06 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:10 xxx[prod] "GET /run HTTP/1.1" 404
2019-05-04 15:33:10 xxx[prod] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:33:16 xxx[prod] "GET /run HTTP/1.1" 404
2019-05-04 15:33:16 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:33:19 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:33:19 xxx[prod] "GET /favicon.ico HTTP/1.1" 404
2019-05-04 15:40:43 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:46 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:50 xxx[prod] "GET /login HTTP/1.1" 404
2019-05-04 15:40:50 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 15:40:53 xxx[prod] "GET / HTTP/1.1" 404
2019-05-04 16:01:50 xxx[20190504t105955] "GET / HTTP/1.1" 500
2019-05-04 16:01:51 xxx[20190504t105955] /bin/sh: 1: ng: not found
2019-05-04 16:06:19 xxx[20190504t105955] "GET / HTTP/1.1" 500
2019-05-04 16:06:20 xxx[20190504t105955] /bin/sh: 1: ng: not found
My question is can someone provide a trivial example of this process where the application runs in the google cloud?
After project is created publish your project on GitHub.
On GitHub Apps you have to install Google Cloud Build now, because it needs access to your repositories.
You also have to create a Google Cloud Project for your new application and enable Cloud Build and Cloud App Engine.
Please refer here for more details:-
https://medium.com/felixklauke/angular-google-cloud-build-app-engine-5e7c2038bdad
When deploying Ng7 application with PHP backend, I would rather advise you to use two different solutions:
Firebase Hosting optimized for SPAs with CDN to deploy the Ng app (change your environment.ts to direct it to the AE endpoints. You will build your application first using ng build and then deploy the artifacts, so there is even no need for the Angular tooling in the resulting package.
Use AppEngine to deploy your backend
Looks like the suggestion to go to firebase was the most useable option.
I am a lot closer to where I want to be and I now see a lot of useful extras.
You can deploy a SPA (like Angular) with an app.yaml similar to this:
runtime: nodejs10
env_variables:
NODE_ENV: production
handlers:
- url: /
static_files: dist/my-project/index.html
upload: dist/my-project/index.html
- url: /
static_dir: dist/my-project
You'd need to build locally your angular project beforehand with a ng build --prod, otherwise you need to set a predeploy command on your package.json, which will be called by gcloud app deploy (e.g. predeploy": "npm run lint && npm run build -- --prod --aot"). Also important, you need to make sure you ignore all files outside of dist folder with .gcloudignore file. This will prevent google cloud to upload those files.
# This file specifies files that are *not* uploaded to Google Cloud Platform
# using gcloud. It follows the same syntax as .gitignore, with the addition of
# "#!include" directives (which insert the entries of the given .gitignore-style
# file at that point).
#
# For more information, run:
# $ gcloud topic gcloudignore
#
.gcloudignore
# If you would like to upload your .git directory, .gitignore file or files
# from your .gitignore file, remove the corresponding line
# below:
.git
.gitignore
# Node.js dependencies:
node_modules/
webpack.config.js
src/
tsconfig.json
readme.md
ssl/
tslint.json
LICENSE
.editorconfig
.dockerignore
.gitignore
https://github.com/mrdulin/angular-apollo-starter includes all those files
I have a feedback form and want to test .fail message (use sweetalert swal method). How artificially to trigger a 500 error when sending form in production environment (in local it`s work)? Thanks for any help)
A 500 error signals a fatal error during execution. To trigger that explicitly, simply make your app fail so it returns a non-0 status code. Throwing an exception will do, but the most straight-forward way is to simply exit with a non-0 status code:
exit 1;
You could also configure your web server to return the HTTP status code directly for specific URLs/requests; for example an .htaccess configuration:
RewriteCond %{REQUEST_METHOD} POST
RewriteRule /my/submit/uri - [R=500]
Code works absolutely fine but when Charles proxy running in background, I get following error in Chrome and Firefox. Charles proxy is running at default settings.
Uncaught Error: Load timeout for modules: jQuery,handlebars
http://requirejs.org/docs/errors.html#timeout require.js:8
F require.js:8
C require.js:13
(anonymous function)
OS: OS X 10.8.4
Charles: v 3.7
Chrome : 28.0.1500.71
Firefox : 22.0
Turns out the issue was related to hosts file. Requirejs was throwing timeout because localhost was taking too long to resolve. Everything works fine after updating hosts file to this:
##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting. Do not change this entry.
##
127.0.0.1 localhost.localdomain
127.0.0.1 localhost
127.0.0.1 username.lmuk.local
255.255.255.255 broadcasthost
::1 localhost
fe80::1%lo0 localhost
More information available here.
I'm having a really weird problem with Rails 3.2. None of the edits I make to 'app/assets/javascripts' has any effect on my app. I even completely removed all files from this directory and the scripts (which should have disappeared) continue to function like before.
Here are the server logs when I've removed all js files have been removed from 'app/assets/javascripts'
Started GET "/article/4" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Processing by ArticleController#show as HTML
Parameters: {"id"=>"4"}
Article Load (0.1ms) SELECT "articles".* FROM "articles" WHERE "articles"."id" = ? LIMIT 1 [["id", "4"]]
VocabularyWord Load (0.2ms) SELECT "vocabulary_words".* FROM "vocabulary_words" WHERE "vocabulary_words"."article_id" = 4 ORDER BY word
CultureNote Load (0.1ms) SELECT "culture_notes".* FROM "culture_notes" WHERE "culture_notes"."article_id" = 4 ORDER BY title
Rendered article/show.html.erb within layouts/article (1.2ms)
Rendered layouts/_footer.html.erb (0.7ms)
Completed 200 OK in 15ms (Views: 11.9ms | ActiveRecord: 0.4ms)
Started GET "/assets/normalize-2.1.1.css?body=1" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /normalize-2.1.1.css - 304 Not Modified (0ms)
Started GET "/assets/sez_core.css?body=1" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /sez_core.css - 304 Not Modified (0ms)
Started GET "/assets/article.css?body=1" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /article.css - 304 Not Modified (0ms)
Started GET "/assets/Acknowledgement-webfont.woff" for 127.0.0.1 at 2013-05-23 15:37:55 +0900
Served asset /Acknowledgement-webfont.woff - 304 Not Modified (0ms)
As you can see, the javascript assets are not being served and yet they continue to function in the app. What's going on???
I tried emptying my browser cache but that doesn't help.
One more thing. The javascript animation I want to edit kind of looks like it's working twice when the file is present. When I completely remove it appears to animate just once.
You might have the assets precompiled and in development it loads twice, once from root/app/assets, and the second from root/public/assets
but let's say you want to have the ability to precompile assets (to test if they will be compiled before deploy them to server) and don't want to bother deleting them each time you do precompile you can rename the prefix of the precompiled assets folder with:
config.assets.prefix = "/assets_dev"
place this in your development.rb and you can run assets_precompile but they won't load in application.
Urls for assets will show <link href="/assets_dev/bootstrap.... and will not look into assets folder.