Closed
Description
Our production environment has experienced a random issue where on occasion the browser does not establish a connection. Refreshing the page fixes the issue. It's very difficult to reproduce, but happens often enough that we want to try and solve it.
When experiencing something "random" like this, I wonder if there might be a race condition.
We use are using @anycable/turbo-stream
// cable.js
import { createCable } from '@anycable/web';
import { BaseLogger } from '@anycable/core';
class Logger extends BaseLogger {
writeLogEntry(level, msg, details) {
if (details && details.type === 'ping') return;
window.cableLogs.push({ timestamp: Date.now(), level, msg, details });
}
}
window.cableLogs = [];
const logLevel = 'debug';
const logger = new Logger(logLevel);
// By default, the current page is loaded in the background,
// and the action-cable-url (or cable-url) meta tag is used to update
// the connection url
export default createCable({
logger,
protocol: 'actioncable-v1-ext-json',
tokenRefresher: async (transport) => {
let response = await fetch('/app/-/cable_url.json');
let data = await response.json();
// Update URL for the underlying transport
await transport.setURL(data['url']);
},
});// application.js
import { start } from '@anycable/turbo-stream';
import cable from 'cable';
start(cable, { delayedUnsubscribe: true });Any thought on placing the connect to inside the turbo:load event?
// application.js
import { start } from '@anycable/turbo-stream';
import cable from 'cable';
document.addEventListener('turbo:load', () => {
if (!window._anycableStarted) {
window._anycableStarted = true;
start(cable, { delayedUnsubscribe: true });
}
});Is there a better way to do this, or something else we should look at?
Metadata
Metadata
Assignees
Labels
No labels