routerProps loop to 500
Khazl opened this issue · 9 comments
Hi, I've an issue within following scenario:
I downloaded you demo setup and it runs pretty smooth.
Then I added one more application to the demo apps (based on the nuxt framework). I also added a new route for this.
But when I try to access it via browser, I run into an error 500 and in the ilc container log I see a kind of loop.
It begins like this: /nuxt/?routerProps=eyJiYXNlUGF0aCI6Ii9udXh0IiwicmVxVXJsIjoiL251eHQiLCJmcmFnbWVudE5hbWUiOiJudXh0X19hdF9fYm9keSJ9&appProps=e30%3D
and with every loop the routerProps argument becomes longer and longer until the loop breaks.
At the end it looks like: /nuxt/?routerProps=eyJiYXNlUGF0aCI6Ii9udXh0IiwicmVxVXJsIjoiL251eHQvP3JvdXRlclByb3BzPWV5SmlZWE5sVUdGMGFDSTZJaTl1ZFhoMElpd2ljbVZ4VlhKc0lqb2lMMjUxZUhRdlAzSnZkWFJsY2xCeWIzQnpQV1Y1U21sWldFNXNWVWRHTUdGRFNUWkphVGwxWkZob01FbHBkMmxqYlZaNFZsaEtjMGxxYjJsTU1qVXhaVWhSZGxBelNuWmtXRkpzWTJ4Q2VXSXpRbnBRVjFZMVUyMXNXbGRGTlhOV1ZXUkhUVWRHUkZOVVdrcGhWR3d4V2tab2IwMUZiSEJrTW14cVlsWmFORlpzYUV0ak1HeHhZakpzVFUxcVZYaGFWV2hTWkd4QmVsTnVXbXRYUmtweldUSjRRMlZYU1hwUmJuQlJWakZaTVZVeU1YTlhiR1JHVGxoT1YxWlhVa2hVVldSSFVrWk9WVmRyY0doV1IzZDRWMnRhYjJJd01VWmlTRUpyVFcxNGNWbHNXbUZPUmxwellVVjBhazFIZUhoWmFrcHpWRlV4Y1ZaWWFHRldWMmhUV2tkNFFtVnNUblZYYlhSWVVtdHdlbGRVU2pSUk1sWllVMWh3VW1KdVFsSldha1phVFZaVmVVMVlUbGhpUjFKSFZHeG9UMVl4V2xoVmEyaFZWbGRTU0ZWcldrOVdWbVJ5WTBkb1YxSXpaRFJXTW5SaFlqSkpkMDFWV21sVFJVcHlWRmN4TkdOV2JITlhiVVpQVW14d2VsbFZWakJoYXpGSVpVaG9XbUZyY0hwV1JsVjRZMVphV1dGSFJsZFdNbWhVVjJ0a05GRnRWbk5VYmxaWVlsaFNXVlZ0ZEhkbGJHUlZVMnBTVWsxc1dsbFZNV2gzVlcxS2RWRnNTbGRoYTFwaFZGWmFWbVZWTVZsVWJHaHBVakZLU0ZaSGVHOVVNVmw0VjJ4b1ZtRXlhRlpXYkdSVFUwWldjbGRyT1ZkV2JWSjVXVEJrYjFZeFNYcGFSRkpYVFc1U2FGbHFTa3BrTURGV1YyMXNWRkpWY0hsV1J...
And an error from tailor Error: Request fragment error. statusCode: 431; statusMessage: Request Header Fields Too Large
If I connect to the ilc container and try to fetch the nuxt SRR URL with wget, the response looks fine.
Do you have any idea why I'm running into such a loop?
Some Settings:
- App:
- Name: @portal/nuxt
- SSR URL: http://localhost:3000/nuxt
- Props: {}
- Route:
- Order: 40
- Rote: /nuxt/*
- Slot: body
- App Name: @portal/nuxt
- Nuxt Server
- Listening on http://172.26.0.3:3000/nuxt/
Hi! Could you please provide a repo with code that reproduces the issue & guide how to run it?
Also screen recording would help to get a better understanding of the issue you're facing with.
I looks like you have redirect loop somewhere... routerProps are getting bigger exactly because of this:
- Initial
routerPropsyou provided after base64 decode:
{"basePath":"/nuxt","reqUrl":"/nuxt","fragmentName":"nuxt__at__body"} - Last
routerPropsyou provided after base64 decode:
{"basePath":"/nuxt","reqUrl":"/nuxt/?routerProps=eyJiYXNlUGF0aCI6Ii9udXh0IiwicmVxVXJsIjoiL251eHQvP3JvdXRlclByb3BzPWV5SmlZWE5sVUdGMGFDSTZJaTl1ZFhoMElpd2ljbVZ4VlhKc0lqb2lMMjUxZUhRdlAzSnZkWFJsY2xCeWIzQnpQV1Y1U21sWldFNXNWVWRHTUdGRFNUWkphVGwxWkZob01FbHBkMmxqYlZaNFZsaEtjMGxxYjJsTU1qVXhaVWhSZGxBelNuWmtXRkpzWTJ4Q2VXSXpRbnBRVjFZMVUyMXNXbGRGTlhOV1ZXUkhUVWRHUkZOVVdrcGhWR3d4V2tab2IwMUZiSEJrTW14cVlsWmFORlpzYUV0ak1HeHhZakpzVFUxcVZYaGFWV2hTWkd4QmVsTnVXbXRYUmtweldUSjRRMlZYU1hwUmJuQlJWakZaTVZVeU1YTlhiR1JHVGxoT1YxWlhVa2hVVldSSFVrWk9WVmRyY0doV1IzZDRWMnRhYjJJd01VWmlTRUpyVFcxNGNWbHNXbUZPUmxwellVVjBhazFIZUhoWmFrcHpWRlV4Y1ZaWWFHRldWMmhUV2tkNFFtVnNUblZYYlhSWVVtdHdlbGRVU2pSUk1sWllVMWh3VW1KdVFsSldha1phVFZaVmVVMVlUbGhpUjFKSFZHeG9UMVl4V2xoVmEyaFZWbGRTU0ZWcldrOVdWbVJ5WTBkb1YxSXpaRFJXTW5SaFlqSkpkMDFWV21sVFJVcHlWR
Here is a recording of the registry settings:
https://drive.google.com/file/d/1jkXljaCGF0I87Dqzw3M9kM0SbumnJjgE/view?usp=sharing
And here the demo apps repo. It's basically your demo apps with an additional one: /apps/nuxt/
https://github.com/Khazl/ilc-demo-apps-nuxt
Recording from browser: https://drive.google.com/file/d/1grU_NFCme7rLKcZE92qEMTekS4AnopUo/view?usp=sharing
Full log of ilc container: https://drive.google.com/file/d/1ZoeCRa18raki7hwQxWASwRB-LIlXvJGT/view?usp=sharing
wget in ilc container:
Guidos-MBP:ilc guidogasper$ docker exec -it ilc_ilc_1 sh
/codebase # wget -O - http://localhost:3000/nuxt
Connecting to localhost:3000 (127.0.0.1:3000)
writing to stdout
<div data-server-rendered="true" id="__nuxt"><!----><div id="__layout"><div class="container"><div><h1>Nuxt Project</h1></div></div></div></div><script>window.__NUXT__={layout:"default",data:[{}],error:null,serverRendered:true,env:{APP_NAME:"New Project"}};</script><script src="/nuxt/dist/dc0d9f27ec5a88b6a90c.js" defer></script><script src="/nuxt/dist/68ecf2dbfbd59ee4fe75.js" defer></script><script src="/nuxt/dist/77561ce73ece67c4fa59.js" defer></script><script src="/nuxt/dist/08989342d10cf94d29e9.js" defer></script><script src="/nuxt/dist/6f31fb8de43a8b82db11.js" defer></script>
- 100% |*****************************************************************************************************************************************| 587 0:00:00 ETA
written to stdout
(You may need to refresh the error page to see the error logs and broken url in browser. When you target the path /nuxt directly, not via the navbar, the error logs should appear directly.)
From what I see in ilc container logs your Nuxt app responds with 301 HTTP code which forces ILC to respond with 301 to browser so you have page reload which makes ILC to do another request to the app and you have a loop as app again responds with 301 code.
I also observe that your app from tries to redirect me from /nuxt/ to /nuxt/en for example... See video https://take.ms/TllU8 This may be an issue... Try to dig deeper there & also look for similar issues.
$ curl -v -H 'Accept-Language: en-US,en;q=0.9,ru;q=0.8,uk;q=0.7' http://localhost:3000/nuxt/
* Trying ::1:3000...
* TCP_NODELAY set
* Connection failed
* connect to ::1 port 3000 failed: Connection refused
* Trying 127.0.0.1:3000...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET /nuxt/ HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.66.0
> Accept: */*
> Accept-Language: en-US,en;q=0.9,ru;q=0.8,uk;q=0.7
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 302 Found
* Added cookie i18n_redirected="en" for domain localhost, path /, expire 1621956733
< Set-Cookie: i18n_redirected=en; Path=/; Expires=Tue, 25 May 2021 15:32:13 GMT; SameSite=Lax
< Location: /nuxt/en
< Date: Mon, 25 May 2020 15:32:13 GMT
< Connection: keep-alive
< Transfer-Encoding: chunked
<
* Connection #0 to host localhost left intact
Pay attention that redirect happens only if I send Accept-Language header so your wget requests may show you the wrong data.
Also during initial SSR integration I would recommend you to turn off JS in browser as you try to open your app through ILC to avoid any confusion between server side redirects & client side location changes.
Thanks for the tip. It looks like that the i18n module causes this /en redirection. I removed the module and the curl request looks better now:
/codebase # curl -v -H 'Accept-Language: en-US,en;q=0.9,ru;q=0.8,uk;q=0.7' http://localhost:3000/nuxt/
* Trying 127.0.0.1:3000...
* TCP_NODELAY set
* Connected to localhost (127.0.0.1) port 3000 (#0)
> GET /nuxt/ HTTP/1.1
> Host: localhost:3000
> User-Agent: curl/7.67.0
> Accept: */*
> Accept-Language: en-US,en;q=0.9,ru;q=0.8,uk;q=0.7
>
* Mark bundle as not supporting multiuse
< HTTP/1.1 200 OK
< ETag: "20e-3oCNc/Oil5ya2su+009EE+VzAaY"
< Content-Type: text/html; charset=utf-8
< Accept-Ranges: none
< Content-Length: 526
< Vary: Accept-Encoding
< Date: Tue, 26 May 2020 07:35:12 GMT
< Connection: keep-alive
<
But the ILC logs still look the same :-/
You didn't notice any misconfiguration in my videos, right?
(I updated the demo app repo)
Update: I added a serverMiddleware to the nuxt app. A simple console.log on the request.
I figured out, that this redirect loop was caused by a trailing slash 😓😓😓
The ilc log looks fine now. With disabled JS I also see the correct / expected composition.
Next error I run into is because of some CORS betwen localhost and localhost:3000 😅
Here we go.
Glad to see it works for you 👍