Fetch request not working with deployment protection

I use deployment protection for all deployments except the current production deployment. To handle errors in my backend I have some error classes that send a POST request using the fetch api to an error logging endpoint in my app. This fetch request is made from the error class constructor. This works perfectly in local development but not in protected deployments. I have tried to add the bypass protection header, which allows me to bypass the protection for test requests sent via postman, but for some reason the requests don't work when they are sent from the error constructor, which is called from a nextjs server action (ie a serverless function). I added logging to my middleware and I can see, that the POST request is never received neither in middleware or the actual endpoint. It just never resolves and hangs infinitely unless i add a timeout signal.

The fetch request is made thus

const url = new URL("/api/v1/error/log", getEnvironmentUrlBase())
const res = await fetch(url, {
				method: "POST",
				body: JSON.stringify(this.data),
				headers: {
					"Content-Type": "application/json",
					"X-LoggingApiKey": `${process.env.LOGGING_API_KEY}`,
					"x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET ?? "", 
				},
			})

Again this code works perfectly in local development but the fetch request is never arriving in preview with deployment protection. I have verified that this works fine with deployment protection is disabled. Also I don't use the VERCEL_URL system environment variable, which according to the docs doesn't work with deployment protection, i use the host header to send the request to the same origin as the incoming request:

export function getEnvironmentUrlBase() {
	if (process.env.NODE_ENV === "development") {
		return `http://localhost:3000`
	}
	
	return `https://${headers().get("host") || BASE_PROD_URL}`
}

Based on a bunch of logging statements i have verified, that the request is formatted correctly and sent to the right url with the right api key and protection bypass header.

I hope that someone can help identify the problem, because I am out of ideas. Let me know if other information is needed. Thanks in advance

Vercel Alum

Hi, ! Welcome to the Vercel Community

Thanks for being patient with us! Let me try and help with some pointers.

Modifying your fetch request Instead of constructing a full URL, try using a relative path for your API endpoint. Here's how you might modify your fetch request:

const res = await fetch("/api/v1/error/log", {
  method: "POST",
  body: JSON.stringify(this.data),
  headers: {
    "Content-Type": "application/json",
    "X-LoggingApiKey": `${process.env.LOGGING_API_KEY}`,
  },
});

Adjusting your getEnvironmentUrlBase function Since you're making the request from a server-side context, you might not need to construct a full URL. You could modify your function to return just the path for non-development environments:

export function getEnvironmentUrlBase() {
  if (process.env.NODE_ENV === "development") {
    return `http://localhost:3000`;
  }
  
  return "";  // Just return an empty string for non-development environments
}

Verifying middleware behavior Since you mentioned that you've added logging to your middleware and the request never reaches it, it's possible that the request is being blocked before it even reaches your application. Double-check your project settings and make sure there are no conflicting rules or configurations that might be preventing the request from reaching your application.

If you have the time, creating a minimal producible example might help us dig deeper. Let us know how you get on!

Thanks for your reply. I have tried your suggested solutions previously and again after your reply, but they both result in an invalid url error in the fetch request. I'll slap together a minimal producible example asap. Should I post a GitHub link in a reply here or how should I share it with you?

EDIT: I have created a minimal producible example (https://github.com/nordbobirk/vercel-example). It works as expected in local development but when I deploy it on Vercel it doesn't. In both production and preview the request is created correctly but is never received in middleware or the endpoint. This leads me to believe that it might be an issue with same site requests in general and not with deployment protection. I hope that the Vercel team is able to investigate further to help me find the solution to this issue. Thanks in advance!

This topic is closed. It no longer accepts new replies.

const url = new URL("/api/v1/error/log", getEnvironmentUrlBase()) const res = await fetch(url, { method: "POST", body: JSON.stringify(this.data), headers: { "Content-Type": "application/json", "X-LoggingApiKey": `${process.env.LOGGING_API_KEY}`, "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET ?? "", }, })

const res = await fetch("/api/v1/error/log", { method: "POST", body: JSON.stringify(this.data), headers: { "Content-Type": "application/json", "X-LoggingApiKey": `${process.env.LOGGING_API_KEY}`, }, });

export function getEnvironmentUrlBase() { if (process.env.NODE_ENV === "development") { return `http://localhost:3000`; } return ""; // Just return an empty string for non-development environments }