feat(remix): Add Remix server SDK

packages/remix/package.json

@@ -9,10 +9,10 @@
   "engines": {
     "node": ">=14"
   },
-  "main": "build/esm/index.js",
-  "module": "build/esm/index.js",
+  "main": "build/esm/index.server.js",
+  "module": "build/esm/index.server.js",
   "browser": "build/esm/index.client.js",
-  "types": "build/types/index.d.ts",
+  "types": "build/types/index.server.d.ts",
   "private": true,
   "dependencies": {
     "@sentry/core": "7.1.1",
@@ -52,7 +52,7 @@
     "build:rollup:watch": "rollup -c rollup.npm.config.js --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:npm": "ts-node ../../scripts/prepack.ts && npm pack ./build",
-    "circularDepCheck": "madge --circular src/index.ts",
+    "circularDepCheck": "madge --circular src/index.server.ts",
     "clean": "rimraf build coverage sentry-remix-*.tgz",
     "fix": "run-s fix:eslint fix:prettier",
     "fix:eslint": "eslint . --format stylish --fix",
@@ -66,5 +66,9 @@
   },
   "volta": {
     "extends": "../../package.json"
-  }
+  },
+  "sideEffects": [
+    "./esm/index.server.js",
+    "./src/index.server.ts"
+  ]
 }

packages/remix/rollup.npm.config.js

@@ -2,7 +2,6 @@ import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index.js'
 
 export default makeNPMConfigVariants(
   makeBaseNPMConfig({
-    // Todo: Replace with -> ['src/index.server.ts', 'src/index.client.tsx'],
-    entrypoints: 'src/index.ts',
+    entrypoints: ['src/index.server.ts', 'src/index.client.tsx'],
   }),
 );

packages/remix/src/flags.ts

@@ -0,0 +1,18 @@
+/*
+ * This file defines flags and constants that can be modified during compile time in order to facilitate tree shaking
+ * for users.
+ *
+ * Debug flags need to be declared in each package individually and must not be imported across package boundaries,
+ * because some build tools have trouble tree-shaking imported guards.
+ *
+ * As a convention, we define debug flags in a `flags.ts` file in the root of a package's `src` folder.
+ *
+ * Debug flag files will contain "magic strings" like `__SENTRY_DEBUG__` that may get replaced with actual values during
+ * our, or the user's build process. Take care when introducing new flags - they must not throw if they are not
+ * replaced.
+ */
+
+declare const __SENTRY_DEBUG__: boolean;
+
+/** Flag that is true for debug builds, false otherwise. */
+export const IS_DEBUG_BUILD = typeof __SENTRY_DEBUG__ === 'undefined' ? true : __SENTRY_DEBUG__;

packages/remix/src/index.server.ts

@@ -0,0 +1,34 @@
+/* eslint-disable import/export */
+import { configureScope, getCurrentHub, init as nodeInit } from '@sentry/node';
+
+import { instrumentServer } from './utils/instrumentServer';
+import { buildMetadata } from './utils/metadata';
+import { RemixOptions } from './utils/remixOptions';
+
+function sdkAlreadyInitialized(): boolean {
+  const hub = getCurrentHub();
+  return !!hub.getClient();
+}
+
+/** Initializes Sentry Remix SDK on Node. */
+export function init(options: RemixOptions): void {
+  buildMetadata(options, ['remix', 'node']);
+
+  if (sdkAlreadyInitialized()) {
+    // TODO: Log something
+    return;
+  }
+
+  instrumentServer();
+
+  nodeInit(options);
+
+  configureScope(scope => {
+    scope.setTag('runtime', 'node');
+  });
+}
+
+export { ErrorBoundary, withErrorBoundary } from '@sentry/react';
+export { remixRouterInstrumentation, withSentryRouteTracing } from './performance/client';
+export { BrowserTracing, Integrations } from '@sentry/tracing';
+export * from '@sentry/node';

packages/remix/src/utils/instrumentServer.ts

