Function timing out with little information in Nuxt3 application - unable to use netlify.toml for redirect

Support
1

Hello,

I have a Nuxt3 application, it is a website for a store. I am using a 3rd party service for the store’s menu - they offer an SEO menu, which requires me to set up a reverse proxy so the menu is loaded under my domain and therefore the menu’s content is part of my site’s SEO.

Nuxt3 seems to create its own _redirects folder on build, overwriting any reverse proxy I try to set up using a netlify.toml file (this was the recommended way of setting this up). I have tried to add the _redirects to my public (static) folder and manually write in the redirect, but it is not working.

Now, I have added server middleware to handle the proxy. Here is my code:

import { createProxyMiddleware } from 'http-proxy-middleware';
import { fromNodeMiddleware, getRequestURL } from 'h3';

const proxy = createProxyMiddleware({
  target: 'https://menus.xxxx.com',
  changeOrigin: true,
  pathRewrite: {
    '^/menu': '/', 
  },
  timeout: 10000, 
  proxyTimeout: 10000,
  headers: {
    'xxxx-store-id': 'my-id-here',
    'xxxx-menu-path': '/menu',
  },
  logLevel: 'debug',
  onError: (err, req, res) => {
    // Custom error handling
    console.error('Proxy error:', err);
    res.writeHead(502);
    res.end('Proxy error occurred');
  },
  onProxyReq: (proxyReq, req, res) => {
    const host = req.headers['host'];
    proxyReq.setHeader('x-forwarded-host', host);

    console.log('Proxying request:', {
      originalUrl: req.url,
      proxyUrl: proxyReq.path,
    });
  },
  onProxyRes: (proxyRes, req, res) => {
    console.log('Received response from target:', {
      statusCode: proxyRes.statusCode,
      headers: proxyRes.headers,
    });
  },
});

export default defineEventHandler((event) => {
  if (event.req.url.startsWith('/menu')) {
    return new Promise((resolve, reject) => {
      proxy(event.req, event.res, (result) => {
        if (result instanceof Error) {
          console.error('Proxy request error:', result);
          reject(result);
        } else {
          console.log('Proxy request completed:', {
            statusCode: event.res.statusCode,
            headers: event.res.getHeaders(),
          });
          resolve(result);
        }
      });
    });
  } else {
    return;
  }
});

This works fine locally, I get the needed result and it happens near instantly. On netlify, the function times out after 10 seconds due to an “unhandled error” - the logs aren’t returning anything useful.

Nov 25, 05:30:15 PM: 2023-11-25T22:30:15.704Z undefined INFO [HPM] Proxy created: / → https://menus.xxxx.com
Nov 25, 05:30:15 PM: 2023-11-25T22:30:15.705Z undefined INFO [HPM] Proxy rewrite rule created: “^/menu” ~> “/”
Nov 25, 05:30:15 PM: 2023-11-25T22:30:15.707Z undefined INFO [HPM] Subscribed to http-proxy events: [ ‘error’, ‘proxyReq’, ‘proxyRes’, ‘close’ ]
Nov 25, 05:30:54 PM: c918be40 Duration: 913.81 ms Memory Usage: 81 MB
Nov 25, 05:30:55 PM: b9218742 WARN [Vue warn]: Component is missing template or render function.
Nov 25, 05:30:55 PM: b9218742 Duration: 90.28 ms Memory Usage: 81 MB
Nov 25, 05:31:07 PM: 34a1225a INFO [HPM] Rewriting path from “/menu” to “/”
Nov 25, 05:31:07 PM: 34a1225a INFO [HPM] GET /menu ~> https://menus.xxxx.com
Nov 25, 05:31:07 PM: 34a1225a INFO Proxying request: { originalUrl: ‘/’, proxyUrl: ‘/’ }
Nov 25, 05:31:17 PM: 34a1225a ERROR Task timed out after 10.01 seconds

We can try increasing the timeout, but I don’t think that will work, since this resolves instantly on my local build. Any ideas? Or any suggestions getting the netlify.toml redirect to work with a Nuxt3 application? I’m stuck here.

2

Nuxt should respect user’s redirects before adding its own. This is a Nuxt limitation. Regarding the function timing out, unfortunately we cannot debug that. You need to debug it by adding more logs to the function at various steps.

But if your use-case is to only proxy, you can always use Netlify Build Plugins to modify the redirects before that gets deployed to Netlify.

3

Thanks for the response. I did see a couple other issues with a similar response when I was investigating.

I am curious, if this is a Nuxt limitation, then why am I able to build locally using the netlify CLI, and the netlify.toml file redirects work correctly? I would assume if this was an issue with Nuxt overwriting the redirects created from the .toml file, then it would happen locally as well.

I will look into build plugins, thank you.

4

Nuxt does not create any redirects locally.

5

Got it, thank you.

I added a netlify build plugin to modify the _redirects file. It looks like the _redirects file is configured correctly but it still does not work, it continues to redirect to my error page.

6

The correct way to modify the redirects is here: Create Build Plugins | Netlify Docs. You need to modify the redirects array to push your redirect above Nuxt’s redirect.

7

I have done this. I even changed the build plugin to test a simple redirect without any headers, just to be sure there was nothing else causing an issue. My _redirects looks correct, my redirect is above Nuxt’s redirects, but it still does not work. I am reaching out to Nuxt community for support on this as well, if I can manage to find a solution I will provide it here for anyone who may run into this in the future.

8

If you can put all this in a minimal reproduction, happy to take a look.