Skip to content

Commit 8c655e4

Browse files
andreiborzaandreiborza
authored
feat(solidstart): Add solidstart SDK basic package (#12730)
1 parent bd484cf commit 8c655e4

40 files changed

+1506
-26
lines changed

‎dev-packages/e2e-tests/verdaccio-config/config.yaml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,12 @@ packages:
140140
unpublish: $all
141141
# proxy: npmjs # Don't proxy for E2E tests!
142142

143+
'@sentry/solidstart':
144+
access: $all
145+
publish: $all
146+
unpublish: $all
147+
# proxy: npmjs # Don't proxy for E2E tests!
148+
143149
'@sentry/svelte':
144150
access: $all
145151
publish: $all

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
"packages/replay-canvas",
7373
"packages/replay-worker",
7474
"packages/solid",
75+
"packages/solidstart",
7576
"packages/svelte",
7677
"packages/sveltekit",
7778
"packages/types",

‎packages/solid/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ render(
5252
);
5353
```
5454

55-
# ErrorBoundary
55+
# Solid ErrorBoundary
5656

5757
To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid
5858
JS `ErrorBoundary` component with `Sentry.withSentryErrorBoundary`.

‎packages/solid/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@
7878
"build:transpile:watch": "rollup -c rollup.npm.config.mjs --watch",
7979
"build:types:watch": "tsc -p tsconfig.types.json --watch",
8080
"build:tarball": "npm pack",
81-
"circularDepCheck": "madge --circular src/index.ts",
81+
"circularDepCheck": "madge --circular src/index.ts && madge --circular src/solidrouter.ts",
8282
"clean": "rimraf build coverage sentry-solid-*.tgz ./*.d.ts ./*.d.ts.map",
8383
"fix": "eslint . --format stylish --fix",
8484
"lint": "eslint . --format stylish",

‎packages/solid/test/errorboundary.test.tsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ describe('withSentryErrorBoundary', () => {
4444
it('calls `captureException` when an error occurs`', () => {
4545
render(() => (
4646
<SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
47+
{/* @ts-expect-error: component doesn't exist on purpose */}
4748
<NonExistentComponent />
4849
</SentryErrorBoundary>
4950
));
@@ -55,6 +56,7 @@ describe('withSentryErrorBoundary', () => {
5556
it('renders the fallback component', async () => {
5657
const { findByText } = render(() => (
5758
<SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
59+
{/* @ts-expect-error: component doesn't exist on purpose */}
5860
<NonExistentComponent />
5961
</SentryErrorBoundary>
6062
));
@@ -65,11 +67,12 @@ describe('withSentryErrorBoundary', () => {
6567
it('passes the `error` and `reset` function to the fallback component', () => {
6668
const mockFallback = vi.fn();
6769

68-
render(() => {
70+
render(() => (
6971
<SentryErrorBoundary fallback={mockFallback}>
72+
{/* @ts-expect-error: component doesn't exist on purpose */}
7073
<NonExistentComponent />
71-
</SentryErrorBoundary>;
72-
});
74+
</SentryErrorBoundary>
75+
));
7376

7477
expect(mockFallback).toHaveBeenCalledTimes(1);
7578
expect(mockFallback).toHaveBeenCalledWith(
@@ -81,6 +84,7 @@ describe('withSentryErrorBoundary', () => {
8184
it('calls `captureException` again after resetting', async () => {
8285
const { findByRole } = render(() => (
8386
<SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
87+
{/* @ts-expect-error: component doesn't exist on purpose */}
8488
<NonExistentComponent />
8589
</SentryErrorBoundary>
8690
));

‎packages/solid/test/sdk.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { init as solidInit } from '../src/sdk';
66

77
const browserInit = vi.spyOn(SentryBrowser, 'init');
88

9-
describe('Initialize Solid SDk', () => {
9+
describe('Initialize Solid SDK', () => {
1010
beforeEach(() => {
1111
vi.clearAllMocks();
1212
});

‎packages/solidstart/.eslintignore

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
/client
2+
/server
3+
/*.d.ts
4+
/*.d.ts.map

‎packages/solidstart/.eslintrc.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
module.exports = {
2+
env: {
3+
browser: true,
4+
node: true,
5+
},
6+
overrides: [
7+
{
8+
files: ['vite.config.ts'],
9+
parserOptions: {
10+
project: ['tsconfig.test.json'],
11+
},
12+
},
13+
{
14+
files: ['src/vite/**', 'src/server/**'],
15+
rules: {
16+
'@sentry-internal/sdk/no-optional-chaining': 'off',
17+
},
18+
},
19+
],
20+
extends: ['../../.eslintrc.js'],
21+
};

‎packages/solidstart/.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# types for the solidrouter integration that get output in root
2+
/client
3+
/server
4+
/*.d.ts
5+
/*.d.ts.map

‎packages/solidstart/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2023-2024 Functional Software, Inc. dba Sentry
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy of
6+
this software and associated documentation files (the "Software"), to deal in
7+
the Software without restriction, including without limitation the rights to
8+
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
9+
of the Software, and to permit persons to whom the Software is furnished to do
10+
so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎packages/solidstart/README.md

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
<p align="center">
2+
<a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
3+
<img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
4+
</a>
5+
</p>
6+
7+
# Official Sentry SDK for Solid Start (EXPERIMENTAL)
8+
9+
[![npm version](https://img.shields.io/npm/v/@sentry/solidstart.svg)](https://www.npmjs.com/package/@sentry/solidstart)
10+
[![npm dm](https://img.shields.io/npm/dm/@sentry/solidstart.svg)](https://www.npmjs.com/package/@sentry/solidstart)
11+
[![npm dt](https://img.shields.io/npm/dt/@sentry/solidstart.svg)](https://www.npmjs.com/package/@sentry/solidstart)
12+
13+
This SDK is considered ⚠️ **experimental and in an alpha state**. It may experience breaking changes. Please reach out
14+
on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. This
15+
SDK is for [Solid Start](https://start.solidjs.com/). If you're using [Solid](https://www.solidjs.com/) see our
16+
[Solid SDK here](https://github.com/getsentry/sentry-javascript/tree/develop/packages/solid).
17+
18+
## Links
19+
20+
- [Official SDK Docs](https://docs.sentry.io/platforms/javascript/guides/solidstart/)
21+
22+
## General
23+
24+
This package is a wrapper around `@sentry/node` for the server and `@sentry/solid` for the client side, with added
25+
functionality related to Solid Start.
26+
27+
## Manual Setup
28+
29+
If the setup through the wizard doesn't work for you, you can also set up the SDK manually.
30+
31+
### 1. Prerequesits & Installation
32+
33+
Install the Sentry Solid Start SDK:
34+
35+
```bash
36+
# Using npm
37+
npm install @sentry/solidstart
38+
39+
# Using yarn
40+
yarn add @sentry/solidstart
41+
```
42+
43+
### 2. Client-side Setup
44+
45+
Initialize the SDK in `entry-client.jsx`
46+
47+
```jsx
48+
import * as Sentry from '@sentry/solidstart';
49+
import { mount, StartClient } from '@solidjs/start/client';
50+
51+
Sentry.init({
52+
dsn: '__PUBLIC_DSN__',
53+
tracesSampleRate: 1.0, // Capture 100% of the transactions
54+
});
55+
56+
mount(() => <StartClient />, document.getElementById('app'));
57+
```
58+
59+
### 3. Server-side Setup
60+
61+
Create an instrument file named `instrument.server.mjs` and add your initialization code for the server-side SDK.
62+
63+
```javascript
64+
import * as Sentry from '@sentry/solidstart';
65+
66+
Sentry.init({
67+
dsn: 'https://[email protected]/4507459091824640',
68+
tracesSampleRate: 1.0, // Capture 100% of the transactions
69+
});
70+
```
71+
72+
### 4. Run your application
73+
74+
Then run your app
75+
76+
```bash
77+
NODE_OPTIONS='--import=./instrument.server.mjs' yarn start
78+
# or
79+
NODE_OPTIONS='--require=./instrument.server.js' yarn start
80+
```
81+
82+
# Solid Router
83+
84+
The Solid Router instrumentation uses the Solid Router library to create navigation spans to ensure you collect
85+
meaningful performance data about the health of your page loads and associated requests.
86+
87+
Wrap `Router`, `MemoryRouter` or `HashRouter` from `@solidjs/router` using `withSentryRouterRouting`. This creates a
88+
higher order component, which will enable Sentry to reach your router context.
89+
90+
```js
91+
import { withSentryRouterRouting } from '@sentry/solidstart/solidrouter';
92+
import { Route, Router } from '@solidjs/router';
93+
94+
const SentryRouter = Sentry.withSentryRouterRouting(Router);
95+
96+
render(
97+
() => (
98+
<SentryRouter>
99+
<Route path="/" component={App} />
100+
...
101+
</SentryRouter>
102+
),
103+
document.getElementById('root'),
104+
);
105+
```
106+
107+
# Solid ErrorBoundary
108+
109+
To automatically capture exceptions from inside a component tree and render a fallback component, wrap the native Solid
110+
JS `ErrorBoundary` component with `Sentry.withSentryErrorBoundary`.
111+
112+
```js
113+
import * as Sentry from '@sentry/solidstart';
114+
import { ErrorBoundary } from 'solid-js';
115+
116+
Sentry.init({
117+
dsn: '__PUBLIC_DSN__',
118+
tracesSampleRate: 1.0, // Capture 100% of the transactions
119+
});
120+
121+
const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
122+
123+
render(
124+
() => (
125+
<SentryErrorBoundary fallback={err => <div>Error: {err.message}</div>}>
126+
<ProblematicComponent />
127+
</SentryErrorBoundary>
128+
),
129+
document.getElementById('root'),
130+
);
131+
```

‎packages/solidstart/package.json

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
{
2+
"name": "@sentry/solidstart",
3+
"version": "8.13.0",
4+
"description": "Official Sentry SDK for Solid Start",
5+
"repository": "git://github.com/getsentry/sentry-javascript.git",
6+
"homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/solidstart",
7+
"author": "Sentry",
8+
"license": "MIT",
9+
"engines": {
10+
"node": ">=16"
11+
},
12+
"files": [
13+
"/build",
14+
"/client",
15+
"/server",
16+
"/*.d.ts",
17+
"/*.d.ts.map"
18+
],
19+
"main": "build/cjs/index.server.js",
20+
"module": "build/esm/index.server.js",
21+
"browser": "build/esm/index.client.js",
22+
"types": "build/types/index.types.d.ts",
23+
"//": [
24+
"For `@sentry/solidstart/solidrouter` types to resolve correctly for both `moduleResolution: bundler` and `moduleResolution: node`",
25+
"- type definitions have to be exported at root level (/build won't work)",
26+
"- type definitions have to match in name (i.e. `solidrouter.d.ts`)",
27+
"- the `types` entry needs to be set both at the root of the export and within `browser` and `node`"
28+
],
29+
"exports": {
30+
"./package.json": "./package.json",
31+
".": {
32+
"types": "./build/types/index.types.d.ts",
33+
"browser": {
34+
"import": "./build/esm/index.client.js",
35+
"require": "./build/cjs/index.client.js"
36+
},
37+
"node": {
38+
"import": "./build/esm/index.server.js",
39+
"require": "./build/cjs/index.server.js"
40+
}
41+
},
42+
"./solidrouter": {
43+
"types": "./solidrouter.d.ts",
44+
"browser": {
45+
"types": "./solidrouter.d.ts",
46+
"import": "./build/esm/solidrouter.client.js",
47+
"require": "./build/cjs/solidrouter.client.js"
48+
},
49+
"node": {
50+
"types": "./solidrouter.d.ts",
51+
"import": "./build/esm/solidrouter.server.js",
52+
"require": "./build/cjs/solidrouter.server.js"
53+
}
54+
}
55+
},
56+
"publishConfig": {
57+
"access": "public"
58+
},
59+
"peerDependencies": {
60+
"@solidjs/router": "^0.13.4",
61+
"@solidjs/start": "^1.0.0"
62+
},
63+
"peerDependenciesMeta": {
64+
"@solidjs/router": {
65+
"optional": true
66+
}
67+
},
68+
"dependencies": {
69+
"@sentry/core": "8.13.0",
70+
"@sentry/node": "8.13.0",
71+
"@sentry/opentelemetry": "8.13.0",
72+
"@sentry/solid": "8.13.0",
73+
"@sentry/types": "8.13.0",
74+
"@sentry/utils": "8.13.0",
75+
"@sentry/vite-plugin": "2.19.0"
76+
},
77+
"devDependencies": {
78+
"@solidjs/start": "^1.0.0",
79+
"@solidjs/router": "^0.13.4",
80+
"@solidjs/testing-library": "0.8.5",
81+
"@testing-library/jest-dom": "^6.4.5",
82+
"@testing-library/user-event": "^14.5.2",
83+
"vite-plugin-solid": "^2.8.2"
84+
},
85+
"scripts": {
86+
"build": "run-p build:transpile build:types",
87+
"build:dev": "yarn build",
88+
"build:transpile": "rollup -c rollup.npm.config.mjs",
89+
"build:types": "run-s build:types:core build:types:solidrouter",
90+
"build:types:core": "tsc -p tsconfig.types.json",
91+
"build:types:solidrouter": "tsc -p tsconfig.solidrouter-types.json",
92+
"build:watch": "run-p build:transpile:watch build:types:watch",
93+
"build:dev:watch": "yarn build:watch",
94+
"build:transpile:watch": "rollup -c rollup.npm.config.mjs --watch",
95+
"build:types:watch": "tsc -p tsconfig.types.json --watch",
96+
"build:tarball": "npm pack",
97+
"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",
98+
"clean": "rimraf build coverage sentry-solidstart-*.tgz ./*.d.ts ./*.d.ts.map ./client ./server",
99+
"fix": "eslint . --format stylish --fix",
100+
"lint": "eslint . --format stylish",
101+
"test": "yarn test:unit",
102+
"test:unit": "vitest run",
103+
"test:watch": "vitest --watch",
104+
"yalc:publish": "yalc publish --push --sig"
105+
},
106+
"volta": {
107+
"extends": "../../package.json"
108+
},
109+
"nx": {
110+
"targets": {
111+
"build:types": {
112+
"outputs": [
113+
"{projectRoot}/build/types",
114+
"{projectRoot}/client",
115+
"{projectRoot}/server",
116+
"{projectRoot}/*.d.ts",
117+
"{projectRoot}/*.d.ts.map"
118+
]
119+
}
120+
}
121+
}
122+
}

0 commit comments

Comments
 (0)