feat(solidjs): Add withSentryErrorBoundary HOC

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }

dev-packages/e2e-tests/test-applications/solidjs/src/pageroot.tsx

@@ -10,6 +10,11 @@ export default function PageRoot(props) {
  Home
  </A>
  </li>
+ <li>
+ <A href="/error-boundary-example" class="no-underline hover:underline">
+ Error Boundary Example
+ </A>
+ </li>
  <li class="py-2 px-4">
  <A href="/error" class="no-underline hover:underline">
  Error

dev-packages/e2e-tests/test-applications/solidjs/src/pages/errorboundaryexample.tsx

@@ -0,0 +1,24 @@
+import * as Sentry from '@sentry/solidjs';
+import { ErrorBoundary } from 'solid-js';
+
+const SentryErrorBoundary = Sentry.withSentryErrorBoundary(ErrorBoundary);
+
+export default function ErrorBoundaryExample() {
+ return (
+ <SentryErrorBoundary
+ fallback={(error, reset) => (
+ <section class="bg-gray-100 text-gray-700 p-8">
+ <h1 class="text-2xl font-bold">Error Boundary Fallback</h1>
+ <div class="flex items-center space-x-2 mb-4">
+ <code>{error.message}</code>
+ </div>
+ <button id="errorBoundaryResetBtn" class="border rounded-lg px-2 border-gray-900" onClick={reset}>
+ Reset
+ </button>
+ </section>
+ )}
+ >
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ );
+}

dev-packages/e2e-tests/test-applications/solidjs/src/routes.ts

@@ -1,5 +1,6 @@
 import { lazy } from 'solid-js';
 
+import ErrorBoundaryExample from './pages/errorboundaryexample';
 import Home from './pages/home';
 
 export const routes = [
@@ -11,6 +12,10 @@ export const routes = [
  path: '/user/:id',
  component: lazy(() => import('./pages/user')),
  },
+ {
+ path: '/error-boundary-example',
+ component: ErrorBoundaryExample,
+ },
  {
  path: '**',
  component: lazy(() => import('./errors/404')),

dev-packages/e2e-tests/test-applications/solidjs/tests/errorboundary.test.ts

@@ -0,0 +1,75 @@
+import { expect, test } from '@playwright/test';
+import { waitForError } from '@sentry-internal/test-utils';
+
+test('captures an exception', async ({ page }) => {
+ const errorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, errorEvent] = await Promise.all([page.goto('/error-boundary-example'), errorEventPromise]);
+
+ expect(errorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});
+
+test('captures a second exception after resetting the boundary', async ({ page }) => {
+ const firstErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, firstErrorEvent] = await Promise.all([page.goto('/error-boundary-example'), firstErrorEventPromise]);
+
+ expect(firstErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+
+ const secondErrorEventPromise = waitForError('solidjs', errorEvent => {
+ return !errorEvent.type;
+ });
+
+ const [, secondErrorEvent] = await Promise.all([
+ page.locator('#errorBoundaryResetBtn').click(),
+ await secondErrorEventPromise,
+ ]);
+
+ expect(secondErrorEvent).toMatchObject({
+ exception: {
+ values: [
+ {
+ type: 'ReferenceError',
+ value: 'NonExistentComponent is not defined',
+ mechanism: {
+ type: 'generic',
+ handled: true,
+ },
+ },
+ ],
+ },
+ transaction: '/error-boundary-example',
+ });
+});

packages/solidjs/README.md

@@ -37,7 +37,6 @@ Sentry.init({
  dsn: '__PUBLIC_DSN__',
  integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],
  tracesSampleRate: 1.0, // Capture 100% of the transactions
- debug: true,
 });
 
 const SentryRouter = Sentry.withSentryRouterRouting(Router);
@@ -53,6 +52,32 @@ render(
 );
 ```
 
+# 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/solidjs';
+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'),
+);
+```
+
 # Sourcemaps and Releases
 
 To generate and upload source maps of your Solid JS app bundle, check our guide

packages/solidjs/package.json

@@ -54,6 +54,8 @@
  "@solidjs/router": "^0.13.5",
  "@solidjs/testing-library": "0.8.5",
  "solid-js": "^1.8.11",
+ "@testing-library/jest-dom": "^6.4.5",
+ "@testing-library/user-event": "^14.5.2",
  "vite-plugin-solid": "^2.8.2"
  },
  "scripts": {

packages/solidjs/src/errorboundary.ts

@@ -0,0 +1,31 @@
+import { captureException } from '@sentry/browser';
+import type { Component, JSX } from 'solid-js';
+import { mergeProps, splitProps } from 'solid-js';
+import { createComponent } from 'solid-js/web';
+
+type ErrorBoundaryProps = {
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ fallback: JSX.Element | ((err: any, reset: () => void) => JSX.Element);
+ children: JSX.Element;
+};
+
+/**
+ * A higher-order component to wrap Solid's ErrorBoundary to capture exceptions.
+ */
+export function withSentryErrorBoundary(ErrorBoundary: Component<ErrorBoundaryProps>): Component<ErrorBoundaryProps> {
+ const SentryErrorBoundary = (props: ErrorBoundaryProps): JSX.Element => {
+ const [local, others] = splitProps(props, ['fallback']);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const fallback = (error: any, reset: () => void): JSX.Element => {
+ captureException(error);
+
+ const f = local.fallback;
+ return typeof f === 'function' ? f(error, reset) : f;
+ };
+
+ return createComponent(ErrorBoundary, mergeProps({ fallback }, others));
+ };
+
+ return SentryErrorBoundary;
+}

packages/solidjs/src/index.ts

@@ -3,3 +3,4 @@ export * from '@sentry/browser';
 export { init } from './sdk';
 
 export * from './solidrouter';
+export * from './errorboundary';

packages/solidjs/test/errorboundary.test.tsx

@@ -0,0 +1,108 @@
+/* eslint-disable @typescript-eslint/unbound-method */
+import type * as SentryBrowser from '@sentry/browser';
+import { createTransport, getCurrentScope, setCurrentClient } from '@sentry/core';
+import { render } from '@solidjs/testing-library';
+import userEvent from '@testing-library/user-event';
+import { vi } from 'vitest';
+
+import { ErrorBoundary } from 'solid-js';
+import { BrowserClient, withSentryErrorBoundary } from '../src';
+
+const mockCaptureException = vi.fn();
+vi.mock('@sentry/browser', async () => {
+ const actual = await vi.importActual<typeof SentryBrowser>('@sentry/browser');
+ return {
+ ...actual,
+ captureException: (...args) => mockCaptureException(...args),
+ } as typeof SentryBrowser;
+});
+
+const user = userEvent.setup();
+const SentryErrorBoundary = withSentryErrorBoundary(ErrorBoundary);
+
+describe('withSentryErrorBoundary', () => {
+ function createMockBrowserClient(): BrowserClient {
+ return new BrowserClient({
+ integrations: [],
+ tracesSampleRate: 1,
+ transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => Promise.resolve({})),
+ stackParser: () => [],
+ });
+ }
+
+ beforeEach(() => {
+ vi.clearAllMocks();
+
+ const client = createMockBrowserClient();
+ setCurrentClient(client);
+ });
+
+ afterEach(() => {
+ getCurrentScope().setClient(undefined);
+ });
+
+ it('calls `captureException` when an error occurs`', () => {
+ render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenLastCalledWith(new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders the fallback component', async () => {
+ const { findByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Ooops, an error occurred.</div>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(await findByText('Ooops, an error occurred.')).toBeInTheDocument();
+ });
+
+ it('passes the `error` and `reset` function to the fallback component', () => {
+ const mockFallback = vi.fn();
+
+ render(() => {
+ <SentryErrorBoundary fallback={mockFallback}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>;
+ });
+
+ expect(mockFallback).toHaveBeenCalledTimes(1);
+ expect(mockFallback).toHaveBeenCalledWith(
+ new ReferenceError('NonExistentComponent is not defined'),
+ expect.any(Function),
+ );
+ });
+
+ it('calls `captureException` again after resetting', async () => {
+ const { findByRole } = render(() => (
+ <SentryErrorBoundary fallback={(_, reset) => <button onClick={reset}>Reset</button>}>
+ <NonExistentComponent />
+ </SentryErrorBoundary>
+ ));
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(1);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(1, new ReferenceError('NonExistentComponent is not defined'));
+
+ const button = await findByRole('button');
+ await user.click(button);
+
+ expect(mockCaptureException).toHaveBeenCalledTimes(2);
+ expect(mockCaptureException).toHaveBeenNthCalledWith(2, new ReferenceError('NonExistentComponent is not defined'));
+ });
+
+ it('renders children when there is no error', async () => {
+ const { queryByText } = render(() => (
+ <SentryErrorBoundary fallback={<div>Oops, an error occurred.</div>}>
+ <div>Adopt a cat</div>
+ </SentryErrorBoundary>
+ ));
+
+ expect(await queryByText('Adopt a cat')).toBeInTheDocument();
+ expect(await queryByText('Ooops, an error occurred')).not.toBeInTheDocument();
+ });
+});

packages/solidjs/tsconfig.test.json

@@ -5,8 +5,10 @@
 
  "compilerOptions": {
  // should include all types from `./tsconfig.json` plus types for all test frameworks used
- "types": ["vitest/globals"]
+ "types": ["vitest/globals", "vite/client", "@testing-library/jest-dom"],
 
  // other package-specific, test-specific options
+ "jsx": "preserve",
+ "jsxImportSource": "solid-js"
  }
 }