Comments (8)
Sure, the relative to absolute transform was done in the full snapshot phase, which belongs to the rrweb-snapshot repo.
Looks like we can handle the srcset attribute with some parae and transform work either.
from rrweb.
Sure, the relative to absolute transform was done in the full snapshot phase, which belongs to the rrweb-snapshot repo.
Looks like we can handle the srcset attribute with some parae and transform work either.
Ok perfect ! I need to post the issue on the good repo then?
from rrweb.
In the same way, I have discovered another problem with relative URL on images.
As you can see, images in inline style are not converted into absolute path. Then in the replay, the image is not visible.
Maybe I need to post this on snapshot git repo ?
from rrweb.
Any news on this ?
from rrweb.
@IMFIL It's not a clean way at all, but here you can find my "temporary" fix for that.
PS: It seems that there is a limitation to the length of text that can be put in code part. So you will find the code in attachement
from rrweb.
@xavier-heysch I would love to help you out on a PR to RRWeb so that everyone can benefit from this. @Yuyz0112 would you be open to this change ?
from rrweb.
Thanks for the share @xavier-heysch.
Triple ` will let you to put longer code as a comment.
// Start the record
var options = {
maskAllInputs: true,
emit: function (event) {
var json_event = JSON.stringify(event);
try {
// Fixing srcset issue with relative URLs
// Browse all occurences of srcset starting with relative URLs
while (json_event.indexOf('"srcset":"/') !== -1) {
var srcset_index = json_event.indexOf('"srcset":"/');
var srcset = json_event.substring(srcset_index + 10, json_event.indexOf('"', srcset_index + 10));
var srcset_splitted = srcset.split(',');
var srcset_splitted_fixed = [];
for (var i = 0; i < srcset_splitted.length; i++) {
var srcset_item = srcset_splitted[i].replace(/(\\n)/g, ' ').trim();
if (srcset_item.indexOf("/") == 0) {
srcset_item = location.protocol + '//' + location.host + srcset_item;
}
srcset_splitted_fixed.push(srcset_item);
}
var srcset_fixed = srcset_splitted_fixed.join(', ');
// Clean previous srcset and replace it with the fixed one
json_event = json_event.substring(0, srcset_index + 10) + srcset_fixed + json_event.substring(json_event.indexOf('"', srcset_index + 10));
}
}
catch (exc) {
// Reset json event
json_event = JSON.stringify(event);
}
events_list.push(JSON.parse(json_event));
}
};
from rrweb.
I think @IMFIL 's patch already impl this.
from rrweb.
Related Issues (20)
- [Bug]: use blockSelector to mask img record will throw error: e.matches is not a function HOT 3
- publish well-formulated and concise types HOT 1
- [Bug]: maskInputFn is not called on inputs
- [feature request]: Record/replay css animation's `currentTime` HOT 6
- [Bug]: progress bar not updating when adding event asynchronously using addEvent
- [Bug]: Added nodes not showing up HOT 1
- Changes the you made may not be saved HOT 1
- [Bug]: CSS `all: unset` incorrectly expands in `events.json` recording HOT 1
- [Bug]: Repeat menu
- [Bug]: Stopping recording causes all insertRule hooks added after record start to drop
- [Bug]: how i can record iframe content HOT 4
- Sanitization/Renaming for Security in Snapshot vs Replay reconstruction HOT 1
- [Bug]: Failed to rebuildFullSnapshot HOT 3
- [Bug]: Firefox Addon causes "This page is asking you to confirm that you want to leave" on all navigation HOT 1
- [Bug]: isParentRemoved lags by 1 to 3 seconds on pages with lots of nodes
- [Bug]: rrweb/rrwebPlayer scrubbing not working?
- [Bug]: Chrome tab crashes while replaying
- [Feature Request]: Event Data verifier
- [Feature Request]: Specify allowed origin for cross-origin iframe recording HOT 1
- [Bug]: Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from rrweb.