proxy fetch with withSentry

Author: nicohrubec

dev-packages/e2e-tests/test-applications/tanstackstart-react/src/server.ts

@@ -1,12 +1,14 @@
-import handler, { createServerEntry } from '@tanstack/react-start/server-entry'
-import type { ServerEntry } from '@tanstack/react-start/server-entry'
+import { withSentry } from '@sentry/tanstackstart-react';
 
-const requestHandler: ServerEntry = {
+import handler, { createServerEntry } from '@tanstack/react-start/server-entry';
+import type { ServerEntry } from '@tanstack/react-start/server-entry';
+
+const requestHandler: ServerEntry = withSentry({
   fetch(request: Request) {
     console.log('requestHandler fetch')
     console.log(request)
     return handler.fetch(request)
   },
-}
+});
 
 export default createServerEntry(requestHandler);

packages/tanstackstart-react/src/server/index.ts

@@ -4,6 +4,7 @@
 export * from '@sentry/node';
 
 export { init } from './sdk';
+export { withSentry } from './withSentry';
 
 /**
  * A passthrough error boundary for the server that doesn't depend on any react. Error boundaries don't catch SSR errors

packages/tanstackstart-react/src/server/withSentry.ts

@@ -0,0 +1,37 @@
+import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, startSpan } from '@sentry/node';
+
+export type ServerEntry = { fetch?: (request: Request) => Promise<unknown> }
+
+/**
+ *
+ * @param serverEntry - server entry function to wrap
+ * @returns - wrapped server entry function
+ */
+export function withSentry(serverEntry: ServerEntry): ServerEntry {
+  if (serverEntry.fetch) {
+    serverEntry.fetch = new Proxy<typeof serverEntry.fetch>(serverEntry.fetch, {
+      apply: async (target, thisArg, args) => {
+        console.log(args[0].url?.toString());
+        console.log('serverFn: ',args[0].url?.includes('_serverFn') || args[0].url?.includes('createServerFn'))
+        if (args[0].url?.includes('_serverFn') || args[0].url?.includes('createServerFn')) {
+          const op = 'function.tanstackstart';
+          console.log('fetch with startSpan')
+          return await startSpan(
+            {
+              op: op,
+              name: 'server.fetch', // TODO: use the actual server function name
+              attributes: {
+                [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.function.tanstackstart.serverFn',
+                [SEMANTIC_ATTRIBUTE_SENTRY_OP]: op
+              },
+            },
+            async () => { return await target.apply(thisArg, args) }
+          );
+        }
+
+        return await target.apply(thisArg, args)
+      },
+    });
+  }
+  return serverEntry;
+}