stuff works

Author: nicohrubec

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

@@ -5,8 +5,6 @@ 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);
   },
 });

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

@@ -21,7 +21,7 @@ test('Sends a server function transaction', async ({ page }) => {
   expect(transactionEvent?.spans).toEqual(
     expect.arrayContaining([
       expect.objectContaining({
-        description: 'server.fetch',
+        description: expect.stringContaining('/_serverFn/'),
         op: 'function.tanstackstart',
         origin: 'auto.function.tanstackstart.serverFn',
         data: {

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

@@ -3,23 +3,42 @@ import { SEMANTIC_ATTRIBUTE_SENTRY_OP, SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, startSp
 export type ServerEntry = { fetch?: (request: Request) => Promise<unknown> };
 
 /**
+ * This function can be used to wrap the server entry request handler to add tracing to server-side functionality.
+ * You must explicitly define a server entry point in your application for this to work. This is done by passing the request handler to the `createServerEntry` function.
+ * For more information about the server entry point, see the [TanStack Start documentation](https://tanstack.com/start/docs/server-entry).
  *
- * @param serverEntry - server entry function to wrap
- * @returns - wrapped server entry function
+ * @example
+ * ```ts
+ * import { withSentry } from '@sentry/tanstackstart-react';
+ *
+ * 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) {
+ *    return handler.fetch(request);
+ *  },
+ * });
+ *
+ * export default serverEntry = createServerEntry(requestHandler);
+ * ```
+ *
+ * @param serverEntry - request handler to wrap
+ * @returns - wrapped request handler
  */
 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 request: Request = args[0];
+
+        // instrument server functions
+        if (request.url?.includes('_serverFn') || request.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
+              name: request.url,
               attributes: {
                 [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.function.tanstackstart.serverFn',
                 [SEMANTIC_ATTRIBUTE_SENTRY_OP]: op,
@@ -31,7 +50,6 @@ export function withSentry(serverEntry: ServerEntry): ServerEntry {
           );
         }
 
-        console.log('fetch without startSpan');
         return await target.apply(thisArg, args);
       },
     });