Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support for sendBeacon requests #651

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

feat: support for sendBeacon requests #651

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3d927d9
feat: support for sendBeacon requests
bardisg Sep 7, 2023
579265d
Merge branch 'main' into feat/add-sendBeacon-support
tehhowch Sep 14, 2023
0fd45a3
Merge branch 'main' into feat/add-sendBeacon-support
tehhowch Feb 27, 2024
2961b5c
refactor: maintain synchronous API
tehhowch Mar 5, 2024
23bc320
chore: cleanup
tehhowch Mar 6, 2024
c734545
Merge remote-tracking branch 'upstream/main' into feat/add-sendBeacon…
tehhowch Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 58 additions & 3 deletions lib/interceptor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,12 @@ var interceptor = {
window.sessionStorage.removeItem(NAMESPACE);
}

if (typeof window.navigator.sendBeacon == 'function') {
replaceSendBeacon();
} else {
console.error(PKG_PREFIX + 'sendBeacon API preconditions not met!');
}

if (typeof window.fetch == 'function') {
replaceFetch();
if (
Expand All @@ -54,6 +60,48 @@ var interceptor = {

done(window[NAMESPACE]);

function replaceSendBeacon() {
var _sendBeacon = window.navigator.sendBeacon;
var interceptSendBeacon = function (url, payload) {
var request = {
method: 'POST',
requestHeaders: {},
requestBody: payload,
url: url,
};

addPendingRequest(request);

var isRequestQueuedForTransfer = _sendBeacon.apply(window.navigator, [
url,
payload,
]);

completeSendBeaconRequest(request, {
body: isRequestQueuedForTransfer,
});
tehhowch marked this conversation as resolved.
Show resolved Hide resolved

// Forward the original response to the application on the current tick.
return isRequestQueuedForTransfer;
};

window.navigator.sendBeacon = function (target, data) {
var url = target;

if (target instanceof URL) {
url = target.href;
}

if (data instanceof Blob) {
return data.text().then(function (payload) {
return interceptSendBeacon(url, payload);
});
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we handle the other non-string kinds? (MDN suggests ArrayBuffer, TypedArray, DataView, FormData, pojos, URLSearchParams)

If we don't explicitly handle them, it would be good to at least verify what users will see in their spec files for those types.

Copy link
Author

@bardisg bardisg Sep 20, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

will try to find some time in the near future to add the other types too


return interceptSendBeacon(url, data);
};
}

function replaceFetch() {
var _fetch = window.fetch;
window.fetch = function () {
Expand Down Expand Up @@ -106,7 +154,7 @@ var interceptor = {
statusCode: clonedResponse.status,
headers: parseHeaders(clonedResponse.headers)
});
}
},
);

// Forward the original response to the application on the current tick.
Expand Down Expand Up @@ -240,6 +288,13 @@ var interceptor = {
pushToSessionStorage(startedRequest);
}

function completeSendBeaconRequest(startedRequest, completedRequest) {
startedRequest.body = completedRequest.body;
startedRequest.statusCode = completedRequest.body === true ? 200 : 500;
startedRequest.__fulfilled = Date.now();
replaceInSessionStorage(startedRequest);
}

function completeFetchRequest(startedRequest, completedRequest) {
// Merge the completed data with the started request.
startedRequest.requestBody = completedRequest.requestBody;
Expand All @@ -266,7 +321,7 @@ var interceptor = {
return JSON.parse(rawData);
} catch (e) {
throw new Error(
PKG_PREFIX + 'Could not parse sessionStorage data: ' + e.message
PKG_PREFIX + 'Could not parse sessionStorage data: ' + e.message,
tehhowch marked this conversation as resolved.
Show resolved Hide resolved
);
}
}
Expand Down Expand Up @@ -355,7 +410,7 @@ var interceptor = {
parsed = JSON.parse(rawData);
} catch (e) {
throw new Error(
PKG_PREFIX + 'Could not parse sessionStorage data: ' + e.message
PKG_PREFIX + 'Could not parse sessionStorage data: ' + e.message,
tehhowch marked this conversation as resolved.
Show resolved Hide resolved
);
}
}
Expand Down
41 changes: 41 additions & 0 deletions test/site/sendBeacon.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>sendBeacon request</title>
</head>
<body>
<p id="text">This file makes a sendBeacon request to /post.json</p>
<button id="buttonstring">Press me for string data</button>
<button id="buttonjson">Press me for JSON data as Blob</button>
<div id="response"></div>
<script>
'use strict';

(function (window, document) {
var buttonstring = document.querySelector('#buttonstring');
var buttonjson = document.querySelector('#buttonjson');

buttonstring.addEventListener('click', function (evt) {
var data = 'bar';
var isQueuedForDelivery = window.navigator.sendBeacon(new URL('/post.json', window.location.origin), data);

if(isQueuedForDelivery) {
document.querySelector('#response').textContent += "queued string for delivery\n";
}
});

buttonjson.addEventListener('click', function (evt) {
var data = new Blob([JSON.stringify({ foo: 'bar' })], { type: 'text/plain' });
var isQueuedForDelivery = window.navigator.sendBeacon('/post.json', data);

if(isQueuedForDelivery) {
document.querySelector('#response').textContent += "queued json for delivery\n";
}
});

})(window, window.document);
</script>
</body>
</html>
52 changes: 52 additions & 0 deletions test/spec/plugin_test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,6 +529,58 @@ describe('webdriverajax', function testSuite() {
});
});

describe('sendBeacon API', async function () {
it('can intercept a simple POST request', async function () {
await browser.url('/sendBeacon.html');
await browser.setupInterceptor();
await browser.expectRequest('POST', '/post.json', 200);
await completedRequest('#buttonjson');
await browser.assertRequests();
await browser.assertExpectedRequestsOnly();
});

it('can intercept when target is URL object', async function () {
await browser.url('/sendBeacon.html');
await browser.setupInterceptor();
await browser.expectRequest('POST', /\/post\.json/, 200);
await completedRequest('#buttonstring');
await browser.assertRequests();
await browser.assertExpectedRequestsOnly();
});

it('can access a certain request', async function () {
await browser.url('/sendBeacon.html');
await browser.setupInterceptor();
await completedRequest('#buttonjson');
const request = await browser.getRequest(0);
assert.equal(request.method, 'POST');
assert.equal(request.url, '/post.json');
assert.equal(request.response.body, true);
assert.equal(request.response.statusCode, 200);
assert.deepEqual(request.response.headers, {});
});

it('can assess the request body using string data', async function () {
await browser.url('/sendBeacon.html');
await browser.setupInterceptor();
await completedRequest('#buttonstring');
const request = await browser.getRequest(0);
assert.equal(request.url, 'http://localhost:8080/post.json');
assert.equal(request.response.body, true);
assert.deepEqual(request.body, 'bar');
});

it('can assess the request body using JSON data as Blob', async function () {
await browser.url('/sendBeacon.html');
await browser.setupInterceptor();
await completedRequest('#buttonjson');
const request = await browser.getRequest(0);
assert.equal(request.url, '/post.json');
assert.equal(request.response.body, true);
assert.deepEqual(request.body, { foo: 'bar' });
});
});

describe('fetch API', async function () {
it('can intercept a simple GET request', async function () {
await browser.url('/get.html');
Expand Down