I have an Angular 10 application hosted in PCF. NGINX is used as a reverse proxy with SSL & DNS implemented.
Our website has almost 3k+ users daily but everyday around 20-30 users complain about a blank page error
Note: This is happening mostly in Chrome and I tried disabling service worker from my code without success. It occurs randomly and once the browser cache is cleared the website starts working fine. I am unable to reproduce the issue in my system.
Error message:
Network: 
Console: 
This is the request header for which 400 Bad Request (from Service worker) is thrown
Request URL
https://xxx.xxx.com/search
Request Method: GET
Status Code: 400 Bad Request (from service worker)
Referrer Policy: strict-origin-when-cross-origin
Response Headers
Connection: keep-alive
Content-Length: 620
Content-Type: text/html
Date: Thu, 06 May 2021 04:46:34 GMT
Server: Tengine/2.1.0
Request Headers
Provisional headers are shown
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="90", "Google Chrome";v="90"
sec-ch-ua-mobile: ?0
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36
My NGINX config looks like this :
worker_processes 1;
error_log /u01/enginex_1/logs/error.log;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/json;
sendfile on;
keepalive_timeout 65;
upstream ui_page{
server xx.xxx.xxx.xxx:xxx1;
server xx.xxx.xxx.xxx:xxx2;
}
server {
listen xxx1;
server_name xx.xxx.xxx.xxx;
location / {
set $remaddr $upstream_addr;
if ($upstream_addr != "xx.xxx.xxx.xxx") {
set $remaddr xxx.xxx.com;
}
proxy_pass https://$remaddr;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect;
}
location @handle_redirect {
set $saved_redirect_location xxx1.xxx.com;
proxy_pass https://$saved_redirect_location;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect_err;
}
location @handle_redirect_err {
try_files $uri $uri/error.html = 404;
}
}
server {
listen xxx2;
server_name xx.xxx.xxx.xxx;
location / {
set $remaddr $upstream_addr;
if ($upstream_addr != "xx.xxx.xxx.xxx") {
set $remaddr xxx1.xxx.com;
}
proxy_pass https://$remaddr;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect;
}
location @handle_redirect {
set $saved_redirect_location xxx.xxx.com;
proxy_pass https://$saved_redirect_location;
proxy_intercept_errors on;
recursive_error_pages on;
error_page 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 420 422 423 424 426 428 429 431 444 449 450 451 500 501 502 503 504 505 506 507 508 509 510 511 = @handle_redirect_err;
}
location @handle_redirect_err {
try_files $uri $uri/error.html = 404;
}
}
server {
listen yyyy;
server_name xx.xxx.xxx.xxx;
large_client_header_buffers 4 32k;
location / {
proxy_pass http://ui_page;
}
}
server {
listen zzzz ssl;
server_name xx.xxx.xxx.xxx;
large_client_header_buffers 4 32k;
ssl_certificate /xxxx.pem;
ssl_certificate_key /xxxx.key;
location / {
proxy_pass http://ui_page;
}
}
}
ngsw-config.json
{
"$schema": "./node_modules/@angular/service-worker/config/schema.json",
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/favicon.ico",
"/manifest.webmanifest",
"/*.css",
"/*.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**",
"/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
],
"urls": ["https://fonts.googleapis.com/**"]
}
}
]
}
server.js
/*jshint node:true*/
'use strict';
var express = require('express');
var compression = require('compression');
var app = express();
app.use(compression());
// var serveStatic = require('serve-static')
var path = require('path');
var port = process.env.PORT || 3000;
app.use(express.static('.'));
// app.use(serveStatic(express.static('dist')));
// app.use("/*", express.static("index.html"));
app.get('/*', function(req, res, next) {
//Path to your main file
res.setHeader('X-UA-Compatible', 'IE=Edge');
res.status(200).sendFile(path.join(__dirname + '/index.html'));
});
console.log('About to crank up node');
app.listen(port, function() {
console.log('Express server listening on port ' + port);
});
package.json
{
"name": "ui-server",
"version": "1.0.0",
"description": "server to run ui",
"main": "app.js",
"scripts": {
"start": "node --max-http-header-size=81000 server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "chan",
"license": "ISC",
"dependencies": {
"compression": "^1.7.3",
"express": "^4.14.0",
"serve-favicon": "^2.3.2"
},
"engines": {
"node": ">=10.0.0",
"npm": ">=6.0.0"
}
}
Thanks in advance.