From 953b7a78d0664788b0d459c3a353d53138026cc5 Mon Sep 17 00:00:00 2001 From: Lucas Santana Date: Sat, 11 Jan 2025 15:08:35 -0300 Subject: [PATCH] Ajustando Rudderstack --- netlify.toml | 13 ++-- .../analytics/RudderstackAnalytics.tsx | 73 ++++++++++--------- src/main.tsx | 41 +++++------ 3 files changed, 62 insertions(+), 65 deletions(-) diff --git a/netlify.toml b/netlify.toml index 69301c0..fb1f565 100644 --- a/netlify.toml +++ b/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'; - img-src 'self' data: https:; - font-src 'self' data:; - frame-src 'self'; + style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; + img-src 'self' data: https: blob:; + font-src 'self' data: https://fonts.gstatic.com; + frame-src 'self' https://www.googletagmanager.com; worker-src 'self' blob:; """ Access-Control-Allow-Origin = "https://historiasmagicas.netlify.app" diff --git a/src/components/analytics/RudderstackAnalytics.tsx b/src/components/analytics/RudderstackAnalytics.tsx index 1f7f076..8f86815 100644 --- a/src/components/analytics/RudderstackAnalytics.tsx +++ b/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 script = document.createElement('script'); - script.innerHTML = ` - !function(){"use strict";window.RudderSnippetVersion="3.0.32";var e="rudderanalytics";window[e]||(window[e]=[]); - var rudderanalytics=window[e];if(Array.isArray(rudderanalytics)){ - if(rudderanalytics.loaded){ - console.warn("RudderStack JavaScript SDK snippet included more than once."); - return; - } - rudderanalytics.loaded=true; - window.rudderAnalyticsBuildType="legacy";var sdkBaseUrl="https://cdn.rudderlabs.com/v3";var sdkName="rsa.min.js"; - var scriptLoadingMode="async"; - var r=["setDefaultInstanceKey","load","ready","page","track","identify","alias","group","reset","setAnonymousId","startSession","endSession","consent"]; - for(var n=0;n{};test({prop=[]}={}){return prop?(prop?.property??[...prop]):import("");}}'), - window.rudderAnalyticsBuildType="modern"}catch(o){}var d=document.head||document.getElementsByTagName("head")[0]; - var i=document.body||document.getElementsByTagName("body")[0];window.rudderAnalyticsAddScript=function(e,r,n){ - 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(){ - if("undefined"==typeof globalThis){var e;var r=function getGlobal(){ - 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}") - }, - "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); + const loadRudderstack = () => { + const script = document.createElement('script'); + script.src = 'https://cdn.rudderlabs.com/v1.1/rudder-analytics.min.js'; + script.async = true; + script.crossOrigin = 'anonymous'; + script.referrerPolicy = 'no-referrer-when-downgrade'; + + script.onload = () => { + window.rudderanalytics = window.rudderanalytics || []; + + // Configuração inicial + window.rudderanalytics.load(writeKey, dataPlaneUrl, { + configUrl: 'https://api.rudderlabs.com', + logLevel: 'DEBUG', + secureCookie: true, + crossDomainCookie: true, + sameSiteCookie: 'Lax', + loadIntegration: true, + lockIntegrationsVersion: false + }); + + // Registra a visualização da página + window.rudderanalytics.page(); + }; + + script.onerror = (error) => { + console.error('Erro ao carregar Rudderstack:', error); + }; + + 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]); diff --git a/src/main.tsx b/src/main.tsx index 8f5bfcd..5be4499 100644 --- a/src/main.tsx +++ b/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, // 100% em dev, 20% em prod + tracesSampleRate: import.meta.env.DEV ? 1.0 : 0.2, tracePropagationTargets: [ "localhost", "historiasmagicas.netlify.app", "bsjlbnyslxzsdwxvkaap.supabase.co" ], - // Session Replay - replaysSessionSampleRate: import.meta.env.DEV ? 1.0 : 0.1, // 100% em dev, 10% em prod + replaysSessionSampleRate: import.meta.env.DEV ? 1.0 : 0.1, 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() { - return ( - - - - - - - - - ); -} +const rootElement = document.getElementById('root'); +if (!rootElement) throw new Error('Failed to find the root element'); -createRoot(document.getElementById('root')!).render(); \ No newline at end of file +const root = createRoot(rootElement); + +root.render( + + + + + + +); \ No newline at end of file