feat(solidjs): Add withSentryErrorBoundary HOC

Author: andreiborza

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

@@ -7,7 +7,9 @@ import PageRoot from './pageroot';
 import { routes } from './routes';
 
 Sentry.init({
-  dsn: import.meta.env.PUBLIC_E2E_TEST_DSN,
+  dsn:
+    import.meta.env.PUBLIC_E2E_TEST_DSN ||
+    'https://3b6c388182fb435097f41d181be2b2ba@o4504321058471936.ingest.sentry.io/4504321066008576',
   debug: true,
   environment: 'qa', // dynamic sampling bias to keep transactions
   integrations: [Sentry.solidRouterBrowserTracingIntegration({ useBeforeLeave, useLocation })],

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