Skip to content
Twilight React Playground
ثيم رائدaren

initThemeSentry

functionAdvancedbrowser

Starts Sentry error reporting in the shopper's browser, tagged with your theme name; does nothing unless a DSN was set when the theme was built.

import { initThemeSentry } from '@salla.sa/twilight-theme-engine/sentry/client';

In plain words

When something breaks in a shopper's browser, you never see the error unless something reports it. Sentry is an error-tracking service that collects those errors so you can read them. initThemeSentry('my-theme') switches it on for your theme's pages.

It needs a DSN, the address of your Sentry project. Set it in the VITE_SENTRY_DSN variable when the theme is built. Without a DSN the call does nothing, so it is safe to leave in.

Signature

function initThemeSentry(theme: string, dsn?: string): void
// dsn defaults to import.meta.env.VITE_SENTRY_DSN, inlined when Vite builds

Example

app/client.tsx
import { StrictMode, startTransition } from 'react';
import { hydrateRoot } from 'react-dom/client';
import { StartClient } from '@tanstack/react-start/client';
import { initThemeSentry } from '@salla.sa/twilight-theme-engine/sentry/client';

// Once, before hydration. Use the same name as withThemeSentry in app/server.ts.
initThemeSentry('my-theme');

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <StartClient />
    </StrictMode>
  );
});

How it behaves

  • Call it once, at the top of app/client.tsx. TanStack Start uses app/client.tsx as the browser entry (and app/server.ts as the server entry) whenever the file exists.

  • With a DSN it loads @sentry/tanstackstart-react through a dynamic import() and calls Sentry.init({ dsn, initialScope: { tags: { source: 'twilight-engine', theme, store: window.location.host } } }). The Sentry packages are dependencies of the engine, so a theme installs nothing.

  • A dsn argument wins over VITE_SENTRY_DSN. VITE_* variables are written into the bundle when Vite builds, so a new DSN needs a new build.

  • Its server twin is withThemeSentry. Pass both the same theme so browser and server events carry the same theme tag.

Gotchas

  • Errors thrown before Sentry's code has downloaded are not reported: init runs only after the dynamic import resolves, and hydration starts right after the call.

  • The store tag is window.location.host. On localhost and on the preview host, every store you open is tagged with that same host.

  • Browser only. With a DSN set, calling it during the server render makes the promise reject, because its callback reads window. Fix: keep the call in app/client.tsx, never in a component or a route.

Related

withThemeSentry

Wraps the server's request handler so errors during server rendering are reported to Sentry, tagged with the theme name and the store host.

twilightReact

The one Vite plugin call in a theme's vite.config.ts: server rendering, a route for every storefront page, translations and build checks.

Source and docs