Skip to content

Fix the JS error "EventSource is not defined" caused by PaleMoon #20584

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

Merged
merged 8 commits into from
Aug 3, 2022
Merged

Fix the JS error "EventSource is not defined" caused by PaleMoon #20584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
f1ab3c4
Fix the JS error caused by some non-standard browsers
wxiaoguang Aug 1, 2022
760bab5
fall back to periodic poller
wxiaoguang Aug 1, 2022
5ff1e64
inline the if, fix comments
wxiaoguang Aug 1, 2022
6dbbd80
Update web_src/js/features/stopwatch.js
wxiaoguang Aug 2, 2022
23a293a
Update web_src/js/features/notification.js
wxiaoguang Aug 2, 2022
a6aea83
Update web_src/js/features/notification.js
wxiaoguang Aug 3, 2022
644af7d
Update web_src/js/features/stopwatch.js
wxiaoguang Aug 3, 2022
df91975
Merge branch 'main' into fix-no-eventsource
wxiaoguang Aug 3, 2022
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
7 changes: 7 additions & 0 deletions web_src/js/features/eventsource.sharedworker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,13 @@ class Source {
self.addEventListener('connect', (e) => {
for (const port of e.ports) {
port.addEventListener('message', (event) => {
if (!self.EventSource) {
// some browsers (like PaleMoon, Firefox<53) don't support EventSource in SharedWorkerGlobalScope.
// this event handler needs EventSource when doing "new Source(url)", so just post a message back to the caller,
// in case the caller would like to use a fallback method to do its work.
port.postMessage({type: 'no-event-source'});
return;
}
if (event.data.type === 'start') {
const url = event.data.url;
if (sourcesByUrl[url]) {
Expand Down
47 changes: 23 additions & 24 deletions web_src/js/features/notification.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,10 @@ async function receiveUpdateCount(event) {
try {
const data = JSON.parse(event.data);

const notificationCount = document.querySelector('.notification_count');
if (data.Count > 0) {
notificationCount.classList.remove('hidden');
} else {
notificationCount.classList.add('hidden');
for (const count of document.querySelectorAll('.notification_count')) {
count.classList.toggle('hidden', data.Count === 0);
count.textContent = `${data.Count}`;
}

notificationCount.textContent = `${data.Count}`;
await updateNotificationTable();
} catch (error) {
console.error(error, event);
Expand All @@ -49,28 +45,41 @@ export function initNotificationCount() {
return;
}

if (notificationSettings.EventSourceUpdateTime > 0 && !!window.EventSource && window.SharedWorker) {
let usingPeriodicPoller = false;
const startPeriodicPoller = (timeout, lastCount) => {
if (timeout <= 0 || !Number.isFinite(timeout)) return;
usingPeriodicPoller = true;
lastCount = lastCount ?? notificationCount.text();
setTimeout(async () => {
await updateNotificationCountWithCallback(startPeriodicPoller, timeout, lastCount);
}, timeout);
};

if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
// Try to connect to the event source via the shared worker first
const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
worker.addEventListener('error', (event) => {
console.error(event);
console.error('worker error', event);
});
worker.port.addEventListener('messageerror', () => {
console.error('Unable to deserialize message');
console.error('unable to deserialize message');
});
worker.port.postMessage({
type: 'start',
url: `${window.location.origin}${appSubUrl}/user/events`,
});
worker.port.addEventListener('message', (event) => {
if (!event.data || !event.data.type) {
console.error(event);
console.error('unknown worker message event', event);
return;
}
if (event.data.type === 'notification-count') {
const _promise = receiveUpdateCount(event.data);
} else if (event.data.type === 'no-event-source') {
// browser doesn't support EventSource, falling back to periodic poller
if (!usingPeriodicPoller) startPeriodicPoller(notificationSettings.MinTimeout);
} else if (event.data.type === 'error') {
console.error(event.data);
console.error('worker port event error', event.data);
} else if (event.data.type === 'logout') {
if (event.data.data !== 'here') {
return;
Expand All @@ -88,7 +97,7 @@ export function initNotificationCount() {
}
});
worker.port.addEventListener('error', (e) => {
console.error(e);
console.error('worker port error', e);
});
worker.port.start();
window.addEventListener('beforeunload', () => {
Expand All @@ -101,17 +110,7 @@ export function initNotificationCount() {
return;
}

if (notificationSettings.MinTimeout <= 0) {
return;
}

const fn = (timeout, lastCount) => {
setTimeout(() => {
const _promise = updateNotificationCountWithCallback(fn, timeout, lastCount);
}, timeout);
};

fn(notificationSettings.MinTimeout, notificationCount.text());
startPeriodicPoller(notificationSettings.MinTimeout);
}

async function updateNotificationCountWithCallback(callback, timeout, lastCount) {
Expand Down
81 changes: 41 additions & 40 deletions web_src/js/features/stopwatch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import $ from 'jquery';
import prettyMilliseconds from 'pretty-ms';

const {appSubUrl, csrfToken, notificationSettings, enableTimeTracking} = window.config;
let updateTimeInterval = null; // holds setInterval id when active

export function initStopwatch() {
if (!enableTimeTracking) {
Expand All @@ -26,28 +25,45 @@ export function initStopwatch() {
$(this).parent().trigger('submit');
});

if (notificationSettings.EventSourceUpdateTime > 0 && !!window.EventSource && window.SharedWorker) {
// global stop watch (in the head_navbar), it should always work in any case either the EventSource or the PeriodicPoller is used.
const currSeconds = $('.stopwatch-time').attr('data-seconds');
if (currSeconds) {
updateStopwatchTime(currSeconds);
}

let usingPeriodicPoller = false;
const startPeriodicPoller = (timeout) => {
if (timeout <= 0 || !Number.isFinite(timeout)) return;
usingPeriodicPoller = true;
setTimeout(() => updateStopwatchWithCallback(startPeriodicPoller, timeout), timeout);
};

// if the browser supports EventSource and SharedWorker, use it instead of the periodic poller
if (notificationSettings.EventSourceUpdateTime > 0 && window.EventSource && window.SharedWorker) {
// Try to connect to the event source via the shared worker first
const worker = new SharedWorker(`${__webpack_public_path__}js/eventsource.sharedworker.js`, 'notification-worker');
worker.addEventListener('error', (event) => {
console.error(event);
console.error('worker error', event);
});
worker.port.addEventListener('messageerror', () => {
console.error('Unable to deserialize message');
console.error('unable to deserialize message');
});
worker.port.postMessage({
type: 'start',
url: `${window.location.origin}${appSubUrl}/user/events`,
});
worker.port.addEventListener('message', (event) => {
if (!event.data || !event.data.type) {
console.error(event);
console.error('unknown worker message event', event);
return;
}
if (event.data.type === 'stopwatches') {
updateStopwatchData(JSON.parse(event.data.data));
} else if (event.data.type === 'no-event-source') {
// browser doesn't support EventSource, falling back to periodic poller
if (!usingPeriodicPoller) startPeriodicPoller(notificationSettings.MinTimeout);
} else if (event.data.type === 'error') {
console.error(event.data);
console.error('worker port event error', event.data);
} else if (event.data.type === 'logout') {
if (event.data.data !== 'here') {
return;
Expand All @@ -65,7 +81,7 @@ export function initStopwatch() {
}
});
worker.port.addEventListener('error', (e) => {
console.error(e);
console.error('worker port error', e);
});
worker.port.start();
window.addEventListener('beforeunload', () => {
Expand All @@ -78,22 +94,7 @@ export function initStopwatch() {
return;
}

if (notificationSettings.MinTimeout <= 0) {
return;
}

const fn = (timeout) => {
setTimeout(() => {
const _promise = updateStopwatchWithCallback(fn, timeout);
}, timeout);
};

fn(notificationSettings.MinTimeout);

const currSeconds = $('.stopwatch-time').data('seconds');
if (currSeconds) {
updateTimeInterval = updateStopwatchTime(currSeconds);
}
startPeriodicPoller(notificationSettings.MinTimeout);
}

async function updateStopwatchWithCallback(callback, timeout) {
Expand All @@ -114,23 +115,14 @@ async function updateStopwatch() {
url: `${appSubUrl}/user/stopwatches`,
headers: {'X-Csrf-Token': csrfToken},
});

if (updateTimeInterval) {
clearInterval(updateTimeInterval);
updateTimeInterval = null;
}

return updateStopwatchData(data);
}

function updateStopwatchData(data) {
const watch = data[0];
const btnEl = $('.active-stopwatch-trigger');
if (!watch) {
if (updateTimeInterval) {
clearInterval(updateTimeInterval);
updateTimeInterval = null;
}
clearStopwatchTimer();
btnEl.addClass('hidden');
} else {
const {repo_owner_name, repo_name, issue_index, seconds} = watch;
Expand All @@ -139,22 +131,31 @@ function updateStopwatchData(data) {
$('.stopwatch-commit').attr('action', `${issueUrl}/times/stopwatch/toggle`);
$('.stopwatch-cancel').attr('action', `${issueUrl}/times/stopwatch/cancel`);
$('.stopwatch-issue').text(`${repo_owner_name}/${repo_name}#${issue_index}`);
$('.stopwatch-time').text(prettyMilliseconds(seconds * 1000));
updateTimeInterval = updateStopwatchTime(seconds);
updateStopwatchTime(seconds);
btnEl.removeClass('hidden');
}

return !!data.length;
}

let updateTimeIntervalId = null; // holds setInterval id when active
function clearStopwatchTimer() {
if (updateTimeIntervalId !== null) {
clearInterval(updateTimeIntervalId);
updateTimeIntervalId = null;
}
}
function updateStopwatchTime(seconds) {
const secs = parseInt(seconds);
if (!Number.isFinite(secs)) return null;
if (!Number.isFinite(secs)) return;

clearStopwatchTimer();
const $stopwatch = $('.stopwatch-time');
const start = Date.now();
return setInterval(() => {
const updateUi = () => {
const delta = Date.now() - start;
const dur = prettyMilliseconds(secs * 1000 + delta, {compact: true});
$('.stopwatch-time').text(dur);
}, 1000);
$stopwatch.text(dur);
};
updateUi();
updateTimeIntervalId = setInterval(updateUi, 1000);
}