we currently have a web app based on NodeJS where data is gathered and its charts are presented as images using the plotlyJS. Below shown is one such code snippet which creates a chart of the data as an image and uses the generated URL to update the respective element (happens once every second).
var d3 = Plotly.d3;
var img_jpg = d3.select("#" + images[id_img]);
var old_url = img_jpg.src;
Plotly.newPlot(plotly_id, plot_data, layout).then(function (gd) {
Plotly.toImage(gd, { height: 1280, width: 2000 })
.then(function (url) {
img_jpg.attr("src", url);
});
});
This part of the code works as expected but leaves behind a trail of URLs. blob and data URLs to be precise as shown in the screenshot below.
output of the debugger tool showing blob and data URLs generated
These URLs over time floods the browser memory and leads to a crash after a while. stacked URLs after running the application for a few seconds
Reloading the page helps, but not friendly. Tried https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL but doest seem to help. Can you please suggest what can be done to clear these URLs from the current instance. Looking forward to suggestions, thank you!
When calling revokeObjectURL you also need to clear all references to the blobUrl in order for it to be freed.
If an image source is a blobUrl:
image.src = blobUrl;
Clearing it like this works for me:
URL.revokeObjectURL(blobUrl);
image.src = "";
blobUrl = undefined;