Add Fullstory - Githubissues

dhochbaum-dcp commented 1 month ago

Investigate React-specific Fullstory features and implement Fullstory tracking tag

dhochbaum-dcp commented 3 weeks ago

<script>
window['_fs_host'] = 'fullstory.com';
window['_fs_script'] = 'edge.fullstory.com/s/fs.js';
window['_fs_org'] = 'o-19S9J2-na1';
window['_fs_namespace'] = 'FS';
!function(m,n,e,t,l,o,g,y){var s,f,a=function(h){
return!(h in m)||(m.console&&m.console.log&&m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].'),!1)}(e)
;function p(b){var h,d=[];function j(){h&&(d.forEach((function(b){var d;try{d=b[h[0]]&&b[h[0]](h[1])}catch(h){return void(b[3]&&b[3](h))}
d&&d.then?d.then(b[2],b[3]):b[2]&&b[2](d)})),d.length=0)}function r(b){return function(d){h||(h=[b,d],j())}}return b(r(0),r(1)),{
then:function(b,h){return p((function(r,i){d.push([b,h,r,i]),j()}))}}}a&&(g=m[e]=function(){var b=function(b,d,j,r){function i(i,c){
h(b,d,j,i,c,r)}r=r||2;var c,u=/Async$/;return u.test(b)?(b=b.replace(u,""),"function"==typeof Promise?new Promise(i):p(i)):h(b,d,j,c,c,r)}
;function h(h,d,j,r,i,c){return b._api?b._api(h,d,j,r,i,c):(b.q&&b.q.push([h,d,j,r,i,c]),null)}return b.q=[],b}(),y=function(b){function h(h){
"function"==typeof h[4]&&h[4](new Error(b))}var d=g.q;if(d){for(var j=0;j<d.length;j++)h(d[j]);d.length=0,d.push=h}},function(){
(o=n.createElement(t)).async=!0,o.crossOrigin="anonymous",o.src="https://"+l,o.onerror=function(){y("Error loading "+l)}
;var b=n.getElementsByTagName(t)[0];b&&b.parentNode?b.parentNode.insertBefore(o,b):n.head.appendChild(o)}(),function(){function b(){}
function h(b,h,d){g(b,h,d,1)}function d(b,d,j){h("setProperties",{type:b,properties:d},j)}function j(b,h){d("user",b,h)}function r(b,h,d){j({
uid:b},d),h&&j(h,d)}g.identify=r,g.setUserVars=j,g.identifyAccount=b,g.clearUserCookie=b,g.setVars=d,g.event=function(b,d,j){h("trackEvent",{
name:b,properties:d},j)},g.anonymize=function(){r(!1)},g.shutdown=function(){h("shutdown")},g.restart=function(){h("restart")},
g.log=function(b,d){h("log",{level:b,msg:d})},g.consent=function(b){h("setIdentity",{consent:!arguments.length||b})}}(),s="fetch",
f="XMLHttpRequest",g._w={},g._w[f]=m[f],g._w[s]=m[s],m[s]&&(m[s]=function(){return g._w[s].apply(this,arguments)}),g._v="2.0.0")
}(window,document,window._fs_namespace,"script",window._fs_script);
</script>

horatiorosa commented 3 weeks ago

I am running into a number of issues with this one.

Inserting the FS code snippet into the <head> in root.tsx breaks the app as seen below:

I then switched to trying the fullstory-browser-sdk npm package. After installing the package, I followed the recommended init steps, working within the root.tsx. import { init as initFullStory } from "@fullstory/browser"; and in the App function, I added: initFullStory({ orgId: "o-19S9J2-na1", script: "edge.fullstory.com" }); (likely, the script isn't needed, it may have a default)

This results in a 500 error in the browser console and server logs show the following:

Also, checking the console to see if FullStory loaded comes up nil as well: FS._v yields `FS is not defined (If FS did load, it would show the version.

I went on to experiment with moving the init to the entry.client.tsx (probs the wrong thing to do). Running initFullStory anywhere in the file interferes with the hydration but interestingly, the Fs script is loaded and available:

I was unable to find examples or documentation on implementing FullStory and Remix.

I also tried an idea from a remix discussion which lead me to a package called remix-utils. In particular, the External Scripts method. I couldn't get this to work because it relies on the src to be a link to a script, not the bare script itself (or so I think).

Anyone have any ideas?

dhochbaum-dcp commented 3 weeks ago

You could save the script as a .js file in the public folder and then link to it that way.

NYCPlanning / ae-cp-map

Add Fullstory #59