Skip to content
gunsole

Solid.js Integration

Setup

Section titled “Setup”
gunsole.ts
import { createGunsoleClient } from "@gunsole/web";


export const gunsole = createGunsoleClient({
  projectId: "my-solid-app",
  mode: "local",
  env: "development",
  appName: "Solid Vite App",
  appVersion: "1.0.0",
  defaultTags: { framework: "solid", bundler: "vite" },
});

Error boundary

Section titled “Error boundary”
// index.tsx — error boundary
import { ErrorBoundary } from "solid-js";
import { gunsole } from "./gunsole";


<ErrorBoundary
  fallback={(err) => {
    gunsole.fatal({
      bucket: "fatal",
      message: err instanceof Error ? err.message : String(err),
      context: {
        name: err instanceof Error ? err.name : "UnknownError",
        stack: err instanceof Error ? err.stack : undefined,
      },
    });
    return <div>Something went wrong</div>;
  }}
>
  <App />
</ErrorBoundary>

Lifecycle and user tracking

Section titled “Lifecycle and user tracking”
// App.tsx — lifecycle with onMount
import { onMount, createEffect } from "solid-js";
import { onCLS, onFCP, onINP, onLCP, onTTFB } from "web-vitals";


onMount(() => {
  gunsole.info({
    bucket: "app_lifecycle",
    message: "Solid app mounted",
    context: { framework: "solid", router: "tanstack" },
  });


  // Web vitals
  const report = (metric: { name: string; value: number; rating: string }) => {
    gunsole.info({
      bucket: "web_vitals",
      message: `${metric.name}: ${metric.value.toFixed(2)}`,
      context: { value: metric.value, rating: metric.rating },
      tags: { metric: metric.name, rating: metric.rating },
    });
  };
  onCLS(report);
  onFCP(report);
  onINP(report);
  onLCP(report);
  onTTFB(report);
});


// Reactive user tracking
createEffect(() => {
  gunsole.setUser({ id: userId(), email: "[email protected]" });
});

API calls with tracing

Section titled “API calls with tracing”

Same pattern as React — generate a traceId per request, log at start and end with timing:

const fetchData = async () => {
  const traceId = `trace-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
  const startTime = performance.now();


  gunsole.info({
    bucket: "api_request",
    message: `Fetching: ${url}`,
    tags: { api: "myapi", action: "fetch_start" },
    traceId,
  });


  try {
    const response = await fetch(url);
    const totalTime = performance.now() - startTime;


    gunsole.info({
      bucket: "api_request",
      message: `Fetched successfully`,
      context: { totalTimeMs: Math.round(totalTime) },
      tags: { api: "myapi", action: "fetch_success", status: "200" },
      traceId,
    });
  } catch (err) {
    const totalTime = performance.now() - startTime;
    gunsole.error({
      bucket: "api_request",
      message: `Fetch failed`,
      context: { error: err instanceof Error ? err.message : String(err), totalTimeMs: Math.round(totalTime) },
      tags: { api: "myapi", action: "fetch_error" },
      traceId,
    });
  }
};