Ajustando Rudderstack

netlify.toml

@@ -21,14 +21,17 @@
     X-XSS-Protection = "1; mode=block"
     X-Content-Type-Options = "nosniff"
     Referrer-Policy = "strict-origin-when-cross-origin"
+    Cross-Origin-Embedder-Policy = "credentialless"
+    Cross-Origin-Opener-Policy = "same-origin"
+    Cross-Origin-Resource-Policy = "cross-origin"
     Content-Security-Policy = """
       default-src 'self';
-      script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.rudderlabs.com https://www.googletagmanager.com;
+      script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.rudderlabs.com https://www.googletagmanager.com https://*.sentry.io;
       connect-src 'self' https://*.rudderlabs.com https://*.ingest.sentry.io https://*.supabase.co https://www.google-analytics.com;
-      style-src 'self' 'unsafe-inline';
+      style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
-      img-src 'self' data: https:;
+      img-src 'self' data: https: blob:;
-      font-src 'self' data:;
+      font-src 'self' data: https://fonts.gstatic.com;
-      frame-src 'self';
+      frame-src 'self' https://www.googletagmanager.com;
       worker-src 'self' blob:;
     """
     Access-Control-Allow-Origin = "https://historiasmagicas.netlify.app"

src/components/analytics/RudderstackAnalytics.tsx

