# JavaScript (browser)

> https://docs.errora.org/en/platforms/javascript

Works with `@sentry/browser`, `@sentry/react`, `@sentry/vue`, `@sentry/nextjs`,
`@sentry/angular` and friends — they share the same core options.

## Install

```bash
npm install @sentry/browser
# or the framework package: @sentry/react, @sentry/vue, @sentry/nextjs …
```

## Initialize

Call `init` as early as possible — before your app renders.

```javascript
import * as Sentry from "@sentry/browser";

Sentry.init({
  dsn: "https://<public_key>@<your-errora-host>/<project_id>",
  environment: import.meta.env.MODE,
  release: `web@${__APP_VERSION__}`,

  // Tracing
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
    Sentry.feedbackIntegration({ colorScheme: "system", showBranding: false }),
  ],
  tracesSampleRate: 0.2,
  tracePropagationTargets: ["localhost", /^https:\/\/api\.example\.com/],

  // Session replay
  replaysSessionSampleRate: 0.1,   // 10% of ordinary sessions
  replaysOnErrorSampleRate: 1.0,   // every session that hits an error

  // Structured logs
  _experiments: { enableLogs: true },

  sendDefaultPii: false,
});
```

### What each block turns on

- `browserTracingIntegration()` → page loads, navigations, `fetch`/XHR spans →
  [Performance](/en/products/performance).
- `replayIntegration()` → rrweb recordings → [Session replay](/en/products/session-replay).
- `feedbackIntegration()` → the feedback button/widget → [User feedback](/en/products/user-feedback).
- `enableLogs` → `Sentry.logger.*` calls → [Logs](/en/products/logs).

## Content Security Policy

If your site sends a CSP, allow the Errora host as a `connect-src`:

```text
Content-Security-Policy: connect-src 'self' https://<your-errora-host>;
```

While you are editing the policy, point `report-uri` at Errora as well — violations become
issues. See [Security policy reports](/en/products/security-reports).

## Capturing manually

```javascript
try {
  risky();
} catch (err) {
  Sentry.captureException(err, { tags: { area: "checkout" } });
}

Sentry.captureMessage("Cart total mismatch", "warning");

Sentry.setUser({ id: "42", username: "nima" });
Sentry.addBreadcrumb({ category: "ui", message: "Clicked pay", level: "info" });
```

## Source maps

Minified frames are useless without source maps. Upload the maps for each release from CI:

```bash
curl -X POST "$ERRORA/api/v1/projects/$PROJECT_ID/release-files" \
  -H "Authorization: Bearer $ERRORA_TOKEN" \
  -F "release=web@1.4.2" \
  -F "name=~/assets/app.4f2c.js.map" \
  -F "sourcemap=1" \
  -F "file=@dist/assets/app.4f2c.js.map"
```

Full guide: [Source maps & releases](/en/products/source-maps).

## Ad blockers and tunnelling

Ad blockers sometimes block requests to paths containing `sentry`. If you see events go
missing only in the browser, route them through your own domain with the SDK's `tunnel`
option, pointing at a small proxy endpoint on your server that forwards the body to
`https://<your-errora-host>/api/<project_id>/envelope/`. Errora reads the DSN from the
envelope header, so tunnelled envelopes authenticate correctly.

## Verify

```javascript
Sentry.captureException(new Error("Errora smoke test"));
```

Open **Issues** — the error should be there within a couple of seconds, with a session
replay attached if replay sampling caught it.