feat: Add Remix SDK

package.json

@@ -45,6 +45,7 @@
     "packages/node",
     "packages/node-integration-tests",
     "packages/react",
+    "packages/remix",
     "packages/serverless",
     "packages/tracing",
     "packages/types",

packages/remix/.eslintrc.js

@@ -0,0 +1,13 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
+  parserOptions: {
+    jsx: true,
+  },
+  extends: ['../../.eslintrc.js'],
+  rules: {
+    '@sentry-internal/sdk/no-async-await': 'off',
+  },
+};

packages/remix/LICENSE

@@ -0,0 +1,29 @@
+MIT License
+
+Copyright (c) 2021, Sentry
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

packages/remix/README.md

@@ -0,0 +1,9 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Official Sentry SDK for Remix
+
+< TBD >

packages/remix/jest.config.js

@@ -0,0 +1 @@
+module.exports = require('../../jest/jest.config.js');

packages/remix/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@sentry/remix",
+  "version": "7.0.0-beta.0",
+  "description": "Official Sentry SDK for Remix",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/remix",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=14"
+  },
+  "main": "build/cjs/index.server.js",
+  "module": "build/esm/index.server.js",
+  "browser": "build/esm/index.client.js",
+  "types": "build/types/index.server.d.ts",
+  "private": true,
+  "dependencies": {
+    "@sentry/core": "7.0.0-beta.0",
+    "@sentry/hub": "7.0.0-beta.0",
+    "@sentry/integrations": "7.0.0-beta.0",
+    "@sentry/node": "7.0.0-beta.0",
+    "@sentry/react": "7.0.0-beta.0",
+    "@sentry/tracing": "7.0.0-beta.0",
+    "@sentry/utils": "7.0.0-beta.0",
+    "@sentry/webpack-plugin": "1.18.9",
+    "tslib": "^1.9.3"
+  },
+  "devDependencies": {
+    "@sentry/types": "7.0.0-beta.0",
+    "@types/webpack": "^4.41.31",
+    "@remix-run/node": "^1.4.3",
+    "@remix-run/react": "^1.4.3"
+  },
+  "peerDependencies": {
+    "@remix-run/node": "^1.4.3",
+    "@remix-run/react": "^1.4.3",
+    "react": "16.x || 17.x || 18.x",
+    "webpack": ">=4.0.0"
+  },
+  "peerDependenciesMeta": {
+    "webpack": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build": "run-p build:rollup",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:dev": "run-s build",
+    "build:es5": "yarn build:cjs # *** backwards compatibility - remove in v7 ***",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "build:rollup": "rollup -c rollup.npm.config.js",
+    "build:types": "tsc -p tsconfig.types.json",
+    "build:watch": "run-p build:cjs:watch build:esm:watch",
+    "build:cjs:watch": "tsc -p tsconfig.cjs.json --watch",
+    "build:dev:watch": "run-s build:watch",
+    "build:es5:watch": "yarn build:cjs:watch # *** backwards compatibility - remove in v7 ***",
+    "build:esm:watch": "tsc -p tsconfig.esm.json --watch",
+    "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.client.tsx && madge --circular --exclude 'config/types\\.ts' src/index.server.ts # see https://github.com/pahen/madge/issues/306",
+    "clean": "rimraf build coverage",
+    "fix": "run-s fix:eslint fix:prettier",
+    "fix:eslint": "eslint . --format stylish --fix",
+    "fix:prettier": "prettier --write \"{src,test,scripts}/**/*.ts\"",
+    "link:yarn": "yarn link",
+    "lint": "run-s lint:prettier lint:eslint",
+    "lint:eslint": "eslint . --cache --cache-location '../../eslintcache/' --format stylish",
+    "lint:prettier": "prettier --check \"{src,test,scripts}/**/*.ts\"",
+    "test": "run-s test:unit",
+    "test:unit": "jest",
+    "test:watch": "jest --watch"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "sideEffects": [
+    "./cjs/index.server.js",
+    "./esm/index.server.js",
+    "./src/index.server.ts"
+  ]
+}

packages/remix/rollup.npm.config.js

@@ -0,0 +1,7 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '../../rollup/index.js';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    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.client.tsx

@@ -0,0 +1,21 @@
+/* eslint-disable import/export */
+import { configureScope, init as reactInit, Integrations } from '@sentry/react';
+
+import { buildMetadata } from './utils/metadata';
+import { RemixOptions } from './utils/remixOptions';
+export { remixRouterInstrumentation, withSentryRouteTracing } from './performance/client';
+export { BrowserTracing } from '@sentry/tracing';
+export * from '@sentry/react';
+
+export { Integrations };
+
+export function init(options: RemixOptions): void {
+  buildMetadata(options, ['remix', 'react']);
+  options.environment = options.environment || process.env.NODE_ENV;
+
+  reactInit(options);
+
+  configureScope(scope => {
+    scope.setTag('runtime', 'browser');
+  });
+}

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/performance/client.tsx

