SDK setup

Any Sentry SDK works. Swap in your GlitchReplay DSN and you're done.

GlitchReplay accepts the standard Sentry envelope at POST /api/{project_id}/envelope/. That means you can use any official @sentry/* SDK without modification — the only thing that changes is the DSN host. No vendor lock-in: if you switch back to Sentry later, swap one URL.

Next.js

pnpm add @sentry/nextjs
// sentry.client.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  dsn: "<YOUR_DSN>",
  tracesSampleRate: 0,
  replaysSessionSampleRate: 0,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,
      maskAllInputs: true,
      blockAllMedia: true,
    }),
  ],
});

For server-side errors (route handlers, server actions, RSC), add the matching sentry.server.config.ts with the same DSN.

OpenNext on Cloudflare Workers: the official @sentry/nextjs server bundle assumes Node primitives the Workers runtime doesn't provide, even with nodejs_compat. If you deploy to Workers, prefer the lightweight beacon pattern documented in the repo's docs/SITE_WIRING.md — a 90-line dual-beacon you can drop into your existing global error handler.

React (CRA, Vite, anything client-only)

pnpm add @sentry/react
// src/sentry.ts
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "<YOUR_DSN>",
  tracesSampleRate: 0,
  replaysSessionSampleRate: 0,
  replaysOnErrorSampleRate: 1.0,
  integrations: [
    Sentry.replayIntegration({
      maskAllText: true,
      maskAllInputs: true,
      blockAllMedia: true,
    }),
  ],
});

Import this file once at the top of your app entry (main.tsx, index.tsx) so it runs before any component renders.

Wrap your root in Sentry.ErrorBoundary so React render errors (including minified ones like Maximum update depth exceeded) are captured with the React component stack — not just the JS frames. Without the boundary, the error still reaches GlitchReplay via window.onerror, but you lose the component tree:

// main.tsx
import * as Sentry from "@sentry/react";
import "./sentry"; // the Sentry.init file above

const Fallback = () => (
  <div style={{ padding: "2rem", textAlign: "center" }}>
    <h1>Something went wrong</h1>
    <button onClick={() => window.location.reload()}>Reload</button>
  </div>
);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <Sentry.ErrorBoundary fallback={Fallback}>
    <App />
  </Sentry.ErrorBoundary>,
);

Node.js

pnpm add @sentry/node
// instrument.ts — import BEFORE anything else (top of your entry file)
import * as Sentry from "@sentry/node";

Sentry.init({
  dsn: "<YOUR_DSN>",
  tracesSampleRate: 0,
});

Sentry's Node SDK uses async-local-storage hooks that must register before your application code. node --import ./instrument.ts works, as does import "./instrument"; at line 1 of your entry.

Godot

Use the official sentry-godot GDExtension. Drop addons/sentry/ into your project, set the DSN under Project Settings → Sentry → Options → Dsn, and any unhandled GDScript error or native crash is captured automatically.

# project.godot
[sentry]

options/dsn="https://<public_key>@glitchreplay.com/<project_id>"
options/environment="dev"

Full walkthrough — install, project settings, the recommended breadcrumb-autoload pattern, gotchas — at Godot SDK setup.

Vanilla browser bundle

For sites without a build step:

<script
  src="https://browser.sentry-cdn.com/8.x.x/bundle.min.js"
  crossorigin="anonymous"
></script>
<script>
  Sentry.init({ dsn: "<YOUR_DSN>" });
</script>

What gets captured by default

  • Unhandled exceptionswindow.error, unhandledrejection
  • Resource load failures — failed <img>, <script>, <link>
  • Breadcrumbs — clicks, navigations, console output, fetch/XHR (last ~50 by default)
  • Replay buffer — last 30 seconds of DOM activity, attached when an error fires (only with the replay integration enabled)

Suppressing noisy events client-side

Each project has an Event filters section in Project → Setup where you can define rules (by message regex, error type, or URL) that get served as JSON. Pair them with a beforeSend hook so matching events are dropped in the browser — they never leave the client, never count toward your quota.

The dashboard shows you the exact beforeSend snippet to paste, with your project's filter URL pre-filled.

Common gotchas

  • Wrong DSN host — make sure the DSN points at glitchreplay.com, not sentry.io. Easy to miss when copying configs between projects.
  • Content Security Policy — if you have a strict connect-src, add https://glitchreplay.com so the envelope POST isn't blocked.
  • Ad blockers — most uBlock filter lists target sentry.io, not glitchreplay.com, but a small fraction of users will still be filtered. The SDK fails silently.
  • Releases — set release on Sentry.init (a git SHA works) so source maps and first-seen-in-release alerts can match.

Next: upload source maps so your stack traces show original file paths.