@@ -0,0 +1,195 @@
+import { captureException, configureScope, getCurrentHub, startTransaction } from '@sentry/node';
+import { getActiveTransaction, hasTracingEnabled } from '@sentry/tracing';
+import { addExceptionMechanism, fill, loadModule, logger } from '@sentry/utils';
+
+import { IS_DEBUG_BUILD } from '../flags';
+
+type AppLoadContext = unknown;
+type AppData = unknown;
+type RequestHandler = (request: Request, loadContext?: AppLoadContext) => Promise<Response>;
+type CreateRequestHandlerFunction = (build: ServerBuild, mode?: string) => RequestHandler;
+type ServerRouteManifest = RouteManifest<Omit<ServerRoute, 'children'>>;
+type Params<Key extends string = string> = {
+  readonly [key in Key]: string | undefined;
+};
+
+interface Route {
+  index?: boolean;
+  caseSensitive?: boolean;
+  id: string;
+  parentId?: string;
+  path?: string;
+}
+
+interface ServerRouteModule {
+  action?: DataFunction;
+  headers?: unknown;
+  loader?: DataFunction;
+}
+
+interface ServerRoute extends Route {
+  children: ServerRoute[];
+  module: ServerRouteModule;
+}
+
+interface RouteManifest<Route> {
+  [routeId: string]: Route;
+}
+
+interface ServerBuild {
+  entry: {
+    module: ServerEntryModule;
+  };
+  routes: ServerRouteManifest;
+  assets: unknown;
+}
+
+interface HandleDocumentRequestFunction {
+  (request: Request, responseStatusCode: number, responseHeaders: Headers, context: Record<symbol, unknown>):
+    | Promise<Response>
+    | Response;
+}
+
+interface HandleDataRequestFunction {
+  (response: Response, args: DataFunctionArgs): Promise<Response> | Response;
+}
+
+interface ServerEntryModule {
+  default: HandleDocumentRequestFunction;
+  handleDataRequest?: HandleDataRequestFunction;
+}
+
+interface DataFunctionArgs {
+  request: Request;
+  context: AppLoadContext;
+  params: Params;
+}
+
+interface DataFunction {
+  (args: DataFunctionArgs): Promise<Response> | Response | Promise<AppData> | AppData;
+}
+
+function makeWrappedDataFunction(origFn: DataFunction, name: 'action' | 'loader'): DataFunction {
+  return async function (this: unknown, args: DataFunctionArgs): Promise<Response | AppData> {
+    let res: Response | AppData;
+    const activeTransaction = getActiveTransaction();
+    const currentScope = getCurrentHub().getScope();
+
+    try {
+      const span = activeTransaction?.startChild({
+        op: `remix.server.${name}`,
+        description: activeTransaction.name,
+        tags: {
+          name,
+        },
+      });
+
+      if (span) {
+        // Assign data function to hub to be able to see `db` transactions (if any) as children.
+        currentScope?.setSpan(span);
+      }
+
+      res = await origFn.call(this, args);
+      span?.finish();
+    } catch (err) {
+      configureScope(scope => {
+        scope.addEventProcessor(event => {
+          addExceptionMechanism(event, {
+            type: 'instrument',
+            handled: true,
+            data: {
+              function: name,
+            },
+          });
+
+          return event;
+        });
+      });
+
+      captureException(err);
+
+      // Rethrow for other handlers
+      throw err;
+    }
+
+    return res;
+  };
+}
+
+function makeWrappedAction(origAction: DataFunction): DataFunction {
+  return makeWrappedDataFunction(origAction, 'action');
+}
+
+function makeWrappedLoader(origAction: DataFunction): DataFunction {
+  return makeWrappedDataFunction(origAction, 'loader');
+}
+
+function wrapRequestHandler(origRequestHandler: RequestHandler): RequestHandler {
+  return async function (this: unknown, request: Request, loadContext?: unknown): Promise<Response> {
+    const currentScope = getCurrentHub().getScope();
+
+    // debugger;
+    const transaction = hasTracingEnabled()
+      ? startTransaction({
+          name: request.url,
+          op: 'remix.server.requesthandler',
+          tags: {
+            method: request.method,
+          },
+        })
+      : undefined;
+
+    if (transaction) {
+      currentScope?.setSpan(transaction);
+    }
+
+    const res = (await origRequestHandler.call(this, request, loadContext)) as Response;
+
+    transaction?.setHttpStatus(res.status);
+    transaction?.finish();
+
+    return res;
+  };
+}
+
+function makeWrappedCreateRequestHandler(
+  origCreateRequestHandler: CreateRequestHandlerFunction,
+): CreateRequestHandlerFunction {
+  return function (this: unknown, build: ServerBuild, mode: string | undefined): RequestHandler {
+    const routes: ServerRouteManifest = {};
+
+    for (const [id, route] of Object.entries(build.routes)) {
+      const wrappedRoute = { ...route, module: { ...route.module } };
+
+      if (wrappedRoute.module.action) {
+        fill(wrappedRoute.module, 'action', makeWrappedAction);
+      }
+
+      if (wrappedRoute.module.loader) {
+        fill(wrappedRoute.module, 'loader', makeWrappedLoader);
+      }
+
+      routes[id] = wrappedRoute;
+    }
+
+    const requestHandler = origCreateRequestHandler.call(this, { ...build, routes }, mode);
+
+    return wrapRequestHandler(requestHandler);
+  };
+}
+
+/**
+ * Monkey-patch Remix's `createRequestHandler` from `@remix-run/server-runtime`
+ * which Remix Adapters (https://remix.run/docs/en/v1/api/remix) use underneath.
+ */
+export function instrumentServer(): void {
+  const pkg = loadModule<{ createRequestHandler: CreateRequestHandlerFunction }>('@remix-run/server-runtime');
+
+  if (!pkg) {
+    IS_DEBUG_BUILD && logger.warn('Remix SDK was unable to require `@remix-run/server-runtime` package.');
+
+    return;
+  }
+
+  fill(pkg, 'createRequestHandler', makeWrappedCreateRequestHandler);
+}

