diff --git a/packages/overlay/_fixtures/Capture.Message.in.a.transaction.txt b/packages/overlay/_fixtures/Capture.Message.in.a.transaction.txt
new file mode 100644
index 000000000..561082a06
--- /dev/null
+++ b/packages/overlay/_fixtures/Capture.Message.in.a.transaction.txt
@@ -0,0 +1,3 @@
+{"event_id":"7ae53de2e5504233a95a1444a98be747","sent_at":"2023-11-29T07:24:47.280Z","sdk":{"name":"sentry.javascript.nextjs","version":"7.81.1"},"trace":{"environment":"development","trace_id":"e96eabc3d59446a099a39e2b3caf14bb","sample_rate":"1","transaction":"Blog Reaction Transaction","sampled":"true"}}
+{"type":"event"}
+{"message":"hitting API","level":"info","event_id":"7ae53de2e5504233a95a1444a98be747","platform":"javascript","request":{"url":"http://localhost:8080/blog/secure-coding-practice","headers":{"Referer":"http://localhost:8080/","User-Agent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"}},"timestamp":1701242687.273,"environment":"development","sdk":{"integrations":["InboundFilters","FunctionToString","TryCatch","Breadcrumbs","GlobalHandlers","LinkedErrors","Dedupe","HttpContext","BrowserTracing","Replay","RewriteFrames"],"name":"sentry.javascript.nextjs","version":"7.81.1","packages":[{"name":"npm:@sentry/nextjs","version":"7.81.1"},{"name":"npm:@sentry/react","version":"7.81.1"}]},"tags":{"transaction":"Blog Reaction Transaction","runtime":"browser"},"contexts":{"trace":{"span_id":"b7d676007f2953a2","trace_id":"e96eabc3d59446a099a39e2b3caf14bb","origin":"manual"}},"breadcrumbs":[{"timestamp":1701242075.124,"category":"console","data":{"arguments":["🔎 [Spotlight]","App rerender"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] App rerender"},{"timestamp":1701242075.126,"category":"console","data":{"arguments":["🔎 [Spotlight]","Integration data:",{}],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Integration data: [object Object]"},{"timestamp":1701242075.141,"category":"console","data":{"arguments":["🔎 [Spotlight]","Injecting into application"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Injecting into application"},{"timestamp":1701242075.251,"category":"console","data":{"arguments":["🔎 [Spotlight]","Connecting to sidecar at","http://localhost:8969/stream"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Connecting to sidecar at http://localhost:8969/stream"},{"timestamp":1701242075.252,"category":"console","data":{"arguments":["🔎 [Spotlight]","Adding listener for","application/x-sentry-envelope","sum",0],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Adding listener for application/x-sentry-envelope sum 0"},{"timestamp":1701242075.289,"category":"console","data":{"arguments":["🔎 [Spotlight]","Open"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Open"},{"timestamp":1701242075.29,"category":"console","data":{"arguments":["🔎 [Spotlight]","Received new application/x-sentry-envelope event"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Received new application/x-sentry-envelope event"},{"timestamp":1701242075.292,"category":"console","data":{"arguments":["🔎 [Spotlight]","Received new application/x-sentry-envelope event"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Received new application/x-sentry-envelope event"},{"timestamp":1701242075.302,"category":"console","data":{"arguments":["🔎 [Spotlight]","App rerender"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] App rerender"},{"timestamp":1701242075.302,"category":"console","data":{"arguments":["🔎 [Spotlight]","Integration data:",{"sentry":"[Array]"}],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Integration data: [object Object]"},{"timestamp":1701242075.307,"category":"console","data":{"arguments":[{"e":"[Object]"}],"logger":"console"},"level":"log","message":"[object Object]"},{"timestamp":1701242075.309,"category":"console","data":{"arguments":[{"e":"[Object]"}],"logger":"console"},"level":"log","message":"[object Object]"},{"timestamp":1701242075.406,"category":"console","data":{"arguments":["Warning: Extra attributes from the server: %s%s","data-new-gr-c-s-check-loaded,data-gr-ext-installed,style","\n at body\n at html\n at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)\n at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)\n at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)\n at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)\n at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)\n at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)\n at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11)\n at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11)\n at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)\n at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13)\n at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11)\n at RSCComponent\n at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11)"],"logger":"console"},"level":"error","message":"Warning: Extra attributes from the server: %s%s data-new-gr-c-s-check-loaded,data-gr-ext-installed,style \n at body\n at html\n at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)\n at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)\n at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)\n at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)\n at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)\n at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)\n at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11)\n at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11)\n at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)\n at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13)\n at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11)\n at RSCComponent\n at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11)"},{"timestamp":1701242075.41,"category":"navigation","data":{"from":"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/blog/secure-coding-practice","to":"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/blog/secure-coding-practice"}},{"timestamp":1701242075.539,"category":"console","data":{"arguments":["[Vercel Web Analytics] Failed to load script from https://va.vercel-scripts.com/v1/script.debug.js. Please check if any ad blockers are enabled and try again."],"logger":"console"},"level":"log","message":"[Vercel Web Analytics] Failed to load script from https://va.vercel-scripts.com/v1/script.debug.js. Please check if any ad blockers are enabled and try again."},{"timestamp":1701242077.462,"category":"fetch","data":{"method":"GET","url":"/api/views/secure-coding-practice","__span":"909fee62e80b3915","status_code":200,"response_body_size":14},"type":"http"},{"timestamp":1701242077.607,"category":"fetch","data":{"method":"GET","url":"/api/reactions/secure-coding-practice","__span":"99c98715ea248dee","status_code":200,"response_body_size":221},"type":"http"},{"timestamp":1701242077.876,"category":"fetch","data":{"method":"POST","url":"/api/views/secure-coding-practice","__span":"ba091d4f54b47fa5","status_code":200,"response_body_size":14},"type":"http"},{"timestamp":1701242077.97,"category":"fetch","data":{"method":"GET","url":"/api/views/secure-coding-practice","__span":"8feb01dd43b1c467","status_code":200,"response_body_size":14},"type":"http"},{"timestamp":1701242078.019,"category":"fetch","data":{"method":"POST","url":"/api/views/secure-coding-practice","__span":"84555a0da94a9c45","status_code":200,"response_body_size":14},"type":"http"},{"timestamp":1701242079.029,"category":"sentry.transaction","event_id":"b9c1bd3905be472bab547c74687e0178","message":"b9c1bd3905be472bab547c74687e0178"},{"timestamp":1701242079.039,"category":"fetch","data":{"method":"POST","url":"http://localhost:8969/stream","status_code":204,"request_body_size":30125},"type":"http"},{"timestamp":1701242079.287,"category":"console","data":{"arguments":["🔎 [Spotlight]","Received new application/x-sentry-envelope event"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Received new application/x-sentry-envelope event"},{"timestamp":1701242079.291,"category":"console","data":{"arguments":["🔎 [Spotlight]","App rerender"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] App rerender"},{"timestamp":1701242079.292,"category":"console","data":{"arguments":["🔎 [Spotlight]","Integration data:",{"sentry":"[Array]"}],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Integration data: [object Object]"},{"timestamp":1701242079.299,"category":"console","data":{"arguments":[{"e":"[Object]"}],"logger":"console"},"level":"log","message":"[object Object]"},{"timestamp":1701242079.301,"category":"console","data":{"arguments":[{"e":"[Object]"}],"logger":"console"},"level":"log","message":"[object Object]"},{"timestamp":1701242684.914,"category":"fetch","data":{"method":"GET","url":"/api/reactions/secure-coding-practice","status_code":200,"response_body_size":221},"type":"http"},{"timestamp":1701242684.926,"category":"fetch","data":{"method":"GET","url":"/api/views/secure-coding-practice","status_code":200,"response_body_size":14},"type":"http"},{"timestamp":1701242687.257,"category":"ui.click","message":"button.w-auto.h-auto.transition-colors.focus:outline-dashed.focus:outline-2.focus:outline-offset-4.group.w-auto.min-w-[70px].h-auto.p-2.rounded-full.transition.flex.items-center.justify-center.gap-1.hocus:underline-none.hocus:transform.hocus:scale-[1.015].bg-background-primary-light.dark:bg-background-primary-dark.border.border-gray-200.dark:border-gray-600.hocus:bg-background-button-hover-light.dark:hover:bg-background-button-hover-dark"},{"timestamp":1701242687.262,"category":"console","data":{"arguments":["🎊 Could not load worker",{"message":"Failed to construct 'Worker': Access to the script at 'blob:http://localhost:8080/6417d5c1-6355-4490-9f61-749d89357184' is denied by the document's Content Security Policy.","name":"SecurityError","stack":"Error: Failed to construct 'Worker': Access to the script at 'blob:http://localhost:8080/6417d5c1-6355-4490-9f61-749d89357184' is denied by the document's Content Security Policy.\n at eval (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:164:20)\n at confettiCannon (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:506:36)\n at getDefaultFire (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:674:21)\n at module.exports (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:806:12)\n at handleReaction (webpack-internal:///(app-pages-browser)/./components/blog/Reactions.tsx:77:68)\n at onClick (webpack-internal:///(app-pages-browser)/./components/blog/Reactions.tsx:122:35)\n at HTMLUnknownElement.callCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19467:14)\n at HTMLUnknownElement.sentryWrapped (webpack-internal:///(app-pages-browser)/./node_modules/@sentry/browser/esm/helpers.js:79:23)\n at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19516:16)\n at invokeGuardedCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19591:29)\n at invokeGuardedCallbackAndCatchFirstError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19605:25)\n at executeDispatch (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30661:3)\n at processDispatchQueueItemsInOrder (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30693:7)\n at processDispatchQueue (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30706:5)\n at dispatchEventsForPlugins (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30717:3)\n at eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30907:12)\n at batchedUpdates$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23771:12)\n at batchedUpdates (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27623:12)\n at dispatchEventForPluginEventSystem (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30906:3)\n at dispatchEvent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28679:5)\n at dispatchDiscreteEvent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28650:5)"}],"logger":"console"},"level":"warning","message":"🎊 Could not load worker SecurityError: Failed to construct 'Worker': Access to the script at 'blob:http://localhost:8080/6417d5c1-6355-4490-9f61-749d89357184' is denied by the document's Content Security Policy."}]}
\ No newline at end of file
diff --git a/packages/overlay/_fixtures/Capture.Message.txt b/packages/overlay/_fixtures/Capture.Message.txt
new file mode 100644
index 000000000..22615c133
--- /dev/null
+++ b/packages/overlay/_fixtures/Capture.Message.txt
@@ -0,0 +1,3 @@
+{"event_id":"76ea0016c633409ab7305881c8f7bf8d","sent_at":"2023-11-29T07:36:32.014Z","sdk":{"name":"sentry.javascript.nextjs","version":"7.81.1"},"trace":{"environment":"development","trace_id":"f82608a1c05d4a4ba9bdb6b6bf0e9f8b"}}
+{"type":"event"}
+{"message":"hitting API","level":"info","event_id":"76ea0016c633409ab7305881c8f7bf8d","platform":"javascript","request":{"url":"http://localhost:8080/blog/secure-coding-practice","headers":{"Referer":"http://localhost:8080/","User-Agent":"Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36"}},"timestamp":1701243392.007,"environment":"development","sdk":{"integrations":["InboundFilters","FunctionToString","TryCatch","Breadcrumbs","GlobalHandlers","LinkedErrors","Dedupe","HttpContext","BrowserTracing","Replay","RewriteFrames"],"name":"sentry.javascript.nextjs","version":"7.81.1","packages":[{"name":"npm:@sentry/nextjs","version":"7.81.1"},{"name":"npm:@sentry/react","version":"7.81.1"}]},"tags":{"runtime":"browser"},"breadcrumbs":[{"timestamp":1701243378.873,"category":"console","data":{"arguments":["🔎 [Spotlight]","App rerender"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] App rerender"},{"timestamp":1701243378.875,"category":"console","data":{"arguments":["🔎 [Spotlight]","Integration data:",{}],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Integration data: [object Object]"},{"timestamp":1701243378.894,"category":"console","data":{"arguments":["🔎 [Spotlight]","Injecting into application"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Injecting into application"},{"timestamp":1701243378.933,"category":"console","data":{"arguments":["🔎 [Spotlight]","Connecting to sidecar at","http://localhost:8969/stream"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Connecting to sidecar at http://localhost:8969/stream"},{"timestamp":1701243378.934,"category":"console","data":{"arguments":["🔎 [Spotlight]","Adding listener for","application/x-sentry-envelope","sum",0],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Adding listener for application/x-sentry-envelope sum 0"},{"timestamp":1701243378.959,"category":"console","data":{"arguments":["🔎 [Spotlight]","Open"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Open"},{"timestamp":1701243378.96,"category":"console","data":{"arguments":["🔎 [Spotlight]","Received new application/x-sentry-envelope event"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Received new application/x-sentry-envelope event"},{"timestamp":1701243378.962,"category":"console","data":{"arguments":["🔎 [Spotlight]","Received new application/x-sentry-envelope event"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Received new application/x-sentry-envelope event"},{"timestamp":1701243378.97,"category":"console","data":{"arguments":["🔎 [Spotlight]","App rerender"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] App rerender"},{"timestamp":1701243378.971,"category":"console","data":{"arguments":["🔎 [Spotlight]","Integration data:",{"sentry":"[Array]"}],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Integration data: [object Object]"},{"timestamp":1701243379.026,"category":"console","data":{"arguments":["Warning: Extra attributes from the server: %s%s","data-new-gr-c-s-check-loaded,data-gr-ext-installed,style","\n at body\n at html\n at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)\n at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)\n at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)\n at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)\n at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)\n at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)\n at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11)\n at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11)\n at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)\n at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13)\n at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11)\n at RSCComponent\n at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11)"],"logger":"console"},"level":"error","message":"Warning: Extra attributes from the server: %s%s data-new-gr-c-s-check-loaded,data-gr-ext-installed,style \n at body\n at html\n at RedirectErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)\n at RedirectBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)\n at NotFoundErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:54:9)\n at NotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)\n at DevRootNotFoundBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/dev-root-not-found-boundary.js:32:11)\n at ReactDevOverlay (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)\n at HotReload (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:294:11)\n at Router (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:157:11)\n at ErrorBoundaryHandler (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:82:9)\n at ErrorBoundary (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/error-boundary.js:110:11)\n at AppRouter (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/components/app-router.js:440:13)\n at ServerRoot (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:126:11)\n at RSCComponent\n at Root (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/client/app-index.js:142:11)"},{"timestamp":1701243379.028,"category":"navigation","data":{"from":"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/blog/secure-coding-practice","to":"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/blog/secure-coding-practice"}},{"timestamp":1701243379.053,"category":"console","data":{"arguments":["[Vercel Web Analytics] Failed to load script from https://va.vercel-scripts.com/v1/script.debug.js. Please check if any ad blockers are enabled and try again."],"logger":"console"},"level":"log","message":"[Vercel Web Analytics] Failed to load script from https://va.vercel-scripts.com/v1/script.debug.js. Please check if any ad blockers are enabled and try again."},{"timestamp":1701243379.797,"category":"fetch","data":{"method":"GET","url":"/api/views/secure-coding-practice","__span":"a1e8d91d5d3c68df","status_code":200,"response_body_size":15},"type":"http"},{"timestamp":1701243379.944,"category":"fetch","data":{"method":"GET","url":"/api/reactions/secure-coding-practice","__span":"bad4e3c7b1032c61","status_code":200,"response_body_size":222},"type":"http"},{"timestamp":1701243380.242,"category":"fetch","data":{"method":"POST","url":"/api/views/secure-coding-practice","__span":"82b35bcacbb4ba23","status_code":200,"response_body_size":15},"type":"http"},{"timestamp":1701243380.401,"category":"fetch","data":{"method":"POST","url":"/api/views/secure-coding-practice","__span":"97a7d9ab12682f95","status_code":200,"response_body_size":15},"type":"http"},{"timestamp":1701243380.514,"category":"fetch","data":{"method":"GET","url":"/api/views/secure-coding-practice","__span":"8fb056aeb84319fa","status_code":200,"response_body_size":15},"type":"http"},{"timestamp":1701243381.525,"category":"sentry.transaction","event_id":"8eb35971bea343a5ba583949d6c11c69","message":"8eb35971bea343a5ba583949d6c11c69"},{"timestamp":1701243381.535,"category":"fetch","data":{"method":"POST","url":"http://localhost:8969/stream","status_code":204,"request_body_size":29875},"type":"http"},{"timestamp":1701243381.957,"category":"console","data":{"arguments":["🔎 [Spotlight]","Received new application/x-sentry-envelope event"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Received new application/x-sentry-envelope event"},{"timestamp":1701243381.959,"category":"console","data":{"arguments":["🔎 [Spotlight]","App rerender"],"logger":"console"},"level":"log","message":"🔎 [Spotlight] App rerender"},{"timestamp":1701243381.959,"category":"console","data":{"arguments":["🔎 [Spotlight]","Integration data:",{"sentry":"[Array]"}],"logger":"console"},"level":"log","message":"🔎 [Spotlight] Integration data: [object Object]"},{"timestamp":1701243392,"category":"ui.click","message":"svg"},{"timestamp":1701243392.003,"category":"console","data":{"arguments":["🎊 Could not load worker",{"message":"Failed to construct 'Worker': Access to the script at 'blob:http://localhost:8080/4842f047-d487-4033-80c3-eeb2262a593d' is denied by the document's Content Security Policy.","name":"SecurityError","stack":"Error: Failed to construct 'Worker': Access to the script at 'blob:http://localhost:8080/4842f047-d487-4033-80c3-eeb2262a593d' is denied by the document's Content Security Policy.\n at eval (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:164:20)\n at confettiCannon (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:506:36)\n at getDefaultFire (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:674:21)\n at module.exports (webpack-internal:///(app-pages-browser)/./node_modules/canvas-confetti/dist/confetti.module.mjs:806:12)\n at handleReaction (webpack-internal:///(app-pages-browser)/./components/blog/Reactions.tsx:77:68)\n at onClick (webpack-internal:///(app-pages-browser)/./components/blog/Reactions.tsx:122:35)\n at HTMLUnknownElement.callCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19467:14)\n at HTMLUnknownElement.sentryWrapped (webpack-internal:///(app-pages-browser)/./node_modules/@sentry/browser/esm/helpers.js:79:23)\n at Object.invokeGuardedCallbackImpl (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19516:16)\n at invokeGuardedCallback (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19591:29)\n at invokeGuardedCallbackAndCatchFirstError (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:19605:25)\n at executeDispatch (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30661:3)\n at processDispatchQueueItemsInOrder (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30693:7)\n at processDispatchQueue (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30706:5)\n at dispatchEventsForPlugins (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30717:3)\n at eval (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30907:12)\n at batchedUpdates$1 (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:23771:12)\n at batchedUpdates (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:27623:12)\n at dispatchEventForPluginEventSystem (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:30906:3)\n at dispatchEvent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28679:5)\n at dispatchDiscreteEvent (webpack-internal:///(app-pages-browser)/./node_modules/next/dist/compiled/react-dom/cjs/react-dom.development.js:28650:5)"}],"logger":"console"},"level":"warning","message":"🎊 Could not load worker SecurityError: Failed to construct 'Worker': Access to the script at 'blob:http://localhost:8080/4842f047-d487-4033-80c3-eeb2262a593d' is denied by the document's Content Security Policy."}],"contexts":{"trace":{"trace_id":"f82608a1c05d4a4ba9bdb6b6bf0e9f8b","span_id":"8d31c0d5e3be9df6"}}}
\ No newline at end of file
diff --git a/packages/overlay/src/integrations/sentry/components/EventDetails.tsx b/packages/overlay/src/integrations/sentry/components/EventDetails.tsx
index 6999a8ab1..c7539ba81 100644
--- a/packages/overlay/src/integrations/sentry/components/EventDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/EventDetails.tsx
@@ -5,17 +5,15 @@ import sentryDataCache from '../data/sentryDataCache';
import { SentryEvent } from '../types';
import EventBreadcrumbs from './EventBreadcrumbs';
import EventContexts from './EventContexts';
-import Error, { ErrorTitle } from './Events/Error';
+import Event, { EventTitle } from './Events/Event';
import PlatformIcon from './PlatformIcon';
function renderEvent(event: SentryEvent) {
- if ('exception' in event) return ;
- return null;
+ return ;
}
function renderEventTitle(event: SentryEvent) {
- if ('exception' in event) return ;
- return 'Unknown Event';
+ return ;
}
export default function EventDetails() {
diff --git a/packages/overlay/src/integrations/sentry/components/EventList.tsx b/packages/overlay/src/integrations/sentry/components/EventList.tsx
index f724540fa..c646047c7 100644
--- a/packages/overlay/src/integrations/sentry/components/EventList.tsx
+++ b/packages/overlay/src/integrations/sentry/components/EventList.tsx
@@ -2,13 +2,12 @@ import { Link } from 'react-router-dom';
import CardList from '~/components/CardList';
import { useSentryEvents } from '../data/useSentryEvents';
import { SentryEvent } from '../types';
-import { ErrorSummary } from './Events/Error';
+import { EventSummary } from './Events/Event';
import PlatformIcon from './PlatformIcon';
import TimeSince from './TimeSince';
function renderEvent(event: SentryEvent) {
- if ('exception' in event) return ;
- return null;
+ return ;
}
export default function EventList() {
diff --git a/packages/overlay/src/integrations/sentry/components/Events/Error.tsx b/packages/overlay/src/integrations/sentry/components/Events/Error.tsx
index e02ed7308..f83b82269 100644
--- a/packages/overlay/src/integrations/sentry/components/Events/Error.tsx
+++ b/packages/overlay/src/integrations/sentry/components/Events/Error.tsx
@@ -3,7 +3,6 @@ import Frame from './Error/Frame';
export function ErrorTitle({ event }: { event: SentryErrorEvent }) {
const values = arraifyValues(event.exception);
-
return (
<>
{values[0].type}: {values[0].value}
@@ -24,7 +23,7 @@ export function ErrorSummary({ event }: { event: SentryErrorEvent }) {
);
}
-export default function Error({ event }: { event: SentryErrorEvent }) {
+export function Error({ event }: { event: SentryErrorEvent }) {
const values = arraifyValues(event.exception);
return (
diff --git a/packages/overlay/src/integrations/sentry/components/Events/Event.tsx b/packages/overlay/src/integrations/sentry/components/Events/Event.tsx
new file mode 100644
index 000000000..6b0ee81ba
--- /dev/null
+++ b/packages/overlay/src/integrations/sentry/components/Events/Event.tsx
@@ -0,0 +1,40 @@
+import { SentryErrorEvent, SentryEvent } from '../../types';
+import { Error, ErrorSummary, ErrorTitle } from './Error';
+
+export function EventTitle({ event }: { event: SentryErrorEvent | SentryEvent }) {
+ if ('exception' in event) {
+ return ;
+ }
+
+ return (
+ <>
+ {event.message}
+
+ );
+}
+
+export function EventSummary({ event }: { event: SentryErrorEvent | SentryEvent }) {
+ if ('exception' in event) {
+ return ;
+ }
+ return (
+
+
+ {event.message}
+
+
+ );
+}
+
+export default function Event({ event }: { event: SentryErrorEvent | SentryEvent }) {
+ if ('exception' in event) {
+ return ;
+ }
+
+ return (
+
+ Message:
+ {event.message}
+
+ );
+}
diff --git a/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx b/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
index 5936ccf2e..613df4431 100644
--- a/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
+++ b/packages/overlay/src/integrations/sentry/components/SpanDetails.tsx
@@ -42,7 +42,7 @@ export default function SpanDetails({
}) {
const spanDuration = getDuration(span.start_timestamp, span.timestamp);
- const errors = dataCache.getEventsByTrace(span.trace_id).filter(e => e.type !== 'transaction');
+ const errors = dataCache.getEventsByTrace(span.trace_id).filter(e => e.type !== 'transaction' && 'exception' in e);
return (
diff --git a/packages/overlay/src/integrations/sentry/types.ts b/packages/overlay/src/integrations/sentry/types.ts
index 95805b6fb..12ccdb44b 100644
--- a/packages/overlay/src/integrations/sentry/types.ts
+++ b/packages/overlay/src/integrations/sentry/types.ts
@@ -47,6 +47,7 @@ type CommonEventAttrs = {
// not always present, but we are forcing it in EventCache
event_id: string;
timestamp: number;
+ message?: string;
breadcrumbs?: Breadcrumb[] | { values: Breadcrumb[] };
transaction?: string;
environment?: string;