@@ -8,53 +8,54 @@ interface RudderstackAnalyticsProps {
 declare global {
   interface Window {
     rudderanalytics: any;
-    RudderSnippetVersion: string;
-    rudderAnalyticsBuildType: string;
-    rudderAnalyticsMount: () => void;
-    rudderAnalyticsAddScript: (url: string, attr?: string, value?: string) => void;
   }
 }
 
 export function RudderstackAnalytics({ writeKey, dataPlaneUrl }: RudderstackAnalyticsProps) {
   React.useEffect(() => {
-    // Verifica se o Rudderstack já está carregado
     if (window.rudderanalytics?.loaded) {
       return;
     }
 
+    const loadRudderstack = () => {
       const script = document.createElement('script');
-    script.innerHTML = `
+      script.src = 'https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js';
-      !function(){"use strict";window.RudderSnippetVersion="3.0.32";var e="rudderanalytics";window[e]||(window[e]=[]);
+      script.async = true;
-      var rudderanalytics=window[e];if(Array.isArray(rudderanalytics)){
+      script.crossOrigin = 'anonymous';
-      if(rudderanalytics.loaded){
+      script.referrerPolicy = 'no-referrer-when-downgrade';
-        console.warn("RudderStack JavaScript SDK snippet included more than once.");
+      
-        return;
+      script.onload = () => {
-      }
+        window.rudderanalytics = window.rudderanalytics || [];
-      rudderanalytics.loaded=true;
+        
-      window.rudderAnalyticsBuildType="legacy";var sdkBaseUrl="https://cdn.rudderlabs.com/v3";var sdkName="rsa.min.js";
+        // Configuração inicial
-      var scriptLoadingMode="async";
+        window.rudderanalytics.load(writeKey, dataPlaneUrl, {
-      var r=["setDefaultInstanceKey","load","ready","page","track","identify","alias","group","reset","setAnonymousId","startSession","endSession","consent"];
+          configUrl: 'https://api.rudderlabs.com',
-      for(var n=0;n<r.length;n++){var t=r[n];rudderanalytics[t]=function(r){return function(){var n;
+          logLevel: 'DEBUG',
-      Array.isArray(window[e])?rudderanalytics.push([r].concat(Array.prototype.slice.call(arguments))):null===(n=window[e][r])||void 0===n||n.apply(window[e],arguments)
+          secureCookie: true,
-      }}(t)}try{
+          crossDomainCookie: true,
-      new Function('class Test{field=()=>{};test({prop=[]}={}){return prop?(prop?.property??[...prop]):import("");}}'),
+          sameSiteCookie: 'Lax',
-      window.rudderAnalyticsBuildType="modern"}catch(o){}var d=document.head||document.getElementsByTagName("head")[0];
+          loadIntegration: true,
-      var i=document.body||document.getElementsByTagName("body")[0];window.rudderAnalyticsAddScript=function(e,r,n){
+          lockIntegrationsVersion: false
-      var t=document.createElement("script");t.src=e,t.setAttribute("data-loader","RS_JS_SDK"),r&&n&&t.setAttribute(r,n),
+        });
-      "async"===scriptLoadingMode?t.async=true:"defer"===scriptLoadingMode&&(t.defer=true),
+
-      d?d.insertBefore(t,d.firstChild):i.insertBefore(t,i.firstChild)},window.rudderAnalyticsMount=function(){!function(){
+        // Registra a visualização da página
-      if("undefined"==typeof globalThis){var e;var r=function getGlobal(){
+        window.rudderanalytics.page();
-      return"undefined"!=typeof self?self:"undefined"!=typeof window?window:null}();r&&Object.defineProperty(r,"globalThis",{
+      };
-      value:r,configurable:true})}
+
-      }(),window.rudderAnalyticsAddScript("".concat(sdkBaseUrl,"/").concat(window.rudderAnalyticsBuildType,"/").concat(sdkName),"data-rsa-write-key","${writeKey}")
+      script.onerror = (error) => {
-      },
+        console.error('Erro ao carregar Rudderstack:', error);
-      "undefined"==typeof Promise||"undefined"==typeof globalThis?window.rudderAnalyticsAddScript("https://polyfill-fastly.io/v3/polyfill.min.js?version=3.111.0&features=Symbol%2CPromise&callback=rudderAnalyticsMount"):window.rudderAnalyticsMount();
+      };
-      var loadOptions={};rudderanalytics.load("${writeKey}","${dataPlaneUrl}",loadOptions)}}}();
+
-    `;
       document.head.appendChild(script);
+    };
+
+    loadRudderstack();
 
     return () => {
-      document.head.removeChild(script);
+      const script = document.querySelector('script[src*="rudder-analytics.min.js"]');
+      if (script && script.parentNode) {
+        script.parentNode.removeChild(script);
+      }
     };
   }, [writeKey, dataPlaneUrl]);
 

src/main.tsx

@@ -1,4 +1,3 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { RouterProvider } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
@@ -23,21 +22,16 @@ Sentry.init({
     Sentry.browserTracingIntegration(),
     Sentry.replayIntegration(),
   ],
-  // Configurações de ambiente
   environment: import.meta.env.MODE,
-  // Tracing
+  tracesSampleRate: import.meta.env.DEV ? 1.0 : 0.2,
-  tracesSampleRate: import.meta.env.DEV ? 1.0 : 0.2, // 100% em dev, 20% em prod
   tracePropagationTargets: [
     "localhost",
     "historiasmagicas.netlify.app",
     "bsjlbnyslxzsdwxvkaap.supabase.co"
   ],
-  // Session Replay
+  replaysSessionSampleRate: import.meta.env.DEV ? 1.0 : 0.1,
-  replaysSessionSampleRate: import.meta.env.DEV ? 1.0 : 0.1, // 100% em dev, 10% em prod
   replaysOnErrorSampleRate: 1.0,
-  // Configurações adicionais
   beforeSend(event) {
-    // Não enviar eventos em desenvolvimento
     if (import.meta.env.DEV) {
       return null;
     }
@@ -55,20 +49,19 @@ const queryClient = new QueryClient({
   },
 });
 
-function Root() {
+const rootElement = document.getElementById('root');
-  return (
+if (!rootElement) throw new Error('Failed to find the root element');
-    <StrictMode>
+
+const root = createRoot(rootElement);
+
+root.render(
+  <QueryClientProvider client={queryClient}>
     <GoogleTagManager gtmId={GTM_ID} />
     <RudderstackAnalytics 
       writeKey={RUDDERSTACK_WRITE_KEY} 
       dataPlaneUrl={RUDDERSTACK_DATA_PLANE_URL} 
     />
-      <QueryClientProvider client={queryClient}>
     <RouterProvider router={router} />
     <Toaster />
   </QueryClientProvider>
-    </StrictMode>
 );
-}
-
-createRoot(document.getElementById('root')!).render(<Root />);