Sentry Browser JavaScript

https://docs.sentry.io/platforms/javascript
Admin
Sentry is an error tracking and performance monitoring platform that helps developers capture,...
Tokens:3,106,926
Snippets:22,322
Trust Score:10
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Start Next.js Dev Server

Source: https://docs.sentry.io/platforms/javascript/guides/nextjs

Starts the Next.js development server to verify the Sentry setup. After running this command, visit localhost:3000/sentry-example-page and click "Throw Sample Error" to test all enabled features.

```bash
npm run dev
```

--------------------------------

### Example Page Directory Structure

Source: https://docs.sentry.io/platforms/javascript/guides/nextjs

The wizard creates /sentry-example-page with a button that triggers a test error, and an API route for testing. Use this to verify your setup.

```bash
app/
├── sentry-example-page/
│   └── page.tsx       # Test page with error button
└── api/
    └── sentry-example-api/
        └── route.ts   # Test API route
```

--------------------------------

### Install Sentry with the wizard

Source: https://docs.sentry.io/platforms/javascript/guides/angular

Run the Sentry wizard to automatically configure Sentry in your Angular application. The wizard will guide you through the setup process, asking you to enable additional optional features beyond error monitoring. Requires Angular 17.0.0 or above.

```bash
npx @sentry/wizard@latest -i angular
```

--------------------------------

### Run your app

Source: https://docs.sentry.io/platforms/javascript/guides/express/install/bundler

Start your application as usual. No --import flag is required because the instrumentation is already part of your bundle.

```bash
node app.mjs
```

--------------------------------

### Example 1: Microservices E-commerce Platform - tracePropagationTargets (placeholder DSN)

Source: https://docs.sentry.io/platforms/javascript/guides/sveltekit/tracing/trace-propagation

Same configuration as the example DSN version but uses the placeholder ___PUBLIC_DSN___ for the DSN.

```JavaScript
// hooks.client.js
Sentry.init({
  dsn: "___PUBLIC_DSN___",
  integrations: [Sentry.browserTracingIntegration()],
  // Capture 100% of spans. This is useful for development and debugging. Consider reducing in production or using traceSampler
  tracesSampleRate: 1.0,
  tracePropagationTargets: [
    "https://api.myecommerce.com",
    "https://auth.myecommerce.com",
  ],
});

```

--------------------------------

### Install @sentry/node-native

Source: https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/configuration/integrations/event-loop-block

Install the Sentry Node native package for TanStack Start React.

```bash
npm install @sentry/node-native

```

--------------------------------

### Install Sentry SDKs for Astro on Cloudflare Pages

Source: https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/astro

Install both the Sentry Astro and Cloudflare SDKs for Cloudflare Pages setup.

```bash
npm install @sentry/astro @sentry/cloudflare
```

--------------------------------

### CDN setup with bundle.tracing.min.js

Source: https://docs.sentry.io/platforms/javascript/configuration/integrations/captureconsole

Sets up the CaptureConsole integration using the CDN. Includes the tracing bundle and the captureconsole plugin, then initializes Sentry with the integration.

```html
<script
  src="https://browser.sentry-cdn.com/11.4.0/bundle.tracing.min.js"
  integrity="sha384-leCZtyH0v+/d38CQgHkDf/buaYk8uIH2vrAwzlLXVLKTcrvUWEUGan36c9ooM12N"
  crossorigin="anonymous"
></script>
<script
  src="https://browser.sentry-cdn.com/11.4.0/captureconsole.min.js"
  integrity="sha384-7G0XB8qiA624aLgQdxnBdDR/DUyLy2rhB1Zp5T0ORZBUeVx69L4LSM4X/moehDim"
  crossorigin="anonymous"
></script>

<script>
  Sentry.init({
    dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",
    integrations: [Sentry.captureConsoleIntegration()],
  });
</script>
```

--------------------------------

### GET /api/<your-project-id>/cron/<monitor_slug>/<your-public-key>/

Source: https://docs.sentry.io/platforms/javascript/guides/firebase/crons

This snippet documents the HTTP GET endpoint used to send check-ins with a status and optional check-in ID, including query parameters and example curl commands.

```APIDOC
## [GET] /api/<your-project-id>/cron/<monitor_slug>/<your-public-key>/

### Description
Sends a check-in with a specified status and an optional check-in ID. This endpoint is used to notify Sentry of job execution status, including `in_progress` and `ok` statuses, and to handle overlapping jobs by providing a stable check-in ID.

### Method
GET

### Endpoint
`https://o<orgId>.ingest.sentry.io/api/<your-project-id>/cron/<monitor_slug>/<your-public-key>/`

### Parameters
#### Query Parameters
- **check_in_id** (string) - Optional - A stable identifier for the check-in execution, used to prevent unintended consequences for overlapping jobs.
- **status** (string) - Required - The status of the check-in. Possible values: `in_progress`, `ok`.

### Request Example
```bash
curl "${SENTRY_CRONS}?check_in_id=${CHECK_IN_ID}&status=in_progress"
curl "${SENTRY_CRONS}?check_in_id=${CHECK_IN_ID}&status=ok"
```

### Response
No response body is documented in the source.

```

--------------------------------

### Start Application with node main.mjs

Source: https://docs.sentry.io/platforms/javascript/guides/flue/install/esm-without-import

Start the application as usual after splitting the entrypoint. The application code stays in app.mjs and needs no changes.

```bash
node main.mjs
```

--------------------------------

### Start span and use tracesSampler with transactionContext

Source: https://docs.sentry.io/platforms/javascript/guides/cordova/sampling

Shows how to start a span with a name and op, and how the tracesSampler receives a samplingContext containing the initial transactionContext and parentSampled. The example returns false for the specific transaction name to avoid sampling it.

```javascript
Sentry.startSpan(
  {
    name: "Search from navbar",
    op: "search",
  },
  () => {
    // ...
  },
);

// Will result in `tracesSampler` receiving:
function tracesSampler(samplingContext) {
  /*
  samplingContext = {
    transactionContext: {
      name: "Search from navbar",
      op: "search",
    },
    parentSampled: undefined,
  }
  */

  // Do not sample this specific transaction
  return samplingContext.transactionContext.name !== "Search from navbar";
}
```

--------------------------------

### Starting Active Spans with Sentry.startSpan()

Source: https://docs.sentry.io/platforms/javascript/guides/bun/tracing/instrumentation

These examples show how to start active spans with Sentry.startSpan() for synchronous, asynchronous, and nested operations. The span automatically ends when the callback completes, and if the callback throws or rejects, the span is marked as failed.

```javascript
const result = Sentry.startSpan({ name: "Important Function" }, () => {
  return expensiveFunction();
});
```

```javascript
const result = await Sentry.startSpan(
  { name: "Important Function" },
  async () => {
    const res = await doSomethingAsync();
    return updateRes(res);
  },
);
```

```javascript
const result = await Sentry.startSpan(
  {
    name: "Important Function",
  },
  async () => {
    const res = await Sentry.startSpan({ name: "Child Span" }, () => {
      return expensiveAsyncFunction();
    });

    return updateRes(res);
  },
);
```
Tokens:
Raw