page transactions working, API transactions not working

Author: lobsterkatie

packages/nextjs/package.json

@@ -26,6 +26,7 @@
     "tslib": "^1.9.3"
   },
   "devDependencies": {
+    "@sentry/tracing": "6.3.6",
     "@sentry/types": "6.3.6",
     "@types/webpack": "^5.28.0",
     "eslint": "7.20.0",

packages/nextjs/src/utils/instrumentServer.ts

@@ -1,6 +1,10 @@
+import { deepReadDirSync } from '@sentry/node';
+import { hasTracingEnabled } from '@sentry/tracing';
+import { Transaction } from '@sentry/types';
 import { fill } from '@sentry/utils';
 import * as http from 'http';
 import { default as createNextServer } from 'next';
+import * as path from 'path';
 import * as url from 'url';
 
 import * as Sentry from '../index.server';
@@ -10,23 +14,33 @@ type PlainObject<T = any> = { [key: string]: T };
 
 interface NextServer {
   server: Server;
+  createServer: (options: PlainObject) => Server;
 }
 
 interface Server {
   dir: string;
+  publicDir: string;
+}
+
+interface NextRequest extends http.IncomingMessage {
+  cookies: Record<string, string>;
+  url: string;
+}
+
+interface NextResponse extends http.ServerResponse {
+  __sentry__: {
+    transaction?: Transaction;
+  };
 }
 
 type HandlerGetter = () => Promise<ReqHandler>;
-type ReqHandler = (
-  req: http.IncomingMessage,
-  res: http.ServerResponse,
-  parsedUrl?: url.UrlWithParsedQuery,
-) => Promise<void>;
+type ReqHandler = (req: NextRequest, res: NextResponse, parsedUrl?: url.UrlWithParsedQuery) => Promise<void>;
 type ErrorLogger = (err: Error) => void;
 
 // these aliases are purely to make the function signatures more easily understandable
 type WrappedHandlerGetter = HandlerGetter;
 type WrappedErrorLogger = ErrorLogger;
+type WrappedReqHandler = ReqHandler;
 
 // TODO is it necessary for this to be an object?
 const closure: PlainObject = {};
@@ -61,12 +75,16 @@ function makeWrappedHandlerGetter(origHandlerGetter: HandlerGetter): WrappedHand
   const wrappedHandlerGetter = async function(this: NextServer): Promise<ReqHandler> {
     if (!closure.wrappingComplete) {
       closure.projectRootDir = this.server.dir;
+      closure.server = this.server;
+      closure.publicDir = this.server.publicDir;
 
       const serverPrototype = Object.getPrototypeOf(this.server);
 
       // wrap the logger so we can capture errors in page-level functions like `getServerSideProps`
       fill(serverPrototype, 'logError', makeWrappedErrorLogger);
 
+      fill(serverPrototype, 'handleRequest', makeWrappedReqHandler);
+
       closure.wrappingComplete = true;
     }
 
@@ -89,3 +107,77 @@ function makeWrappedErrorLogger(origErrorLogger: ErrorLogger): WrappedErrorLogge
     return origErrorLogger.call(this, err);
   };
 }
