Is there an existing issue for this?
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
Sentry Browser CDN bundle
SDK Version
via cdn (https://js.sentry-cdn.com/bfb3eb790cf5b7cc59d23d07aa079024.min.js)
Framework Version
No response
Link to Sentry event
No response
Reproduction Example/SDK Setup
Sentry.init({
dsn: "<dsn>",
// Alternatively, use `process.env.npm_package_version` for a dynamic release version
// if your build tool supports it.
release: "my-project-name@2.3.12",
integrations: [
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Capture Replay for 10% of all sessions,
// plus for 100% of sessions with an error
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});Hi Sentry team,
In my project, I am using flv.js to stream video, and it has been working well. However, after integrating Sentry.js, I encountered two issues:
Issue 1:
There was a memory leak, which I believe has been addressed in this issue.
Issue 2:
The stream cannot be released. When using flv.js's destroy() method, the connection is not properly closed, even though this API works fine without Sentry integration.
Since Issue 1 seems to have been resolved, I am focusing solely on Issue 2 in this report.
Steps to Reproduce
- Create an
index.html with the following content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flv.js With Sentry</title>
<script
src="https://js.sentry-cdn.com/bfb3eb790cf5b7cc59d23d07aa079024.min.js"
crossorigin="anonymous"
></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js/dist/flv.min.js"></script>
</head>
<body>
<h1>Hello Flv.js With Sentry!</h1>
<video id="videoElement" controls width="640" height="360"></video>
<script src="index.js"></script>
</body>
</html>
- Create an
index.js with the following content:
Sentry.init({
dsn: "<dsn>",
release: "my-project-name@2.3.12",
integrations: [],
tracesSampleRate: 1.0,
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
});
if (flvjs.isSupported()) {
var videoElement = document.getElementById('videoElement');
var flvPlayer = flvjs.createPlayer({
type: 'flv',
url: 'http://10.0.0.6:8080/live?port=1935&app=live&stream=car_test'
});
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load();
flvPlayer.play();
setTimeout(() => {
flvPlayer.destroy();
}, 10 * 1000);
} else {
console.error('FLV.js is not supported in this browser.');
}Expected Result
The resources should be properly released after 10 seconds, as shown in below
Actual Result
The connection is not released and stays open, as shown in below
Additional Information:
I also noticed that in packages/utils/src/instrument/fetch.ts, response.clone() is used to split off a new ReadableStream. Since flv.js on Chrome does not use abort signals but instead cancels the stream using the cancel() API, flv.js is unaware of the Sentry-generated ReadableStream branch. As a result, flv.js cannot cancel Sentry's stream branch, causing Chrome to think there is still an active reader, preventing the release of resources.
Below is the related part of flv.js:
At line 174:
abort() {
this._requestAbort = true;
if (this._status !== LoaderStatus.kBuffering || !Browser.chrome) {
if (this._abortController) {
try {
this._abortController.abort();
} catch (e) {}
}
}
}At line 212:
} else if (this._requestAbort === true) {
this._status = LoaderStatus.kComplete;
return reader.cancel();
}
Is there an existing issue for this?
How do you use Sentry?
Sentry Saas (sentry.io)
Which SDK are you using?
Sentry Browser CDN bundle
SDK Version
via cdn (https://js.sentry-cdn.com/bfb3eb790cf5b7cc59d23d07aa079024.min.js)
Framework Version
No response
Link to Sentry event
No response
Reproduction Example/SDK Setup
Hi Sentry team,
In my project, I am using flv.js to stream video, and it has been working well. However, after integrating Sentry.js, I encountered two issues:
Issue 1:
There was a memory leak, which I believe has been addressed in this issue.
Issue 2:
The stream cannot be released. When using
flv.js'sdestroy()method, the connection is not properly closed, even though this API works fine without Sentry integration.Since Issue 1 seems to have been resolved, I am focusing solely on Issue 2 in this report.
Steps to Reproduce
index.htmlwith the following content:index.jswith the following content:Expected Result
The resources should be properly released after 10 seconds, as shown in below
Actual Result
The connection is not released and stays open, as shown in below
Additional Information:
I also noticed that in
packages/utils/src/instrument/fetch.ts,response.clone()is used to split off a newReadableStream. Since flv.js on Chrome does not use abort signals but instead cancels the stream using thecancel()API, flv.js is unaware of the Sentry-generatedReadableStreambranch. As a result, flv.js cannot cancel Sentry's stream branch, causing Chrome to think there is still an active reader, preventing the release of resources.Below is the related part of flv.js:
At line 174:
At line 212: