### Install Sentry Wizard

Source: https://docs.sentry.io/platforms/javascript/guides/sveltekit/sourcemaps

Use the Sentry Wizard to automatically set up source map uploading for your SvelteKit project. This is the easiest way to get started.

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

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

### Install Sentry SDK with Remix Wizard

Source: https://docs.sentry.io/platforms/javascript/guides/remix/session-replay

Use the Sentry wizard to automatically install and configure the SDK for your Remix project. This includes setting up client and server initializations, source map uploads, and an example verification page.

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

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

### Example JavaScript SDK Bundles

Source: https://docs.sentry.io/platforms/javascript/install/loader

Illustrates specific examples of JavaScript SDK bundles, showing the combination of features and packaging.

```text
bundle.js - @sentry/browser, ES6, unminified, with debug logging
bundle.tracing.debug.min.js - @sentry/browser with tracing, minified, with SDK debug logging
```

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

### Example of Nuxt Server Entry File with Dynamic Import

Source: https://docs.sentry.io/platforms/javascript/guides/nuxt/install/dynamic-import

Illustrates how the Nuxt server entry file is structured when using dynamic import for Sentry initialization.

```javascript
// Note: The file may have some imports and code, related to debug IDs
Sentry.init({
  dsn: "...",
});

import("./chunks/nitro/nitro.mjs").then(function (n) {
  return n.r;
});
```

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

### Vue Router Integration Example

Source: https://docs.sentry.io/platforms/javascript/guides/vue/features/vue-router

Full example demonstrating how to integrate Sentry with Vue Router. Ensure you have Vue, Vue Router, and Sentry installed.

```javascript
import Vue from "vue";
import App from "./App";
import * as Sentry from "@sentry/vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
import Foo from "@/components/Foo";
import Bar from "@/components/Bar";

Vue.use(Router);

const router = new Router({
  // your router configuration
});

Sentry.init({
  Vue,
  dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",
  tracesSampleRate: 1.0,
  integrations: [Sentry.browserTracingIntegration({ router })],
});

new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>",
});
```

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

### Start a Trace in a Hydrogen Loader for Testing

Source: https://docs.sentry.io/platforms/javascript/guides/cloudflare/frameworks/hydrogen-react-router

To test tracing, start a Sentry span within your loader function before throwing an error. This measures the execution time of your code and verifies tracing setup.

```tsx
import * as Sentry from "@sentry/react-router/cloudflare";
import type { Route } from "./+types/sentry-test";

export async function loader() {
  return Sentry.startSpan(
    {
      op: "test",
      name: "My First Test Trace",
    },
    () => {
      throw new Error("My first Sentry error!");
    },
  );
}
```

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

### Server-Side SDK Initialization (v7 Compatibility)

Source: https://docs.sentry.io/platforms/javascript/guides/remix/migration/v7-to-v8

Example of server-side initialization for v8, demonstrating the removal of performance-related integrations.

```javascript
import * as Sentry from '@sentry/remix';

Sentry.init({
  dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",
  tracesSampleRate: 1.0,
});

```

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

### Start Next.js Development Server

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

Run this command to start your local development server and test the Sentry integration.

```bash
npm run dev
```

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

### Install Sentry TanStack Start React SDK

Source: https://docs.sentry.io/platforms/javascript/guides/tanstackstart-react/manual-setup

Add the Sentry SDK package to your TanStack Start React application using npm. This is the first step in integrating Sentry for error monitoring and other features.

```bash
npm install @sentry/tanstackstart-react --save
```

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

### SolidStart Server Entry File with Dynamic Import

Source: https://docs.sentry.io/platforms/javascript/guides/solidstart/install/dynamic-import

Example of how the SolidStart server entry file is structured when using dynamic import() for Sentry initialization. Sentry is initialized early, and the Nitro runtime is loaded dynamically.

```javascript
// Note: The file may have some imports and code, related to debug IDs
Sentry.init({
  dsn: "...",
});

import("./chunks/nitro/nitro.mjs").then(function (n) {
  return n.r;
});

```

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

### Trigger Frontend Error and Performance Trace

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

Modify the error-throwing button to also start a performance trace using `Sentry.startSpan`. This verifies both error capturing and performance monitoring setup.

```javascript
// ...
<button @click="throwError">Throw error</button>
// ...

export default {
  // ...
  methods: {
    throwError() {
      Sentry.startSpan({
        op: "test",
        name: "Example Frontend Span"
      }, async () => {
        // Simulate an asynchronous operation
        await new Promise(resolve => setTimeout(resolve, 99));

        throw new Error("Sentry Error");
      });
    }
  }
};
```

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

### Example Sentry SDK Bundles

Source: https://docs.sentry.io/platforms/javascript/guides/solid/install/loader

Provides concrete examples of Sentry SDK bundle filenames and their characteristics.

```text
bundle.js - @sentry/browser, compiled to ES6 but not minified, with debug logging included (as it is for all unminified bundles)
bundle.tracing.debug.min.js - @sentry/browser with tracing enabled, minified, with sdk debug logging included
```

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

### Initialize Sentry with `sentry wizard`

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

Run this command to use the framework-specific installation wizard for Sentry integration in Nuxt, bypassing the experimental AI flow.

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

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

