# جاوااسکریپت (مرورگر)

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

با `@sentry/browser`، `@sentry/react`، `@sentry/vue`، `@sentry/nextjs`، `@sentry/angular` و
مانند این‌ها کار می‌کند؛ همه هستهٔ گزینه‌های یکسانی دارند.

## نصب

```bash
npm install @sentry/browser
# یا بستهٔ فریم‌ورک: @sentry/react، @sentry/vue، @sentry/nextjs …
```

## مقداردهی اولیه

`init` را هرچه زودتر — پیش از رندر برنامه — صدا بزنید.

```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__}`,

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

  // بازپخش نشست
  replaysSessionSampleRate: 0.1,   // ۱۰٪ نشست‌های عادی
  replaysOnErrorSampleRate: 1.0,   // همهٔ نشست‌هایی که به خطا خورده‌اند

  // لاگ ساخت‌یافته
  _experiments: { enableLogs: true },

  sendDefaultPii: false,
});
```

### هر بخش چه چیزی را روشن می‌کند

- `browserTracingIntegration()` ← بارگذاری صفحه، ناوبری و اسپن‌های `fetch`/XHR →
  [کارایی](/products/performance).
- `replayIntegration()` ← ضبط rrweb → [بازپخش نشست](/products/session-replay).
- `feedbackIntegration()` ← دکمه و ویجت بازخورد → [بازخورد کاربران](/products/user-feedback).
- `enableLogs` ← فراخوانی‌های `Sentry.logger.*` → [لاگ‌ها](/products/logs).

## سیاست امنیت محتوا (CSP)

اگر سایت شما هدر CSP می‌فرستد، میزبان ارورا را در `connect-src` مجاز کنید:

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

همان‌جا که سیاست را ویرایش می‌کنید، `report-uri` را هم به ارورا بدهید تا تخلف‌ها به خطا تبدیل
شوند: [گزارش سیاست امنیتی](/products/security-reports).

## ثبت دستی

```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" });
```

## سورس‌مپ

فریم‌های مینیفای‌شده بدون سورس‌مپ بی‌فایده‌اند. نقشه‌ها را برای هر نسخه از 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"
```

راهنمای کامل: [سورس‌مپ و نسخه‌ها](/products/source-maps).

## مسدودکننده‌های تبلیغات و تونل‌کردن

بعضی مسدودکننده‌ها درخواست‌هایی را که در مسیرشان `sentry` هست بلوکه می‌کنند. اگر رویدادها فقط
در مرورگر گم می‌شوند، با گزینهٔ `tunnel` در SDK آن‌ها را از دامنهٔ خودتان عبور دهید: یک نقطهٔ
واسط کوچک روی سرور خودتان که بدنه را به
`https://<your-errora-host>/api/<project_id>/envelope/` فوروارد می‌کند. ارورا DSN را از سربرگ
پاکت می‌خواند، پس پاکت‌های تونل‌شده درست احراز می‌شوند.

## بررسی نهایی

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

صفحهٔ **خطاها** را باز کنید؛ خطا باید ظرف چند ثانیه آنجا باشد و اگر نمونه‌برداری بازپخش آن را
گرفته باشد، ضبط نشست هم به آن پیوست است.