threepointone/glamor

FullStory lacks support for glamor

Closed this issue · 6 comments

jeroenransijn commented

If you are using, or want to use the tool FullStory that records your user sessions for playback — be aware that they currently don't support glamor. Some parts of our app that use glamor don't show up with that generated CSS in FullStory. I have reached out to FullStory support and they have been quick on giving valuable insight:

Hi!

From browsing that library, it seems they are doing more than just appending styles to the head of the website (FullStory actually does support appending <style> tags dynamically). They seem to by dynamically creating and injecting Style Rule objects to the live stylesheet.

Unfortunately, FullStory currently does not support recording changes to the runtime stylesheet, as there isn't yet a browser API to observe dynamic stylesheet changes in a performance way. We have been thinking about viable solutions, but haven't yet settled on one, and don't currently have a fix scheduled.

I've link this thread to our internal ticket tracking that work. We will be sure to reach out to you if the status of it changes.

Thanks again for the report. Feel free to reach out if you have any further questions. Always happy to help!

This might be something to consider when choosing a technology like glamor when you have certain tools and integrations you rely upon. This is in no means an attack on FullStory and/or Glamor, I absolutely love both of these tools and only wanted to document this as a reference for people that face a similar situation with FullStory, or potentially other tools.

otbe commented

This issue comes up from time to time and these days its hitting me quite hard. Our internal feedback tool must support screenshots and we use html2canvas for this. In production it will lead to the same issue you mentioned already.

A hacky workaround would be:

const head = document.head || document.getElementsByTagName('head')[0];
const style = document.createElement('style') as any;
style.type = 'text/css';
if (style.styleSheet) {
   style.styleSheet.cssText = styleSheet.rules().map((x: any) => x.cssText).join('\n');
} else {
   const css = styleSheet.rules().map((x: any) => {
       // accessing cssText throws sometimes in IEs :)
       try {
          return x.cssText;
       } catch (e) {
          return '';
       }
    }).join('\n');
    style.appendChild(document.createTextNode(css));
}
head.appendChild(style);

// take a screenshot

head.removeChild(style);
threepointone commented
otbe commented

Dunno how this should work. If I change speedy mode at runtime I have to flush all rules before and reinsert them and I guess this will cause flashing/jumping content. Users navigate through our SPA and click the feedback button at some point in time...¯_(ツ)_/¯

The mentioned workaround works for us without noticeable drawbacks (and still fast enough)...

threepointone commented

The workaround looks good enough for the usecase.

mikestoltz commented

@jeroenransijn Out of curiosity have you heard anything new from FullStory on this issue? They obviously haven't fixed it because I'm experiencing it now, just wondering if they have landed on a possible solution or timeline at all since they said they would reach out to you if the status changed.

jeroenransijn commented

@mikestoltz I haven't followed up since.