feat(solidjs): Add withSentryErrorBoundary HOC (#12421)

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'),
);
```

**Note**: When using an `ErrorBoundary` in conjunction with Solid
Router, the fallback component renders twice, see
[here](solidjs/solid-router#440).

Author: andreiborza

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"
   }
 }