inertiajs / inertia-laravel

The Laravel adapter for Inertia.js.
https://inertiajs.com
MIT License
2.03k stars 227 forks source link

nginx header limitation #529

Closed dnkmdg closed 1 year ago

dnkmdg commented 1 year ago

Opening this issue to aid others running into a somewhat bizarre issue, might also be cause for some documentation.

When applying the @inertia directive the yielded result contains both the page template and links for all dynamically fetched modules and styles. Recently we started seeing 502 Bad Gatewayerrors when navigating directly to certain routes in our app, but not when arriving at the same routes from programmatic navigation ie. SPA navigation. After some debugging we found that all of the rendered <script> tags caused response header section links to blow up, thereby causing nginx to fail with a 502.

The solution for this is to increase nginx buffers:

proxy_buffer_size   4096k;
proxy_buffers   128 4096k;
proxy_busy_buffers_size   4096k;

A single response could easily look like this, where the "link" section alone is too much for the standard configuration of nginx to handle.

server  nginx
content-type    text/html; charset=UTF-8
vary    Accept-Encoding
cache-control   no-cache, private
date    Wed, 21 Jun 2023 13:39:41 GMT
link    <https://my-production-inertia-app.io/build/assets/app-70b4ce10.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/CoolCard-15f160be.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/AuthenticatedLayout-55f1c4db.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/FileUpload-aad0cdad.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/ImageGallery-6f214b75.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/CoolSelect-8cfc798d.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/Show-f86228ba.css>; rel="preload"; as="style", <https://my-production-inertia-app.io/build/assets/app-af524a63.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/Show-d2c761ab.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/GlobalSearchModal-038356f7.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/TextInput-7c60560f.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/UiStore-1d771fae.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/Toast-46e71053.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/BaseButton-9b394d38.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/PrimaryButton-2cf62d91.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/UnderlinedLink-6a468b5c.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/AnonDialog-e37a92bf.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/OutlineButton-76aafa00.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ImageControls-ccbc8a04.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/CoolCard-30520ede.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/InputError-74da528d.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/index-41b1ba78.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ShippingItem-ce415210.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/vue-drawing-canvas.esm-f7af890c.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/file-2ba84ccc.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/date-cdab97b8.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/WhiteButton-30bc2cb4.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/PickingLayout-29a854e6.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/use-tracked-pointer-b8f4a78b.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/use-resolve-button-type-3ac7b00a.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/use-controllable-e9af45ec.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/mitt-3a6e1e85.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/_plugin-vue_export-helper-c27b6911.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/FileUpload-5dd25a12.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ImageGallery-645e2648.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/DangerButton-84d21b86.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/CoolSelect-b9092254.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ApplicationLogo-6e0281ba.js>; rel="modulepreload", <https://my-production-inertia-app.io/build/assets/ToastArea-73aadd4a.js>; rel="modulepreload"
vary    X-Inertia
trippo commented 1 year ago

I have the same problem... a route gives me a 502 Bad Gateway error... If I remove a component and put its code directly inside the page content all work fine...

But this configuration don't solve the problem...

proxy_buffer_size   4096k;
proxy_buffers   128 4096k;
proxy_busy_buffers_size   4096k;

If I use the same component on other pages works fine!

How can I solve this problem?

trippo commented 1 year ago

I solve with

    fastcgi_buffers 128 4k;
    fastcgi_buffer_size 12k;
    fastcgi_busy_buffers_size 16k;
jessarcher commented 1 year ago

Thanks for sharing your insights! Going to close this one but feel free to continue the discussion :slightly_smiling_face:

FerVillanuevas commented 9 months ago

The proxy solution works fine for me with Octane

proxy_buffer_size 4096k; proxy_buffers 128 4096k; proxy_busy_buffers_size 4096k;

thanks @trippo

rstefanic commented 6 months ago

This was a life safer. Thank you @dnkmdg. I have been banging my head against a wall trying to fix it for a couple of days now. In my case, we weren't getting a 502 error. The response was a blank page with no content and a 200 status response. The HTTP message body was 0 bytes every time.

It wasn't until I added an extra header that I got the 502 error and then stumbled upon this post. I checked the header size that page was returning, and the header was 4.6kb! Our machine running the Inertia application had the default fastcgi_buffer_size of 4k (which is the NGINX default taken the host machine's page size). Bumping it up to 8k is what did the trick for us and everything's working smoothly!

fastcgi_buffer_size 8k;
GDanielRG commented 3 months ago

This was a life safer. Thank you @dnkmdg. I have been banging my head against a wall trying to fix it for a couple of days now. In my case, we weren't getting a 502 error. The response was a blank page with no content and a 200 status response. The HTTP message body was 0 bytes every time.

It wasn't until I added an extra header that I got the 502 error and then stumbled upon this post. I checked the header size that page was returning, and the header was 4.6kb! Our machine running the Inertia application had the default fastcgi_buffer_size of 4k (which is the NGINX default taken the host machine's page size). Bumping it up to 8k is what did the trick for us and everything's working smoothly!

fastcgi_buffer_size 8k;

Was having random Nginx errors, the fastest way I found how to replicate it was going to a specific page and just reloading and i would get the nginx error. So its different if inertia loads the page initially with html or just sends the json on subsequent requests. Either way this fixed it and you are a savior for me and 2 of my customers. Thanks!

aigletter commented 1 month ago

It was helpful for me. I needed both options. I used Nginx Proxy Manager and it was solved with fastcgi* directives for nginx of my application and proxy* directives for Nginx Proxy Manager. Thank you all very much!