api.Navigator.sendBeacon - Browser support: should warn about payload size limits

[ajhyndman]

What type of issue is this?

Missing compatibility data

What information was incorrect, unhelpful, or incomplete?

Both Chromium and Safari implement strict payload size limits on data sent via sendBeacon or fetch with keepalive: true.

This is really poorly documented across the web, and extremely difficult to diagnose.

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet), Safari

What did you expect to see?

A note in this article that many browsers impose strict size limits on beacon requests could have saved me days of investigation.

Did you test this? If so, how?

I spent the last several days investigating an issue that turned out to be a symptom of this behaviour.

To reproduce is pretty simple though, simply attempt to call sendBeacon in chrome with a request body larger than 64 kB.

navigator.sendBeacon("http://google.com", new Array(100000).join("Z"));

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

I found this comment buried in a w3c pull request that references the limitation:

w3c/beacon#39 (comment)

Do you have anything more you want to share?

No response

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon

MDN metadata

MDN page report details

• Query: api.Navigator.sendBeacon
• Report started: 2023-09-15T23:09:46.198Z

[ivancuric]

Bumping this

[caugner]

The Beacon spec mentions:

If the amount of data to be queued exceeds the user agent limit (as defined in HTTP-network-or-cache fetch), this method returns false; a return value of true implies the browser has queued the data for transfer.

The linked Fetch spec mentions:

If the sum of contentLength and inflightKeepaliveBytes is greater than 64 kibibytes, then return a network error.

On https://example.com/, I can reproduce this behavior in Chrome and Safari:

• navigator.sendBeacon("https://example.com", new Array(65537).join("Z")); returns true
• navigator.sendBeacon("https://example.com", new Array(65538).join("Z")); returns false

In Safari, I get the following error message in the console:

Beacon API cannot load https://example.com/. Reached maximum amount of queued data of 64Kb for keepalive requests

In Firefox, navigator.sendBeacon("https://example.com", new Array(65538).join("Z")); returns true, even if I drastically increase the size.

[caugner]

I would suggest adding a subfeature enforces_payload_limits.

[caugner]

We discussed this in today's BCD meeting:

Given that this is a new limitation, we don't consider it a BCD feature. We could mention it in notes, but this would require identifying the Chrome/Safari versions that added support.

Instead, we think this should be addressed by documenting the limit in content. I will file a content issue.