feat(solidstart): Add solidstart SDK basic package (#12730)

getsentry · Jul 2, 2024 · 8c655e4 · 8c655e4
1 parent bd484cf
commit 8c655e4
Show file tree

Hide file tree

Showing 40 changed files with 1,506 additions and 26 deletions.
diff --git a/dev-packages/e2e-tests/verdaccio-config/config.yaml b/dev-packages/e2e-tests/verdaccio-config/config.yaml
@@ -140,6 +140,12 @@ packages:
     unpublish: $all
     # proxy: npmjs # Don't proxy for E2E tests!
 
+  '@sentry/solidstart':
+    access: $all
+    publish: $all
+    unpublish: $all
+    # proxy: npmjs # Don't proxy for E2E tests!
+
   '@sentry/svelte':
     access: $all
     publish: $all

diff --git a/package.json b/package.json
@@ -72,6 +72,7 @@
     "packages/replay-canvas",
     "packages/replay-worker",
     "packages/solid",
+    "packages/solidstart",
     "packages/svelte",
     "packages/sveltekit",
     "packages/types",

diff --git a/packages/solid/README.md b/packages/solid/README.md
@@ -52,7 +52,7 @@ render(
 );
 ```
 
-# ErrorBoundary
+# Solid ErrorBoundary
 
 To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid
 JS `ErrorBoundary` component with `Sentry.withSentryErrorBoundary`.

diff --git a/packages/solid/package.json b/packages/solid/package.json
@@ -78,7 +78,7 @@
     "build:transpile:watch": "rollup -c rollup.npm.config.mjs --watch",
     "build:types:watch": "tsc -p tsconfig.types.json --watch",
     "build:tarball": "npm pack",
-    "circularDepCheck": "madge --circular src/index.ts",
+    "circularDepCheck": "madge --circular src/index.ts && madge --circular src/solidrouter.ts",
     "clean": "rimraf build coverage sentry-solid-*.tgz ./*.d.ts ./*.d.ts.map",
     "fix": "eslint . --format stylish --fix",
     "lint": "eslint . --format stylish",

diff --git a/packages/solid/test/errorboundary.test.tsx b/packages/solid/test/errorboundary.test.tsx
@@ -44,6 +44,7 @@ describe('withSentryErrorBoundary', () => {
   it('calls `captureException` when an error occurs`', () => {
     render(() => (
       <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
       </SentryErrorBoundary>
     ));
@@ -55,6 +56,7 @@ describe('withSentryErrorBoundary', () => {
   it('renders the fallback component', async () => {
     const { findByText } = render(() => (
       <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
       </SentryErrorBoundary>
     ));
@@ -65,11 +67,12 @@ describe('withSentryErrorBoundary', () => {
   it('passes the `error` and `reset` function to the fallback component', () => {
     const mockFallback = vi.fn();
 
-    render(() => {
+    render(() => (
       <SentryErrorBoundary fallback={mockFallback}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
-      </SentryErrorBoundary>;
-    });
+      </SentryErrorBoundary>
+    ));
 
     expect(mockFallback).toHaveBeenCalledTimes(1);
     expect(mockFallback).toHaveBeenCalledWith(
@@ -81,6 +84,7 @@ describe('withSentryErrorBoundary', () => {
   it('calls `captureException` again after resetting', async () => {
     const { findByRole } = render(() => (
       <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+        {/* @ts-expect-error: component doesn't exist on purpose */}
         <NonExistentComponent />
       </SentryErrorBoundary>
     ));

diff --git a/packages/solid/test/sdk.test.ts b/packages/solid/test/sdk.test.ts
@@ -6,7 +6,7 @@ import { init as solidInit } from '../src/sdk';
 
 const browserInit = vi.spyOn(SentryBrowser, 'init');
 
-describe('Initialize Solid SDk', () => {
+describe('Initialize Solid SDK', () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });

diff --git a/packages/solidstart/.eslintignore b/packages/solidstart/.eslintignore
@@ -0,0 +1,4 @@
+/client
+/server
+/*.d.ts
+/*.d.ts.map
diff --git a/packages/solidstart/.eslintrc.js b/packages/solidstart/.eslintrc.js
@@ -0,0 +1,21 @@
+module.exports = {
+  env: {
+    browser: true,
+    node: true,
+  },
+  overrides: [
+    {
+      files: ['vite.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+    },
+    {
+      files: ['src/vite/**', 'src/server/**'],
+      rules: {
+        '@sentry-internal/sdk/no-optional-chaining': 'off',
+      },
+    },
+  ],
+  extends: ['../../.eslintrc.js'],
+};
diff --git a/packages/solidstart/.gitignore b/packages/solidstart/.gitignore
@@ -0,0 +1,5 @@
+# types for the solidrouter integration that get output in root
+/client
+/server
+/*.d.ts
+/*.d.ts.map
diff --git a/packages/solidstart/LICENSE b/packages/solidstart/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-2024 Functional Software, Inc. dba Sentry
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/solidstart/README.md b/packages/solidstart/README.md
@@ -0,0 +1,131 @@
+<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 Solid Start (EXPERIMENTAL)
+
+[![npm version](https://img.shields.io/npm/v/@sentry/solidstart.svg)](https://www.npmjs.com/package/@sentry/solidstart)
+[![npm dm](https://img.shields.io/npm/dm/@sentry/solidstart.svg)](https://www.npmjs.com/package/@sentry/solidstart)
+[![npm dt](https://img.shields.io/npm/dt/@sentry/solidstart.svg)](https://www.npmjs.com/package/@sentry/solidstart)
+
+This SDK is considered ⚠️ **experimental and in an alpha state**. It may experience breaking changes. Please reach out
+on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. This
+SDK is for [Solid Start](https://start.solidjs.com/). If you're using [Solid](https://www.solidjs.com/) see our
+[Solid SDK here](https://github.com/getsentry/sentry-javascript/tree/develop/packages/solid).
+
+## Links
+
+- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/solidstart/)
+
+## General
+
+This package is a wrapper around `@sentry/node` for the server and `@sentry/solid` for the client side, with added
+functionality related to Solid Start.
+
+## Manual Setup
+
+If the setup through the wizard doesn't work for you, you can also set up the SDK manually.
+
+### 1. Prerequesits & Installation
+
+Install the Sentry Solid Start SDK:
+
+```bash
+# Using npm
+npm install @sentry/solidstart
+
+# Using yarn
+yarn add @sentry/solidstart
+```
+
+### 2. Client-side Setup
+
+Initialize the SDK in `entry-client.jsx`
+
+```jsx
+import * as Sentry from '@sentry/solidstart';
+import { mount, StartClient } from '@solidjs/start/client';
+
+Sentry.init({
+  dsn: '__PUBLIC_DSN__',
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+});
+
+mount(() => <StartClient />, document.getElementById('app'));
+```
+
+### 3. Server-side Setup
+
+Create an instrument file named `instrument.server.mjs` and add your initialization code for the server-side SDK.
+
+```javascript
+import * as Sentry from '@sentry/solidstart';
+
+Sentry.init({
+  dsn: 'https://0e67f7dd5326d51506e92d7f1eff887a@o447951.ingest.us.sentry.io/4507459091824640',
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+});
+```
+
+### 4. Run your application
+
+Then run your app
+
+```bash
+NODE_OPTIONS='--import=./instrument.server.mjs' yarn start
+# or
+NODE_OPTIONS='--require=./instrument.server.js' yarn start
+```
+
+# Solid Router
+
+The Solid Router instrumentation uses the Solid Router library to create navigation spans to ensure you collect
+meaningful performance data about the health of your page loads and associated requests.
+
+Wrap `Router`, `MemoryRouter` or `HashRouter` from `@solidjs/router` using `withSentryRouterRouting`. This creates a
+higher order component, which will enable Sentry to reach your router context.
+
+```js
+import { withSentryRouterRouting } from '@sentry/solidstart/solidrouter';
+import { Route, Router } from '@solidjs/router';
+
+const SentryRouter = Sentry.withSentryRouterRouting(Router);
+
+render(
+  () => (
+    <SentryRouter>
+      <Route path="/" component={App} />
+      ...
+    </SentryRouter>
+  ),
+  document.getElementById('root'),
+);
+```
+
+# Solid ErrorBoundary
+
+To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid
+JS `ErrorBoundary` component with `Sentry.withSentryErrorBoundary`.
+
+```js
+import * as Sentry from '@sentry/solidstart';
+import { ErrorBoundary } from 'solid-js';
+
+Sentry.init({
+  dsn: '__PUBLIC_DSN__',
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+});
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+render(
+  () => (
+    <SentryErrorBoundary fallback={err => <div>Error: {err.message}</div>}>
+      <ProblematicComponent />
+    </SentryErrorBoundary>
+  ),
+  document.getElementById('root'),
+);
+```
diff --git a/packages/solidstart/package.json b/packages/solidstart/package.json
@@ -0,0 +1,122 @@
+{
+  "name": "@sentry/solidstart",
+  "version": "8.13.0",
+  "description": "Official Sentry SDK for Solid Start",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/solidstart",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16"
+  },
+  "files": [
+    "/build",
+    "/client",
+    "/server",
+    "/*.d.ts",
+    "/*.d.ts.map"
+  ],
+  "main": "build/cjs/index.server.js",
+  "module": "build/esm/index.server.js",
+  "browser": "build/esm/index.client.js",
+  "types": "build/types/index.types.d.ts",
+  "//": [
+    "For `@sentry/solidstart/solidrouter` types to resolve correctly for both `moduleResolution: bundler` and `moduleResolution: node`",
+    "- type definitions have to be exported at root level (/build won't work)",
+    "- type definitions have to match in name (i.e. `solidrouter.d.ts`)",
+    "- the `types` entry needs to be set both at the root of the export and within `browser` and `node`"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./build/types/index.types.d.ts",
+      "browser": {
+        "import": "./build/esm/index.client.js",
+        "require": "./build/cjs/index.client.js"
+      },
+      "node": {
+        "import": "./build/esm/index.server.js",
+        "require": "./build/cjs/index.server.js"
+      }
+    },
+    "./solidrouter": {
+      "types": "./solidrouter.d.ts",
+      "browser": {
+        "types": "./solidrouter.d.ts",
+        "import": "./build/esm/solidrouter.client.js",
+        "require": "./build/cjs/solidrouter.client.js"
+      },
+      "node": {
+        "types": "./solidrouter.d.ts",
+        "import": "./build/esm/solidrouter.server.js",
+        "require": "./build/cjs/solidrouter.server.js"
+      }
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@solidjs/router": "^0.13.4",
+    "@solidjs/start": "^1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@solidjs/router": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@sentry/core": "8.13.0",
+    "@sentry/node": "8.13.0",
+    "@sentry/opentelemetry": "8.13.0",
+    "@sentry/solid": "8.13.0",
+    "@sentry/types": "8.13.0",
+    "@sentry/utils": "8.13.0",
+    "@sentry/vite-plugin": "2.19.0"
+  },
+  "devDependencies": {
+    "@solidjs/start": "^1.0.0",
+    "@solidjs/router": "^0.13.4",
+    "@solidjs/testing-library": "0.8.5",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/user-event": "^14.5.2",
+    "vite-plugin-solid": "^2.8.2"
+  },
+  "scripts": {
+    "build": "run-p build:transpile build:types",
+    "build:dev": "yarn build",
+    "build:transpile": "rollup -c rollup.npm.config.mjs",
+    "build:types": "run-s build:types:core build:types:solidrouter",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:solidrouter": "tsc -p tsconfig.solidrouter-types.json",
+    "build:watch": "run-p build:transpile:watch build:types:watch",
+    "build:dev:watch": "yarn build:watch",
+    "build:transpile:watch": "rollup -c rollup.npm.config.mjs --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "npm pack",
+    "circularDepCheck": "madge --circular src/index.client.ts && madge --circular src/index.server.ts && madge --circular src/index.types.ts && madge --circular src/solidrouter.client.ts && madge --circular src/solidrouter.server.ts && madge --circular src/solidrouter.ts",
+    "clean": "rimraf build coverage sentry-solidstart-*.tgz ./*.d.ts ./*.d.ts.map ./client ./server",
+    "fix": "eslint . --format stylish --fix",
+    "lint": "eslint . --format stylish",
+    "test": "yarn test:unit",
+    "test:unit": "vitest run",
+    "test:watch": "vitest --watch",
+    "yalc:publish": "yalc publish --push --sig"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "nx": {
+    "targets": {
+      "build:types": {
+        "outputs": [
+          "{projectRoot}/build/types",
+          "{projectRoot}/client",
+          "{projectRoot}/server",
+          "{projectRoot}/*.d.ts",
+          "{projectRoot}/*.d.ts.map"
+        ]
+      }
+    }
+  }
+}