### Initialize Sentry with Unleash Integration

Source: https://docs.sentry.io/platforms/javascript/guides/svelte/configuration/integrations/unleash

Configure Sentry with the Unleash integration, specifying the Unleash client class. This setup is for browser environments and requires installing both Sentry and Unleash SDKs.

```javascript
import * as Sentry from "@sentry/svelte";
import { UnleashClient } from "unleash-proxy-client";

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

const unleash = new UnleashClient({
  url: "https://<your-unleash-instance>/api/frontend",
  clientKey: "<your-client-side-token>",
  appName: "my-webapp",
});

unleash.start();

// Evaluate a flag with a default value. You may have to wait for your client to synchronize first.
unleash.isEnabled("test-flag");

Sentry.captureException(new Error("Something went wrong!"));

```

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

### Initialize Sentry with CaptureConsole (Loader v7)

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

This example demonstrates how to set up Sentry and the captureConsole integration using the v7 loader script. It requires configuring sentryOnLoad before adding the loader script.

```html
<script>
  // Configure sentryOnLoad before adding the Loader Script
  window.sentryOnLoad = function () {
    Sentry.init({});

    if (Sentry.captureConsoleIntegration) {
      Sentry.addIntegration(Sentry.captureConsoleIntegration());
    }
  };
</script>

<script
  src="https://js.sentry-cdn.com/<your-public-key>.min.js"
  crossorigin="anonymous"
></script>
<script
  src="https://browser.sentry-cdn.com/7.118.0/captureconsole.min.js"
  integrity="sha384-VFallslCjDR2cuAcmExABGThuV4+sfW+06c+UaqO4Fe6unI7ZD1CofpFWEwO2rQK"
  crossorigin="anonymous"
></script>
```

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

### Instrument Postgres.js SQL Instance

Source: https://docs.sentry.io/platforms/javascript/guides/cloudflare/configuration/integrations/postgresjs

Wrap your postgres.js `sql` instance with `instrumentPostgresJsSql` to enable Sentry span creation for all queries. This example shows basic setup within a Cloudflare Worker.

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

export default Sentry.withSentry((env) => ({ dsn: "__DSN__" }), {
  async fetch(request, env, ctx) {
    const sql = Sentry.instrumentPostgresJsSql(postgres(env.DATABASE_URL));

    // All queries now create Sentry spans
    const users = await sql`SELECT * FROM users WHERE id = ${userId}`;
    return Response.json(users);
  },
});
```

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

### JavaScript: Track All OpenFeature Evals with Sentry

Source: https://docs.sentry.io/platforms/javascript/guides/astro/configuration/integrations/openfeature

Integrates Sentry with OpenFeature to track all boolean flag evaluations. Ensure OpenFeature SDK is installed and instrumented. This setup tracks all evaluations globally.

```javascript
import * as Sentry from "@sentry/astro";
import { OpenFeature } from "@openfeature/web-sdk";

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

OpenFeature.setProvider(new MyProviderOfChoice());
OpenFeature.addHooks(new Sentry.OpenFeatureIntegrationHook());

const client = OpenFeature.getClient();
const result = client.getBooleanValue("test-flag", false); // evaluate with a default value
Sentry.captureException(new Error("Something went wrong!"));
```

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

### Initialize Sentry with User Feedback Integration

Source: https://docs.sentry.io/platforms/javascript/guides/capacitor/user-feedback

Set up the User Feedback integration by adding it to your Sentry initialization. This example shows basic DSN configuration and how to pass additional options like 'colorScheme' to the feedbackIntegration.

```javascript
import * as Sentry from "<sdk-package-name>";

Sentry.init({
  dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",

  integrations: [
    Sentry.feedbackIntegration({
      // Additional SDK configuration goes in here, for example:
      colorScheme: "system",
    }),
  ],
});
```

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

### Custom Routing with Disabled Automatic Spans

Source: https://docs.sentry.io/platforms/javascript/guides/capacitor/tracing/instrumentation/automatic-instrumentation

Disable default span creation for navigation and page loads by setting `instrumentNavigation: false` and `instrumentPageLoad: false`. Manually start spans for custom routing setups.

```javascript
const client = Sentry.init({
  integrations: [
    Sentry.browserTracingIntegration({
      // disable automatic span creation
      instrumentNavigation: false,
      instrumentPageLoad: false,
    }),
  ],
});

// We start the pageload span as early as possible!
let pageLoadSpan = Sentry.startBrowserTracingPageLoadSpan(client, {
  name: window.location.pathname,
  attributes: {
    [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "url",
  },
});

// Somewhere, instrument your router like this:
myRouter.on("routeChange", (route) => {
  // Make sure that the pageload span uses the route name
  // After that, each route change should trigger a navigation span (which will automatically finish the previous one)
  if (pageLoadSpan) {
    pageLoadSpan.updateName(route.name);
    pageLoadSpan.setAttribute(
      Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
      "route",
    );
    pageLoadSpan = undefined;
  } else {
    Sentry.startBrowserTracingNavigationSpan(client, {
      op: "navigation",
      name: route.name, // or what the name of the span should be
      attributes: {
        [Sentry.SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: "route",
      },
    });
  }
});
```