@@ -0,0 +1,142 @@
+import { Transaction, TransactionContext } from '@sentry/types';
+import { getGlobalObject, logger } from '@sentry/utils';
+import * as React from 'react';
+
+import { IS_DEBUG_BUILD } from '../flags';
+
+const DEFAULT_TAGS = {
+  'routing.instrumentation': 'remix-router',
+} as const;
+
+type Params<Key extends string = string> = {
+  readonly [key in Key]: string | undefined;
+};
+
+interface RouteMatch<ParamKey extends string = string> {
+  params: Params<ParamKey>;
+  pathname: string;
+  id: string;
+  handle: unknown;
+}
+
+type UseEffect = (cb: () => void, deps: unknown[]) => void;
+type UseLocation = () => {
+  pathname: string;
+  search?: string;
+  hash?: string;
+  state?: unknown;
+  key?: unknown;
+};
+type UseMatches = () => RouteMatch[] | null;
+
+let activeTransaction: Transaction | undefined;
+
+let _useEffect: UseEffect;
+let _useLocation: UseLocation;
+let _useMatches: UseMatches;
+
+let _customStartTransaction: (context: TransactionContext) => Transaction | undefined;
+let _startTransactionOnLocationChange: boolean;
+
+const global = getGlobalObject<Window>();
+
+function getInitPathName(): string | undefined {
+  if (global && global.location) {
+    return global.location.pathname;
+  }
+
+  return undefined;
+}
+
+/**
+ * Creates a react-router v6 instrumention for Remix applications.
+ *
+ * This implementation is slightly different (and simpler) from the react-router instrumentation
+ * as in Remix, `useMatches` hook is available where in react-router-v6 it's not yet.
+ */
+export function remixRouterInstrumentation(useEffect: UseEffect, useLocation: UseLocation, useMatches: UseMatches) {
+  return (
+    customStartTransaction: (context: TransactionContext) => Transaction | undefined,
+    startTransactionOnPageLoad = true,
+    startTransactionOnLocationChange = true,
+  ): void => {
+    const initPathName = getInitPathName();
+    if (startTransactionOnPageLoad && initPathName) {
+      activeTransaction = customStartTransaction({
+        name: initPathName,
+        op: 'pageload',
+        tags: DEFAULT_TAGS,
+      });
+    }
+
+    _useEffect = useEffect;
+    _useLocation = useLocation;
+    _useMatches = useMatches;
+
+    _customStartTransaction = customStartTransaction;
+    _startTransactionOnLocationChange = startTransactionOnLocationChange;
+  };
+}
+
+/**
+ * Wraps a remix `root` (see: https://remix.run/docs/en/v1/guides/migrating-react-router-app#creating-the-root-route)
+ * To enable pageload/navigation tracing on every route.
+ */
+export function withSentryRouteTracing<P extends Record<string, unknown>, R extends React.FC<P>>(OrigApp: R): R {
+  const SentryRoot: React.FC<P> = (props: P) => {
+    // Early return when any of the required functions is not available.
+    if (!_useEffect || !_useLocation || !_useMatches || !_customStartTransaction) {
+      IS_DEBUG_BUILD &&
+        logger.warn('Remix SDK was unable to wrap your root because of one or more missing parameters.');
+
+      // @ts-ignore Setting more specific React Component typing for `R` generic above
+      // will break advanced type inference done by react router params
+      return <OrigApp {...props} />;
+    }
+
+    let isBaseLocation: boolean = false;
+
+    const location = _useLocation();
+    const matches = _useMatches();
+
+    _useEffect(() => {
+      if (activeTransaction && matches && matches.length) {
+        activeTransaction.setName(matches[matches.length - 1].id);
+      }
+
+      isBaseLocation = true;
+    }, []);
+
+    _useEffect(() => {
+      if (isBaseLocation) {
+        if (activeTransaction) {
+          activeTransaction.finish();
+        }
+
+        return;
+      }
+
+      if (_startTransactionOnLocationChange && matches && matches.length) {
+        if (activeTransaction) {
+          activeTransaction.finish();
+        }
+
+        activeTransaction = _customStartTransaction({
+          name: matches[matches.length - 1].id,
+          op: 'navigation',
+          tags: DEFAULT_TAGS,
+        });
+      }
+    }, [location]);
+
+    isBaseLocation = false;
+
+    // @ts-ignore Setting more specific React Component typing for `R` generic above
+    // will break advanced type inference done by react router params
+    return <OrigApp {...props} />;
+  };
+
+  // @ts-ignore Setting more specific React Component typing for `R` generic above
+  // will break advanced type inference done by react router params
+  return SentryRoot;
+}