+
+/**
+ * Wrap the server's request handler to be able to create request transactions.
+ *
+ * @param origReqHandler The original request handler from the `Server` class
+ * @returns A wrapped version of that handler
+ */
+function makeWrappedReqHandler(origReqHandler: ReqHandler): WrappedReqHandler {
+  const liveServer = closure.server as Server;
+
+  // inspired by
+  // https://github.com/vercel/next.js/blob/4443d6f3d36b107e833376c2720c1e206eee720d/packages/next/next-server/server/next-server.ts#L1166
+  const publicDirFiles = new Set(
+    deepReadDirSync(liveServer.publicDir).map(p =>
+      encodeURI(
+        // switch any backslashes in the path to regular slashes
+        p.replace(/\\/g, '/'),
+      ),
+    ),
+  );
+
+  // add transaction start and stop to the normal request handling
+  const wrappedReqHandler = async function(
+    this: Server,
+    req: NextRequest,
+    res: NextResponse,
+    parsedUrl?: url.UrlWithParsedQuery,
+  ): Promise<void> {
+    // We only want to record page and API requests
+    if (hasTracingEnabled() && shouldTraceRequest(req.url, publicDirFiles)) {
+      const transaction = Sentry.startTransaction({
+        name: `${(req.method || 'GET').toUpperCase()} ${req.url}`,
+        op: 'http.server',
+      });
+      Sentry.getCurrentHub()
+        .getScope()
+        ?.setSpan(transaction);
+
+      res.__sentry__ = {};
+      res.__sentry__.transaction = transaction;
+    }
+
+    res.once('finish', () => {
+      const transaction = res.__sentry__?.transaction;
+      if (transaction) {
+        // Push `transaction.finish` to the next event loop so open spans have a chance to finish before the transaction
+        // closes
+        setImmediate(() => {
+          // TODO
+          // addExpressReqToTransaction(transaction, req);
+          transaction.setHttpStatus(res.statusCode);
+          transaction.finish();
+        });
+      }
+    });
+
+    return origReqHandler.call(this, req, res, parsedUrl);
+  };
+
+  return wrappedReqHandler;
+}
+
+/**
+ * Determine if the request should be traced, by filtering out requests for internal next files and static resources.
+ *
+ * @param url The URL of the request
+ * @param publicDirFiles A set containing relative paths to all available static resources (note that this does not
+ * include static *pages*, but rather images and the like)
+ * @returns false if the URL is for an internal or static resource
+ */
+function shouldTraceRequest(url: string, publicDirFiles: Set<string>): boolean {
+  // `static` is a deprecated but still-functional location for static resources
+  return !url.startsWith('/_next/') && !url.startsWith('/static/') && !publicDirFiles.has(url);
+}

packages/node/src/handlers.ts

@@ -255,8 +255,11 @@ export function extractRequestData(
         if (method === 'GET' || method === 'HEAD') {
           break;
         }
-        // body data:
-        //   node, express, koa: req.body
+        // body data: express, koa: req.body
+
+        // when using node by itself, you have to read the incoming stream(see
+        // https://nodejs.dev/learn/get-http-request-body-data-using-nodejs); if a user is doing that, we can't know
+        // where they're going to store the final result, so they'll have to capture this data themselves
         if (req.body !== undefined) {
           requestData.data = isString(req.body) ? req.body : JSON.stringify(normalize(req.body));
         }

packages/node/src/index.ts

@@ -41,6 +41,7 @@ export {
 export { NodeBackend, NodeOptions } from './backend';
 export { NodeClient } from './client';
 export { defaultIntegrations, init, lastEventId, flush, close, getSentryRelease } from './sdk';
+export { deepReadDirSync } from './utils';
 export { SDK_NAME } from './version';
 
 import { Integrations as CoreIntegrations } from '@sentry/core';

packages/node/src/utils.ts

@@ -0,0 +1,26 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+/**
+ * Recursively read the contents of a directory.
+ *
+ * @param targetDir The directory to scan. All returned paths will be relative to this directory.
+ * @param _paths Array to hold results, passed for purposes of recursion. Not meant to be provided by the caller.
+ * @returns Array holding all relative paths
+ */
+export function deepReadDirSync(targetDir: string, _paths?: string[]): string[] {
+  const paths = _paths || [];
+  const currentDirContents = fs.readdirSync(targetDir);
+
+  currentDirContents.forEach((fileOrDirName: string) => {
+    const fileOrDirAbsPath = path.join(targetDir, fileOrDirName);
+
+    if (fs.statSync(fileOrDirAbsPath).isDirectory()) {
+      deepReadDirSync(fileOrDirAbsPath, paths);
+      return;
+    }
+    paths.push(fileOrDirAbsPath.replace(targetDir, ''));
+  });
+
+  return paths;
+}