SolidJS Error Tracking & Monitoring Integration

Solid has no dedicated LogTide package. You use the Browser SDK (@logtide/browser) for initialization and unhandled-error capture, and the hub from @logtide/core for manual calls. The Solid-specific part is that components run once and updates happen in reactive computations, so you report errors from ErrorBoundary fallbacks and use effects, not re-renders, to drive breadcrumbs.

What is captured and where

Source of the error	Caught by	What you add
Unhandled exception, unhandled promise rejection	Browser SDK, automatically	Nothing
Error while rendering JSX or updating a reactive computation	Nearest ErrorBoundary	A fallback that reports with hub.captureError
Error from a createResource fetcher that is read in the tree	Nearest ErrorBoundary, when the resource is read	The same fallback
Error in an event handler or an out-of-flow callback	Not an ErrorBoundary	try/catch plus hub.captureError

Prerequisites

• SolidJS 1.x
• A LogTide instance with a DSN

Installation

npm install @logtide/browser @logtide/core

Installing @logtide/core explicitly makes the hub import resolve under strict package managers such as pnpm.

Quick Setup

// index.tsx
import { render } from 'solid-js/web';
import { initLogtide } from '@logtide/browser';
import App from './App';

initLogtide({
  dsn: 'https://[email protected]',
  service: 'solid-frontend',
  environment: 'production',
  release: '1.0.0',
});

render(() => <App />, document.getElementById('root') as HTMLElement);

ErrorBoundary that reports once

ErrorBoundary takes a fallback that is either an element or a function (err, reset) => JSX. The cleanest way to run a side effect is to make the fallback a component and report in onMount:

import { ErrorBoundary, onMount, type Component } from 'solid-js';
import { hub } from '@logtide/core';

const ErrorFallback: Component<{ err: unknown; reset: () => void; boundary: string }> = (props) => {
  onMount(() => {
    hub.captureError(props.err, { boundary: props.boundary });
  });

  return (
    <div role="alert">
      <h2>Something went wrong</h2>
      <button onClick={props.reset}>Try again</button>
    </div>
  );
};

export default function App() {
  return (
    <ErrorBoundary fallback={(err, reset) => <ErrorFallback err={err} reset={reset} boundary="app" />}>
      <Dashboard />
    </ErrorBoundary>
  );
}

reset clears the error state and renders the children again. Each retry that fails again mounts a new fallback and sends a new report, which is usually what you want to see. Nest boundaries around independent parts of the page. An error thrown by a fallback itself can be caught by a parent boundary.

Resource errors

An error in a createResource fetcher is raised when the resource is read, so an ErrorBoundary above the reading component catches it and the same fallback reports it. If you want to log the failure without a boundary, read the resource’s error property in an effect:

import { createEffect, createResource } from 'solid-js';
import { hub } from '@logtide/core';

function Profile(props: { id: string }) {
  const [user] = createResource(() => props.id, fetchUser);

  createEffect(() => {
    const err = user.error;
    if (err) hub.captureError(err, { resource: 'user', id: props.id });
  });

  return <div>{user()?.name}</div>;
}

Event handlers

ErrorBoundary does not see errors thrown in event handlers, so handle them where they happen:

import { hub } from '@logtide/core';

function CheckoutButton() {
  const handleCheckout = async () => {
    hub.addBreadcrumb({
      type: 'custom',
      category: 'ui',
      message: 'Checkout button clicked',
      timestamp: Date.now(),
    });

    try {
      await processPayment();
      hub.captureLog('info', 'Payment successful');
    } catch (err) {
      hub.captureError(err, { flow: 'checkout', cartId: 'abc-123' });
    }
  };

  return <button onClick={handleCheckout}>Pay now</button>;
}

Reactive breadcrumbs and router changes

Because effects re-run when the signals they read change, they are a good way to record state transitions as breadcrumbs. With @solidjs/router, track the location:

import { createEffect, on } from 'solid-js';
import { useLocation } from '@solidjs/router';
import { hub } from '@logtide/core';

export function RouteBreadcrumbs() {
  const location = useLocation();

  createEffect(
    on(
      () => location.pathname,
      (path) =>
        hub.addBreadcrumb({
          type: 'navigation',
          category: 'navigation',
          message: `Navigated to ${path}`,
          timestamp: Date.now(),
        }),
    ),
  );

  return null;
}

The Browser SDK’s automatic breadcrumbs cover clicks and fetch/XHR calls, not client-side route changes, so this fills that gap. Render the component once inside your Router.

Server rendering

@logtide/browser is a browser SDK. In a server-rendered Solid app (for example SolidStart), run initLogtide only on the client side, in the client entry, and do not call it during server render. There is no documented LogTide server package for Solid, so server-side logging would use the Node.js SDK directly.

Core Web Vitals

Web Vitals are opt-in. Enable them in initLogtide, and install the web-vitals package (an optional peer dependency of @logtide/browser):

npm install web-vitals

initLogtide({
  dsn: 'https://[email protected]',
  service: 'solid-frontend',
  browser: { webVitals: true },
});

LCP, INP, and CLS are sent as info logs (message Web Vital: LCP = ...) with a performance.metric field, so you can filter for them in the log search.

Source Map Uploads

Upload source maps from your Vite build so stack traces point at your original files:

npm install -g @logtide/cli
logtide sourcemaps upload --path ./dist --release 1.0.0 --api-key YOUR_API_KEY

Next Steps

• Browser SDK Docs - Full browser SDK reference
• React Integration - For React developers
• Node.js Integration - For server-side monitoring