embrace-io · overbalance · Jul 8, 2026 · Jul 8, 2026 · Jul 8, 2026
@@ -6,42 +6,6 @@
     <title>Embrace Web SDK React Demo</title>
     <script src="/script1.js"></script>
     <script src="/script2.js"></script>
-    <script type="module">
-      const baseUrl = import.meta.env.BASE_URL;
-
-      // Redirect to correct demo if accessing a router demo path
-      const path = window.location.pathname;
-
-      const getRouterPath = routerName => {
-        return baseUrl !== '/' ? `${baseUrl}${routerName}/` : `/${routerName}/`;
-      };
-
-      if (
-        path.startsWith(getRouterPath('soft').replace(/\/$/, '')) &&
-        path !== getRouterPath('soft')
-      ) {
-        window.location.assign(getRouterPath('soft'));
-      } else if (
-        path.startsWith(getRouterPath('react-router-v5').replace(/\/$/, '')) &&
-        path !== getRouterPath('react-router-v5')
-      ) {
-        window.location.assign(getRouterPath('react-router-v5'));
-      } else if (
-        path.startsWith(
-          getRouterPath('react-router-v6-declarative').replace(/\/$/, '')
-        ) &&
-        path !== getRouterPath('react-router-v6-declarative')
-      ) {
-        window.location.assign(getRouterPath('react-router-v6-declarative'));
-      } else if (
-        path.startsWith(
-          getRouterPath('react-router-v6-data').replace(/\/$/, '')
-        ) &&
-        path !== getRouterPath('react-router-v6-data')
-      ) {
-        window.location.assign(getRouterPath('react-router-v6-data'));
-      }
-    </script>
   </head>
   <body>
     <div id="root"></div>

@@ -17,6 +17,7 @@
     "@embrace-io/web-sdk": "*",
     "@opentelemetry/api": "^1.9.1",
     "@opentelemetry/api-logs": "^0.220.0",
+    "@opentelemetry/core": "^2.9.0",
     "@opentelemetry/sdk-logs": "^0.220.0",
     "@opentelemetry/sdk-trace-web": "^2.9.0",
     "history": "^4.10.1",

@@ -6,6 +6,7 @@ const base = import.meta.env.BASE_URL;
 
 const NAV_ITEMS = [
   { href: base, label: 'Playground' },
+  { href: `${base}waterfall/`, label: 'Waterfall' },
   { href: `${base}soft/`, label: 'Soft Nav' },
   { href: `${base}react-router-v5/`, label: 'Router v5' },
   { href: `${base}react-router-v6-declarative/`, label: 'Router v6' },

@@ -1,7 +1,9 @@
 /// <reference types="vite/client" />
 import { DiagLogLevel, initSDK, user } from '@embrace-io/web-sdk';
 import type { Instrumentation } from '@opentelemetry/instrumentation';
+import type { LogRecordExporter } from '@opentelemetry/sdk-logs';
 import { ConsoleLogRecordExporter } from '@opentelemetry/sdk-logs';
+import type { SpanExporter } from '@opentelemetry/sdk-trace-web';
 import { ConsoleSpanExporter } from '@opentelemetry/sdk-trace-web';
 import { version } from '../../../packages/web-sdk/package.json' with {
   type: 'json',
@@ -11,13 +13,17 @@ const APP_ID = import.meta.env.VITE_APP_ID;
 const DATA_URL = import.meta.env.VITE_DATA_URL;
 const CONFIG_URL = import.meta.env.VITE_CONFIG_URL;
 
-const setupSDK = (instrumentations?: Instrumentation[]) => {
+const setupSDK = (
+  instrumentations?: Instrumentation[],
+  extraSpanExporters: SpanExporter[] = [],
+  extraLogExporters: LogRecordExporter[] = [],
+) => {
   const result = initSDK({
     logLevel: DiagLogLevel.ALL,
     appID: APP_ID || undefined,
     appVersion: version,
-    spanExporters: [new ConsoleSpanExporter()],
-    logExporters: [new ConsoleLogRecordExporter()],
+    spanExporters: [new ConsoleSpanExporter(), ...extraSpanExporters],
+    logExporters: [new ConsoleLogRecordExporter(), ...extraLogExporters],
     defaultInstrumentationConfig: {
       'empty-root': {
         rootNode: document.getElementById('root'),

@@ -1,13 +1,53 @@
 import { resolve } from 'node:path';
 import Sonda from 'sonda/vite';
+import type { PluginOption } from 'vite';
 import { defineConfig } from 'vite';
 
+// Sub-app entries: each is a directory with its own index.html. Their in-app
+// routes (e.g. /waterfall/a) are client-side pushState paths with no file on
+// disk, so a hard load of one needs to be served that entry's index.html.
+const SUB_APPS = [
+  'react-router-v5',
+  'react-router-v6-declarative',
+  'react-router-v6-data',
+  'soft',
+  'waterfall',
+];
+
+// History fallback: rewrite an extension-less deep path under a sub-app to that
+// sub-app's index.html so hard navigations resolve to the right entry (and keep
+// their sub-route in the URL). Applied to both the dev and preview servers.
+const rewriteDeepLink = (
+  req: { url?: string },
+  _res: unknown,
+  next: () => void,
+): void => {
+  const path = (req.url ?? '').split('?')[0];
+  const app = SUB_APPS.find(
+    (name) => path.startsWith(`/${name}/`) && path !== `/${name}/`,
+  );
+  if (app && !path.slice(1).includes('.')) {
+    req.url = `/${app}/`;
+  }
+  next();
+};
+
+const subAppDeepLinkFallback = (): PluginOption => ({
+  name: 'sub-app-deep-link-fallback',
+  configureServer(server) {
+    server.middlewares.use(rewriteDeepLink);
+  },
+  configurePreviewServer(server) {
+    server.middlewares.use(rewriteDeepLink);
+  },
+});
+
 // Debug collector runs at http://localhost:3001 (started by turbo `with` task).
 // To send telemetry to it, set VITE_DATA_URL=http://localhost:3001 in .env.
 // https://vite.dev/config/
 export default defineConfig({
   base: process.env.GITHUB_ACTIONS ? '/embrace-web-sdk/' : '/',
-  plugins: [Sonda({ enabled: false })],
+  plugins: [Sonda({ enabled: false }), subAppDeepLinkFallback()],
   server: {
     headers: {
       'Server-Timing': 'db;dur=78,cache;dur=0;desc="HIT",render;dur=163',
@@ -28,6 +68,7 @@ export default defineConfig({
           'react-router-v6-data/index.html',
         ),
         soft: resolve(__dirname, 'soft/index.html'),
+        waterfall: resolve(__dirname, 'waterfall/index.html'),
       },
       output: {
         sourcemapDebugIds: true,