Description
Is there an existing issue for this?
- I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
- I have reviewed the documentation https://docs.sentry.io/
- I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases
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: "[email protected]",
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.htmlwith 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.jswith the following content:
Sentry.init({
dsn: "<dsn>",
release: "[email protected]",
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();
}Metadata
Metadata
Assignees
Type
Projects
Status