packages/remix/src/utils/remixOptions.ts

@@ -1,4 +1,5 @@
+import { NodeOptions } from '@sentry/node';
 import { BrowserOptions } from '@sentry/react';
 import { Options } from '@sentry/types';
 
-export type RemixOptions = Options | BrowserOptions;
+export type RemixOptions = Options | BrowserOptions | NodeOptions;

packages/remix/test/index.server.test.ts

@@ -0,0 +1,62 @@
+import * as SentryNode from '@sentry/node';
+import { getCurrentHub } from '@sentry/node';
+import { getGlobalObject } from '@sentry/utils';
+
+import { init } from '../src/index.server';
+
+const global = getGlobalObject();
+
+const nodeInit = jest.spyOn(SentryNode, 'init');
+
+describe('Server init()', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+    global.__SENTRY__.hub = undefined;
+  });
+
+  it('inits the Node SDK', () => {
+    expect(nodeInit).toHaveBeenCalledTimes(0);
+    init({});
+    expect(nodeInit).toHaveBeenCalledTimes(1);
+    expect(nodeInit).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        _metadata: {
+          sdk: {
+            name: 'sentry.javascript.remix',
+            version: expect.any(String),
+            packages: [
+              {
+                name: 'npm:@sentry/remix',
+                version: expect.any(String),
+              },
+              {
+                name: 'npm:@sentry/node',
+                version: expect.any(String),
+              },
+            ],
+          },
+        },
+      }),
+    );
+  });
+
+  it("doesn't reinitialize the node SDK if already initialized", () => {
+    expect(nodeInit).toHaveBeenCalledTimes(0);
+    init({});
+    expect(nodeInit).toHaveBeenCalledTimes(1);
+    init({});
+    expect(nodeInit).toHaveBeenCalledTimes(1);
+  });
+
+  it('sets runtime on scope', () => {
+    const currentScope = getCurrentHub().getScope();
+
+    // @ts-ignore need access to protected _tags attribute
+    expect(currentScope._tags).toEqual({});
+
+    init({});
+
+    // @ts-ignore need access to protected _tags attribute
+    expect(currentScope._tags).toEqual({ runtime: 'node' });
+  });
+});