# Frontend Monitoring with Full Code Visibility

> Get full visibility into your code & catch issues before they lead to major disruptions with Sentry's frontend monitoring. Get started prioritizing issues here.

**URL:** https://sentry.io/for/frontend/

---

Your code is telling you more than what your logs let on. Sentry's frontend monitoring gives you full visibility into your code, so you can catch issues before they become downtime.

**Documentation:** [https://docs.sentry.io/platforms/javascript/](https://docs.sentry.io/platforms/javascript/)

## Install

### JavaScript

Grab the [Sentry JavaScript SDK](https://github.com/getsentry/sentry-javascript/):

```html
<script src="https://browser.sentry-cdn.com/latest/bundle.min.js"></script>
```

Configure your DSN:

```javascript
Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: [Sentry.browserTracingIntegration()],
  tracesSampleRate: 1.0,
  tracePropagationTargets: ['localhost', /^\/https:\/\/yourserver\.io\/api/],
});
```

See the [JavaScript docs](https://docs.sentry.io/platforms/javascript/) for full setup options.

### React

Grab the [Sentry React SDK](https://github.com/getsentry/sentry-javascript/):

```bash
npm install @sentry/react
```

Create an `instrument.js` file and add the Sentry initialization code. This file must be imported before any other imports in your application entry point:

```jsx
import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  tracesSampleRate: 1.0,
  tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/],
  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,
});
```

Include the Sentry initialization file as the first import statement:

```jsx
import "./instrument";
import App from "./App";
import { createRoot } from "react-dom/client";
import * as Sentry from "@sentry/react";

const container = document.getElementById("app");
const root = createRoot(container, {
  onUncaughtError: Sentry.reactErrorHandler(),
  onCaughtError: Sentry.reactErrorHandler(),
  onRecoverableError: Sentry.reactErrorHandler(),
});
root.render(<App />);
```

See the [React docs](https://docs.sentry.io/platforms/javascript/guides/react/) for full setup options.

### Angular

Install with one line of code:

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

See the [Angular docs](https://docs.sentry.io/platforms/javascript/guides/angular/) for full setup options.

### Ember

```html
<script src="https://browser.sentry-cdn.com/11.8.0/bundle.min.js"></script>
```

Configure your DSN:

```javascript
Sentry.init({
  dsn: 'https://<key>@sentry.io/<project>',
  integrations: [new Sentry.Integrations.Ember()]
});
```

See the [Ember docs](https://docs.sentry.io/platforms/javascript/guides/ember/) for full setup options.

### Vue

Just run this command to install the Sentry Vue SDK:

```bash
npm install @sentry/vue
```

Configure your DSN:

```javascript
import { createApp } from "vue";
import * as Sentry from "@sentry/vue";

const app = createApp({
  // ...
});

Sentry.init({
  app,
  dsn: "https://<key>@sentry.io/<project>",
  integrations: [Sentry.browserTracingIntegration()],

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
  // Set tracePropagationTargets to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
});

app.mount("#app");
```

See the [Vue docs](https://docs.sentry.io/platforms/javascript/guides/vue/) for full setup options.

### Next.js

See -- it's really just one command. 

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

See the [Next.js docs](https://docs.sentry.io/platforms/javascript/guides/nextjs/) for full setup options.

## Features

### Trace an error's trail.

Sentry's frontend monitoring lets you see how an error progresses through your stack. With it, you can trace most interaction events, from clicks and inputs to page navigation and console messages — even events that preceded the errors.

### Constant context.

Frontend monitoring records all HTTP requests and user-initiated responses. Now you can view a distributed trace end-to-end, all so you can see the exact, poor-performing API call — and surface any related errors.

### Maximum efficiency. Minimal effort.

By giving you a full view of releases, frontend monitoring can help you prioritize issues in real time — things like learning in which version did a bug first appear, and whether things will regress in a future release.

## FAQ

**What is the difference between Sentry and traditional logging?**

Traditional logging provides you with a trail of events. Some of those events are errors, but many times they're simply informational. Sentry is fundamentally different because we focus on exceptions, or in other words, we capture application crashes. We discuss in more detail [here](/vs/logging/) and on our [blog](https://blog.sentry.io/lets-get-ready-to-monitor/).

**What frontend languages does Sentry support?**

Sentry supports every major frontend language, framework, and library. You can browse each of them [here](/platforms/).

**How much does Sentry cost?**

You can get started for free. Pricing depends on the number of monthly events, transactions, and attachments that you send Sentry. For more details, visit our [pricing page](/pricing/).

**How does Sentry impact the performance of my app?**

Sentry doesn't impact a web site's performance.

If you look at the configuration options for when you initialize Sentry in your code, you'll see there's nothing regarding minimizing its impact on your app's performance. This is because our team of SDK engineers already developed Sentry with this in mind.

Sentry is a listener/handler for errors that asynchronously sends out the error/event to Sentry.io. This is non-blocking. The error/event only goes out if this is an error.

Global handlers have almost no impact as well, as they are native APIs provided by the browsers.

---

*Source: [sentry.io/for/frontend/](https://sentry.io/for/frontend/)*