Dynamic Subdomains in Nuxt3 - vuejs3

We have an interesting challenge with our Nuxt3 based statically generated sites.
Essentially, we are a SaaS platform, and generate a website for each user, with the url pattern - xyz.example.com.
We have managed to make this work quite well. However, facing one challenge that we are unable to fix currently -- hmr has stopped working in our development stack.
Console is full of the following error:
web-socket.mjs?v=2e7270bf:56 WebSocket connection to 'ws://localhost:4000/ws' failed:
connect # web-socket.mjs?v=2e7270bf:56
web-socket.mjs?v=2e7270bf:5 [Content] WS Error: Event {isTrusted: true, type: 'error', target: WebSocket, currentTarget: WebSocket, eventPhase: 2, …}
warn # web-socket.mjs?v=2e7270bf:5
onError # web-socket.mjs?v=2e7270bf:30
error (async)
connect # web-socket.mjs?v=2e7270bf:59
setTimeout (async)
connect # web-socket.mjs?v=2e7270bf:44
onClose # web-socket.mjs?v=2e7270bf:38
web-socket.mjs?v=2e7270bf:4 [Content] WS reconnecting..
web-socket.mjs?v=2e7270bf:4 [Content] WS connect to ws://localhost:4000/ws
Any ideas on how to go about fixing this?
Currently -- to get nuxt to work in local dev stack, we have to add
xyz.example.com 127.0.0.1
in our /etc/hosts file. However, unable to figure out to get the WS connection failure errors to stop.
Any help would be much appreciated.

Related

Progressive Web App: The FetchEvent for "<URL>" resulted in a network error response: the promise was rejected

I am seeing the following errors in the console of my PWA:
The FetchEvent for "https://static.cloudflareinsights.com/beacon.min.js" resulted in a network error response: the promise was rejected.
The FetchEvent for "https://www.google-analytics.com/analytics.js" resulted in a network error response: the promise was rejected.
It seems that external scripts have problems being fetched by workbox? The website is a next.js app and i am using next-pwa to turn it into a PWA. Here is the pwa-config for next-pwa: next-pwa config
Does anyone know how to fix this?
This is fairly common if you have a ad/tracking blocker extension installed, or if your browser has built-in blocking. A Workbox-powered service worker will not do anything to work around this blocking.

How to use Firebase behind Firewall / Proxy?

We are running a simple application that connects to Firebase are reads some data. It fails to connect with the following timeout error:
#firebase/database: FIREBASE WARNING: {"code":"app/invalid-credential",
"message":"Credential implementation provided to initializeApp()
via the \"credential\" property failed to fetch a valid Google OAuth2 access token
with the following error: \"Failed to parse access token response: Error: Error
while making request: connect ETIMEDOUT
We are behind Firewall / Proxy and it appears that is blocking traffic to/from Firebase and hence failed connection. My question is what ports need to be opened and to what destination URLs to make this application work normally?
Any help will be much appreciated!
Finally, after struggling with the issue for several days got it working. Needed to contact network team and request to perform following actions:
Open ports 5228, 5229, 5230 for Firebase communication.
Opened communication at proxy level between the source server and following URLs:
fcm.googleapis.com
gcm-http.googleapis.com
accounts.google.com
{project-name}.firebaseio.com
Added following code in my node.js application:
var globalTunnel = require('global-tunnel-ng');
globalTunnel.initialize({
host: '<proxy-url>',
port: <proxy-port>,
//proxyAuth: 'userId:password', // optional authentication
sockets: 50 // optional pool size for each http and https
});
Installed module global-tunnel-ng:
npm install global-tunnel-ng
It solved the my problem and I hope it can help others too. :-)
I used Wireshark to monitor a local install of a Node.js application using the Admin SDK for firestore. I also referenced this list by Netify. This is what I found:
*.firebaseio.com
*.google.com
*.google-analytics.com
*.googleapis.com
*.firebase.com
*.firebaseapp.com

SignalR negotiate fails (Bad Gateway)

Someone any idea, I’ve been struggling with this for some time.
I'm using SignalR (Asp.net 5). when I try to debug local (ISS 10.0 express) everything is working fine. SignalR is working (Long poll).
Now when I publish the app to Azure it I can access : .azurewebsites.net/signalr/hubs
but I cannot access .azurewebsites.net/signalr/hubs/negotiate
it returns:
The specified CGI application encountered an error and the server terminated the process.
When my web app calls $.connection.hub.start() it will fail.
GET XHR http://xxxx.azurewebsites.net/signalr/negotiate [HTTP/1.1 502 Bad Gateway]
I’m running out of idea's. Don't know how I can get more debug information.
Small selection of my ‘already tried’ list:
Set $.connection.hub.url path manual to http://xxxx.azurewebsites.net/signalr/
Enable/Disable websockets
Removed forwardWindowsAuthToken from the web.config httpPlatform
EDIT:
Now getting more details on this error:
CryptographicException: The data protection operation was unsuccessful. This may have been caused by not having the user profile loaded for the current thread's user context, which may be the case when the thread is impersonating.
Still absolutely no idea how to solve this!
Solved by using appBuilder.UseAesDataProtectorProvider();
(from Owin.Security.AesDataProtectorProvider;)
I have no idea if this is the best solution.

Browser-sync not loading ASP.NET 5 website using proxy

Browsersync seems stuck loading the website when run in proxy mode. When using the same config but another website it does work, so it must be something in my local setup but I have been unable to figure out what.
I'm running it on Windows, proxying a ASP.NET 5 application which runs on localhost:5000. Directly navigating towards this location works fine. Trying to hook into the pipeline on ASP.NET's side signals the html is exported over the pipeline but the browser never receives a response and stays pending.
The logging output indicates no difference besides a different session and the obvious proxy url if I run it on another website, where also other sites on localhost seems to work (on IIS).
Configuration used (gulp):
gulp.task('browsersync', function () {
browserSync({
proxy: 'localhost:5000',
notify: true,
open: true,
logLevel: 'debug'
});
});

reCaptcha validation with timeout exception

I am using reCaptch in my MVC 3 web app running in the localhost.
Things were working fine few weeks back but suddenly failing.
Suddenly getting this error.
if(!ReCaptcha.Validate(_config.RecaptchaPrivateKey)){ <-- times out here
//process other fields in the form
}
As soon as I fill the form and hot submit I get this error :
The operation has timed out
Description : An unhandled exception occurred during the execution of the current ...
Exception Details : System.Net.WebException: The operation has timed out
Is this a proxy issue?
Is this because my site on localhost runs on port 3316?
localhost:3316/user/signup
I saw some posts that suggests that reCAPTCHA expects port 80 but my app runs on port 3316
What can be the issue?
Thanks
I got around this by creating proxy class that inherits IWebProxy.
Then specifying to use this proxy when internal, I had to transform it out for other environments that didn't need to use it.
See this question and accepted answer:
Is it possible to specify proxy credentials in your web.config?
The above link took some finding, so I favourited it for future use.

Resources