### Manage Project Lifecycle with pnpm
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solid-tanstack-router/README.md
Commands for installing dependencies, starting the development server, and building the application for production.
```bash
pnpm install
pnpm start
```
```bash
pnpm build
```
--------------------------------
### Loading Manual Setup
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/aws-serverless/README.md
Load the manually initialized SDK before your function starts by importing the instrument.js file via a NODE_OPTIONS environment variable.
```bash
NODE_OPTIONS="--import ./instrument.js"
```
--------------------------------
### Install Sentry Next.js SDK using Wizard
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/nextjs/README.md
Installs the Sentry Next.js SDK using the official Sentry wizard. This command initiates an interactive setup process that guides users through logging into their Sentry account and configuring the SDK for automatic error tracking and performance monitoring.
```shell
npx @sentry/wizard@latest -i nextjs
```
--------------------------------
### Install Dependencies and Build
Source: https://github.com/getsentry/sentry-javascript/blob/develop/CLAUDE.md
Run these commands after cloning the repository to install all dependencies and build the project.
```bash
yarn install && yarn build
```
--------------------------------
### Install Dependencies and Build Project
Source: https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md
Run these commands from the top level of the repo to install all dependencies and perform an initial build.
```bash
yarn
yarn build
```
--------------------------------
### Install Dependencies
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/ember-embroider/README.md
Run this command after cloning the repository to install all necessary project dependencies.
```bash
npm install
```
--------------------------------
### Install Dependencies
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/node-firebase/README.md
Installs all required project dependencies using the pnpm package manager.
```shell
$ pnpm install
```
--------------------------------
### Install fzf for Makefile
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/README.md
Install the fuzzy finder tool 'fzf' using Homebrew, which is a prerequisite for using the interactive Makefile.
```bash
brew install fzf
```
--------------------------------
### Configure Layouts with Outlets
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solid-tanstack-router/README.md
Defining a root layout using createRootRoute and the Outlet component to render nested route content.
```tsx
const rootRoute = createRootRoute({
component: () => (
<>
>
),
});
```
--------------------------------
### Install @sentry/node-core
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/node-core/README.md
Install the @sentry/node-core package using npm or yarn.
```bash
npm install @sentry/node-core
# Or yarn
yarn add @sentry/node-core
```
--------------------------------
### Full Sentry Initialization Example with Replay
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/replay-canvas/README.md
This example shows a complete Sentry initialization with both replayIntegration and replayCanvasIntegration enabled. It includes sample rate configurations for sessions and errors.
```javascript
import * as Sentry from '@sentry/browser';
// or e.g. import * as Sentry from '@sentry/react';
Sentry.init({
dsn: '__DSN__',
// This sets the sample rate to be 10%. You may want this to be 100% while
// in development and sample at a lower rate in production
replaysSessionSampleRate: 0.1,
// If the entire session is not sampled, use the below sample rate to sample
// sessions when an error occurs.
replaysOnErrorSampleRate: 1.0,
integrations: [Sentry.replayIntegration(), Sentry.replayCanvasIntegration()],
// ...
});
```
--------------------------------
### Install Sentry Node and Profiling SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/profiling-node/README.md
Install both the core Sentry Node SDK and the profiling extension. This is required before you can use profiling features.
```bash
yarn add @sentry/node @sentry/profiling-node
```
```bash
npm install --save @sentry/node @sentry/profiling-node
```
--------------------------------
### Custom Usage of Sentry TanStack Start React SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/tanstackstart-react/README.md
Demonstrates how to set user information, tags, context, add breadcrumbs, and capture exceptions or messages using the Sentry TanStack Start React SDK. Ensure you have installed the SDK and imported the necessary modules.
```typescript
import * as Sentry from '@sentry/tanstackstart-react';
// Set user information, as well as tags and further extras
Sentry.setTag('user_mode', 'admin');
Sentry.setUser({ id: '4711' });
Sentry.setContext('application_area', { location: 'checkout' });
// Add a breadcrumb for future events
Sentry.addBreadcrumb({
message: '"Add to cart" clicked',
// ...
});
// Capture exceptions or messages
Sentry.captureException(new Error('Oh no.'));
Sentry.captureMessage('Hello, world!');
```
--------------------------------
### Run Svelte Development Server
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/sveltekit-2-kit-tracing/README.md
Commands to start the development server for a Svelte project. After installation, this command launches the local server. The `-- --open` flag automatically opens the application in a new browser tab.
```bash
npm run dev
npm run dev -- --open
```
--------------------------------
### Serve Application Locally
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/ember-embroider/README.md
Starts the development server and makes the application accessible at http://localhost:4200.
```bash
ember serve
```
--------------------------------
### Run NestJS Project
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/nestjs-fastify/README.md
Commands to start the NestJS application. Use `start:dev` for development with watch mode, and `start:prod` for production builds.
```bash
yarn run start
```
```bash
yarn run start:dev
```
```bash
yarn run start:prod
```
--------------------------------
### Install Sentry SolidStart SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/solidstart/README.md
Commands to install the Sentry SolidStart package using common JavaScript package managers.
```bash
npm install @sentry/solidstart
yarn add @sentry/solidstart
```
--------------------------------
### Install Windows Build Tools
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/profiling-node/README.md
Install the necessary build tools for Windows if you are compiling native modules from source. This can be done using either yarn or npm.
```bash
# using yarn package manager
yarn global add windows-build-tools
# or npm package manager
npm i -g windows-build-tools
```
--------------------------------
### Install Sentry JavaScript SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/README.md
Install the high-level Sentry browser SDK using npm or yarn.
```sh
npm install --save @sentry/browser
yarn add @sentry/browser
```
--------------------------------
### Install Sentry Nitro SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/nitro/README.md
Install the Sentry Nitro SDK using your preferred package manager.
```bash
# Using npm
npm install @sentry/nitro
# Using yarn
yarn add @sentry/nitro
# Using pnpm
pnpm add @sentry/nitro
```
--------------------------------
### Compile and Run Project
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/node-firebase/README.md
Commands to build the functions and Firestore application, start the emulator, and launch the application locally.
```shell
$ pnpm dev
$ pnpm emulate
$ pnpm start
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/nestjs-fastify/README.md
Use this command to install all the necessary dependencies for your NestJS project. Ensure you have Yarn installed.
```bash
yarn install
```
--------------------------------
### Install @sentry/opentelemetry
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/opentelemetry/README.md
Install the package using npm or yarn. Ensure peer dependencies like `@opentelemetry/api` are met.
```bash
npm install @sentry/opentelemetry
# Or yarn
yarn add @sentry/opentelemetry
```
--------------------------------
### Install Sentry Hono SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/hono/README.md
Install the `@sentry/hono` package using npm. This is the first step to integrate Sentry into your Hono application.
```bash
npm install @sentry/hono
```
--------------------------------
### Setup Sentry with OpenTelemetry
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/opentelemetry/README.md
Initialize Sentry, configure OpenTelemetry components like Sampler, SpanProcessor, ContextManager, and Propagator, and set the async context strategy.
```javascript
import * as Sentry from '@sentry/node';
import {
SentryAsyncLocalStorageContextManager,
SentryPropagator,
SentrySampler,
SentrySpanProcessor,
setupEventContextTrace,
setOpenTelemetryContextAsyncContextStrategy,
} from '@sentry/opentelemetry';
import { context, propagation, trace } from '@opentelemetry/api';
function setupSentry() {
Sentry.init({
dsn: 'xxx',
});
const client = Sentry.getClient();
setupEventContextTrace(client);
const provider = new BasicTracerProvider({
sampler: new SentrySampler(client),
});
provider.addSpanProcessor(new SentrySpanProcessor());
// Initialize the provider
trace.setGlobalTracerProvider(provider);
propagation.setGlobalPropagator(new SentryPropagator());
context.setGlobalContextManager(new SentryAsyncLocalStorageContextManager());
setOpenTelemetryContextAsyncContextStrategy();
}
```
--------------------------------
### Install @sentry/cloudflare package
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/cloudflare/README.md
Install the Sentry SDK for Cloudflare using npm.
```bash
npm install @sentry/cloudflare
```
--------------------------------
### Install Sentry Node-Core with OpenTelemetry Dependencies
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/node-core/README.md
Install the Sentry Node-Core SDK along with necessary OpenTelemetry packages using npm or yarn.
```bash
npm install @sentry/node-core @sentry/opentelemetry @opentelemetry/api @opentelemetry/core @opentelemetry/instrumentation @opentelemetry/sdk-trace-base
# Or yarn
yarn add @sentry/node-core @sentry/opentelemetry @opentelemetry/api @opentelemetry/core @opentelemetry/instrumentation @opentelemetry/sdk-trace-base
```
--------------------------------
### Bundle @sentry/profiling-node with esbuild and .copy loader
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/profiling-node/README.md
Example configuration for bundling with esbuild, using a '.copy' loader for .node files and integrating with sentry-esbuild-plugin for sourcemap uploads.
```json
// package.json
{
"scripts": "node esbuild.serverless.js"
}
```
```javascript
// esbuild.serverless.js
const { sentryEsbuildPlugin } = require('@sentry/esbuild-plugin');
require('esbuild').build({
entryPoints: ['./index.js'],
outfile: './dist',
platform: 'node',
bundle: true,
minify: true,
sourcemap: true,
// This is no longer necessary
// external: ["@sentry/profiling-node"],
loader: {
// ensures .node binaries are copied to ./dist
'.node': 'copy',
},
plugins: [
// See https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/esbuild/
sentryEsbuildPlugin({
project: '',
org: '',
authToken: '',
release: '',
sourcemaps: {
// Specify the directory containing build artifacts
assets: './dist/**',
},
}),
],
});
```
--------------------------------
### Automatic Setup Environment Variables
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/aws-serverless/README.md
Set these environment variables in your Lambda function configuration for automatic SDK setup. Ensure SENTRY_DSN is replaced with your actual DSN.
```bash
NODE_OPTIONS="--import @sentry/aws-serverless/awslambda-auto"
SENTRY_DSN="__DSN__"
# Add Tracing by setting tracesSampleRate and adding integration
# Set tracesSampleRate to 1.0 to capture 100% of transactions
# We recommend adjusting this value in production
# Learn more at
# https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
SENTRY_TRACES_SAMPLE_RATE="1.0"
```
--------------------------------
### Example Test Application Variants Configuration
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/README.md
An example JSON structure for defining variants within a test application's package.json. This is used for targeted testing.
```json
{
"sentryTest": {
"variants": [
{
"build-command": "pnpm test:build-13",
"label": "nextjs-pages-dir (next@13)"
},
{
"build-command": "pnpm test:build-13-canary",
"label": "nextjs-pages-dir (next@13-canary)"
},
{
"build-command": "pnpm test:build-15",
"label": "nextjs-pages-dir (next@15)"
}
]
}
}
```
--------------------------------
### Setup Sentry SDK with Effect v4
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/effect/README.md
This setup is for Effect v4, which has reorganized Tracer and Logger layer APIs. It uses `Layer.succeed` for Tracer and `Logger.layer` for Logger.
```typescript
import * as Sentry from '@sentry/effect/server';
import { NodeHttpServer, NodeRuntime } from '@effect/platform-node';
import * as Layer from 'effect/Layer';
import * as Logger from 'effect/Logger';
import * as Tracer from 'effect/Tracer';
import { HttpRouter } from 'effect/unstable/http';
import { createServer } from 'http';
import { Routes } from './Routes.js';
const SentryLive = Layer.mergeAll(
Sentry.effectLayer({
dsn: '__DSN__',
tracesSampleRate: 1.0,
enableLogs: true,
}),
Layer.succeed(Tracer.Tracer, Sentry.SentryEffectTracer),
Logger.layer([Sentry.SentryEffectLogger]),
Sentry.SentryEffectMetricsLayer,
);
const HttpLive = HttpRouter.serve(Routes).pipe(
Layer.provide(NodeHttpServer.layer(() => createServer(), { port: 3030 })),
Layer.provide(SentryLive),
);
NodeRuntime.runMain(Layer.launch(HttpLive));
```
--------------------------------
### Initialize and Use Sentry JavaScript SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/README.md
Basic setup for the Sentry JavaScript SDK, including DSN configuration and capturing a message. Ensure you replace '__DSN__' with your actual DSN.
```javascript
import * as Sentry from '@sentry/browser';
Sentry.init({
dsn: '__DSN__',
// ...
});
Sentry.captureMessage('Hello, world!');
```
--------------------------------
### Run Sentry-instrumented SolidStart Application
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/solidstart/README.md
Commands to start a SolidStart application with Sentry instrumentation enabled via NODE_OPTIONS or build logs.
```bash
NODE_OPTIONS='--import=./.output/server/instrument.server.mjs' yarn start
```
```bash
[Sentry SolidStart withSentry] Successfully created /my/project/path/.output/server/instrument.server.mjs.
```
--------------------------------
### Setup Sentry SDK with Effect v3
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/effect/README.md
Use this setup for Effect v3. It merges Sentry's effect layer, tracer, logger, and metrics layer with the application's HTTP live layer.
```typescript
import * as Sentry from '@sentry/effect/server';
import { NodeRuntime } from '@effect/platform-node';
import { Layer, Logger } from 'effect';
import { HttpLive } from './Http.js';
const SentryLive = Layer.mergeAll(
Sentry.effectLayer({
dsn: '__DSN__',
tracesSampleRate: 1.0,
enableLogs: true,
}),
Layer.setTracer(Sentry.SentryEffectTracer),
Logger.replace(Logger.defaultLogger, Sentry.SentryEffectLogger),
Sentry.SentryEffectMetricsLayer,
);
const MainLive = HttpLive.pipe(Layer.provide(SentryLive));
MainLive.pipe(Layer.launch, NodeRuntime.runMain);
```
--------------------------------
### Initialize Sentry and OpenTelemetry
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/node-core/README.md
Initialize Sentry with your DSN and configure the OpenTelemetry provider with Sentry's sampler and span processor. This setup is crucial for error tracking and trace propagation.
```javascript
// CJS Syntax
const { trace, propagation, context } = require('@opentelemetry/api');
const { NodeTracerProvider } = require('@opentelemetry/sdk-trace-node');
const Sentry = require('@sentry/node-core');
const { SentrySpanProcessor, SentryPropagator, SentrySampler } = require('@sentry/opentelemetry');
// ESM Syntax
import { context, propagation, trace } from '@opentelemetry/api';
import { NodeTracerProvider } from '@opentelemetry/sdk-trace-node';
import * as Sentry from '@sentry/node-core';
import { SentrySpanProcessor, SentryPropagator, SentrySampler } from '@sentry/opentelemetry';
const sentryClient = Sentry.init({
dsn: '__DSN__',
// ...
});
if (sentryClient) {
// Note: This could be BasicTracerProvider or any other provider depending on how you want to use the
// OpenTelemetry SDK
const provider = new NodeTracerProvider({
// Ensure the correct subset of traces is sent to Sentry
// This also ensures trace propagation works as expected
sampler: new SentrySampler(sentryClient),
spanProcessors: [
// Ensure spans are correctly linked & sent to Sentry
new SentrySpanProcessor(),
// Add additional processors here
],
});
trace.setGlobalTracerProvider(provider);
propagation.setGlobalPropagator(new SentryPropagator());
context.setGlobalContextManager(new Sentry.SentryContextManager());
}
// Set up the OpenTelemetry logger to use Sentry's logger
Sentry.setupOpenTelemetryLogger();
// validate your setup
Sentry.validateOpenTelemetrySetup();
```
--------------------------------
### Navigate with Link Component
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solid-tanstack-router/README.md
Using the Link component from @tanstack/solid-router to enable SPA navigation between defined routes.
```tsx
import { Link } from '@tanstack/solid-router';
About
```
--------------------------------
### Verify Lambda Handler
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/aws-serverless/README.md
Example handlers to verify SDK integration. Throws an error to test error reporting.
```javascript
// async (recommended)
export const handler = async (event, context) => {
throw new Error('oh, hello there!');
};
// sync
export const handler = (event, context, callback) => {
throw new Error('oh, hello there!');
};
```
--------------------------------
### Implement Data Fetching with Loaders
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solid-tanstack-router/README.md
Using the loader property in a route definition to fetch data before rendering, and accessing it via useLoaderData.
```tsx
const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/people',
loader: async () => {
const response = await fetch('https://swapi.dev/api/people');
return response.json() as Promise<{
results: {
name: string;
}[];
}>;
},
component: () => {
const data = peopleRoute.useLoaderData();
return (
{data.results.map(person => (
{person.name}
))}
);
},
});
```
--------------------------------
### Set Up E2E Test Environment
Source: https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md
Navigate to the E2E tests directory and copy the example environment file. Fill in Sentry project authentication details if tests will send data to Sentry.
```bash
cd dev-packages/e2e-tests
cp .env.example .env
# Fill in Sentry project auth info if running tests that send data to Sentry
```
--------------------------------
### Define and Register Routes
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solid-tanstack-router/README.md
How to create new routes using createRoute and register them within the routeTree. Supports both inline components and imported components.
```tsx
const aboutRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/about',
component: () =>
About
,
});
const routeTree = rootRoute.addChildren([indexRoute, aboutRoute]);
```
```tsx
import About from './components/About.tsx';
const aboutRoute = createRoute({
getParentRoute: () => rootRoute,
path: '/about',
component: About,
});
```
--------------------------------
### Create Astro Project with Basics Template
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/astro-6-cf-workers/README.md
Use this command to initialize a new Astro project with the 'basics' template. This sets up a foundational project structure.
```sh
npm create astro@latest -- --template basics
```
--------------------------------
### Auto-Injecting Sentry Feedback Widget
Source: https://github.com/getsentry/sentry-javascript/blob/develop/docs/migration/feedback.md
This example demonstrates how to automatically inject the Sentry Feedback widget during SDK setup. This is the default behavior and creates a floating button to open the feedback form.
```javascript
Sentry.init({
integrations: [
feedbackIntegration({
autoInject: true,
}),
],
});
```
--------------------------------
### Start Inactive Span - JavaScript
Source: https://github.com/getsentry/sentry-javascript/blob/develop/docs/v8-new-performance-apis.md
Demonstrates how to start an inactive span using `startInactiveSpan`. This method does not create a child span of the active span and requires manual ending. It's useful for creating independent spans that do not need to be nested.
```javascript
Sentry.startSpan({ name: 'outer' }, () => {
const inner1 = Sentry.startInactiveSpan({ name: 'inner1' });
const inner2 = Sentry.startInactiveSpan({ name: 'inner2' });
// do something
// manually end the spans
inner1.end();
inner2.end();
});
```
--------------------------------
### Build SolidStart Project for Deployment
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solidstart-spa/README.md
Information on building a SolidStart project for deployment. It mentions the use of presets for optimization and the default Node.js app generation. Custom presets can be configured in app.config.js.
```bash
npm run build
```
--------------------------------
### Initialize Astro Project
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/astro-6/README.md
Uses the npm package manager to scaffold a new Astro project based on the official basics template. This command requires Node.js and npm to be installed on the host machine.
```sh
npm create astro@latest -- --template basics
```
--------------------------------
### Add Custom OpenTelemetry Instrumentation (Node.js)
Source: https://github.com/getsentry/sentry-javascript/blob/develop/docs/v8-node.md
Shows how to add custom OpenTelemetry instrumentation to your Sentry setup. After initializing Sentry, you can install and add other OpenTelemetry instrumentation packages using Sentry.addOpenTelemetryInstrumentation().
```javascript
const Sentry = require('@sentry/node');
const { GenericPoolInstrumentation } = require('@opentelemetry/instrumentation-generic-pool');
Sentry.init({
dsn: '__DSN__',
});
// Afterwards, you can add additional instrumentation:
Sentry.addOpenTelemetryInstrumentation(new GenericPoolInstrumentation());
```
--------------------------------
### Start Async Span and Handle Error in JavaScript
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/browser-integration-tests/suites/public-api/startSpan/error-async-throw/template.html
This snippet demonstrates starting an asynchronous span with `Sentry.startSpan` and executing an async function within it. It also shows how to handle errors thrown from the async callback. The span will be automatically finished when the async function completes or throws an error. No external dependencies beyond the Sentry SDK are required.
```javascript
async function run() {
await Promise.resolve();
await Sentry.startSpan({
name: 'parent_span',
op: 'test'
}, async () => {
throw new Error('Async Thrown Error');
});
}
const button = document.getElementById('button1');
button.addEventListener('click', () => {
void run();
});
```
--------------------------------
### Setting Tags on Scope Before Span in Sentry JavaScript
Source: https://github.com/getsentry/sentry-javascript/blob/develop/docs/v8-new-performance-apis.md
Demonstrates how to set tags on a scope before starting a span in Sentry JavaScript. This allows tags to be inherited by the span, even though the new model primarily uses attributes.
```javascript
Sentry.withScope(scope => {
scope.setTag('my-tag', 'tag-value');
Sentry.startSpan({ name: 'my-span' }, span => {
// do something here
// span will have the tags from the containing scope
});
});
```
--------------------------------
### Manually Manage Feedback Form Lifecycle
Source: https://github.com/getsentry/sentry-javascript/blob/develop/docs/migration/feedback.md
This section provides an example of how to manually manage the Sentry feedback form's lifecycle, offering more control than the `attachTo` convenience method. It illustrates creating the widget, appending it to the DOM, opening it, and handling form submission and closure events.
```javascript
function attachTo(button: HTMLElement) {
const handleClick = () => {
const widget = feedbackInstance.createWidget({
onFormClose: () => {
widget.close();
},
onFormSubmitted: () => {
widget.removeFromDom();
}
});
widget.appendToDom();
widget.open();
};
button.addEventListener('click', handleClick);
return () => {
button.removeEventListener('click', handleClick)
}
}
```
--------------------------------
### Initialize a SolidStart project
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solidstart-dynamic-import/README.md
Commands to scaffold a new Solid project using the npm init initializer. Supports creating projects in the current directory or a specified sub-directory.
```bash
# create a new project in the current directory
npm init solid@latest
# create a new project in my-app
npm init solid@latest my-app
```
--------------------------------
### Start Async Span with Promise Rejection (JavaScript)
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/browser-integration-tests/suites/public-api/startSpan/error-async-reject/template.html
This snippet shows how to initiate an asynchronous span using `Sentry.startSpan`. It includes an inner asynchronous function that intentionally rejects a promise. The Sentry SDK will automatically capture this rejection and associate it with the span. No external dependencies are required beyond the Sentry SDK itself.
```javascript
async function run() {
await Sentry.startSpan({
name: 'parent_span',
op: 'test'
}, async () => {
Promise.reject('Async Promise Rejection');
});
}
const button = document.getElementById('button1');
button.addEventListener('click', async () => {
await run();
});
```
--------------------------------
### Initialize Sentry SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/nitro/README.md
Create an `instrument.mjs` file to initialize the Sentry SDK with your DSN and tracing options.
```javascript
import * as Sentry from '@sentry/nitro';
Sentry.init({
dsn: '__YOUR_DSN__',
tracesSampleRate: 1.0,
});
```
--------------------------------
### Attach Feedback Form to Custom Button
Source: https://github.com/getsentry/sentry-javascript/blob/develop/docs/migration/feedback.md
This snippet demonstrates how to attach the Sentry feedback form to a custom HTML button. It shows two methods for obtaining the feedback integration instance: either by keeping a reference during SDK setup or by retrieving it from the SDK client. The `attachTo` method is then used to link the feedback form to a specified button.
```javascript
const feedbackInstance = feedbackIntegration();
Sentry.init({
integrations: [feedbackInstance],
});
// Or get a reference from the SDK client
// const feedbackInstance = getFeedback();
const myButton = document.getElementById('my-button');
const unsubscribe = feedbackInstance.attachTo(myButton);
// Remember to call unsubscribe() or feedbackInstance.remove() when the button is removed from the page.
```
--------------------------------
### Install @sentry/typescript
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/typescript/README.md
Install the @sentry/typescript package as a development dependency using Yarn or NPM.
```sh
# With Yarn:
yarn add --dev @sentry/typescript
# With NPM:
npm install --save-dev @sentry/typescript
```
--------------------------------
### List All E2E Test Applications with Makefile
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/README.md
Use the Makefile to list all available E2E test applications.
```bash
make list
```
--------------------------------
### Initialize Sentry SDK in Deno
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/deno/README.md
Call `Sentry.init(options)` as early as possible in your main entry module to initialize the SDK and hook into the environment. The DSN is required for sending events to Sentry.
```javascript
import * as Sentry from 'npm:@sentry/deno';
Sentry.init({
dsn: '__DSN__',
// ...
});
```
--------------------------------
### Set up a New E2E Test Application
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/README.md
Commands to create a new directory for an E2E test application within the e2e-tests package. Remember to add `test:build` and `test:assert` commands to its package.json.
```bash
cd dev-packages/e2e-tests
mkdir test-applications/my-new-test-application
```
--------------------------------
### Initialize Sentry Server-side
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/solidstart/README.md
Sets up the Sentry SDK on the server side within a dedicated instrumentation file.
```javascript
import * as Sentry from '@sentry/solidstart';
Sentry.init({
dsn: '__PUBLIC_DSN__',
tracesSampleRate: 1.0, // Capture 100% of the transactions
});
```
--------------------------------
### Build Production Version
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/ember-embroider/README.md
Compiles the application for production, optimizing for performance and size.
```bash
ember build --environment production
```
--------------------------------
### Build SDK Packages and Create Tarballs
Source: https://github.com/getsentry/sentry-javascript/blob/develop/CONTRIBUTING.md
Run these commands to build the SDK packages and create tarballs for local testing. Re-run `build:tarball` after any package changes.
```bash
yarn build
yarn build:tarball
```
--------------------------------
### Test Single Package
Source: https://github.com/getsentry/sentry-javascript/blob/develop/CLAUDE.md
Navigate to a specific package directory and run its tests.
```bash
cd packages/ && yarn test
```
--------------------------------
### Run development server
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/solidstart-dynamic-import/README.md
Commands to start the local development server for a SolidStart application. Includes an optional flag to automatically open the application in a browser tab.
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
--------------------------------
### Install Sentry Deno Peer Dependency
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/hono/README.md
Install the `@sentry/deno` package as a peer dependency when using `@sentry/hono/deno`. This package is required but not directly imported.
```bash
npm install --save @sentry/deno
```
--------------------------------
### Initialize Sentry Client-side
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/solidstart/README.md
Configures Sentry in the client entry point, including browser tracing integration for Solid Router.
```jsx
import * as Sentry from '@sentry/solidstart';
import { solidRouterBrowserTracingIntegration } from '@sentry/solidstart/solidrouter';
import { mount, StartClient } from '@solidjs/start/client';
Sentry.init({
dsn: '__PUBLIC_DSN__',
integrations: [solidRouterBrowserTracingIntegration()],
tracesSampleRate: 1.0, // Capture 100% of the transactions
});
mount(() => , document.getElementById('app'));
```
--------------------------------
### Install Sentry Bun Peer Dependency
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/hono/README.md
Install the `@sentry/bun` package as a peer dependency when using `@sentry/hono/bun`. This package is required but not directly imported.
```bash
npm install --save @sentry/bun
```
--------------------------------
### Install Sentry Node Dependency
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/hono/README.md
Install the `@sentry/node` package as a peer dependency when using `@sentry/hono/node`. Ensure the version stays in sync with `@sentry/hono`.
```bash
npm install --save @sentry/node
```
--------------------------------
### Install Sentry Astro SDK
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/astro/README.md
Uses the Astro CLI to automatically install and configure the Sentry integration in your project.
```bash
npx astro add @sentry/astro
```
--------------------------------
### Manually Control Replay Recording
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/replay-internal/README.md
Stop and start replay recording manually using the `stop()`, `start()`, and `startBuffering()` methods on the replay integration instance.
```javascript
import * as Sentry from "@sentry/react";
import { BrowserClient } from "@sentry/browser";
const replay = Sentry.replayIntegration();
Sentry.init({
integrations: [replay]
});
const client = Sentry.getClient();
// Add replay integration, will start recording
client?.addIntegration(replay);
// Stop recording
replay.stop();
```
```javascript
replay.start(); // Will start a session in "session" mode, regardless of sample rates
replay.startBuffering(); // Will start a session in "buffer" mode, regardless of sample rates
```
--------------------------------
### Initialize Sentry with Profiling Integration
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/profiling-node/README.md
Initialize the Sentry SDK with the DSN, enable debugging, set trace and profile sample rates, and include the nodeProfilingIntegration. Ensure profilesSampleRate is set to profile.
```javascript
import * as Sentry from '@sentry/node';
import { nodeProfilingIntegration } from '@sentry/profiling-node';
Sentry.init({
dsn: 'https://7fa19397baaf433f919fbe02228d5470@o1137848.ingest.sentry.io/6625302',
debug: true,
tracesSampleRate: 1,
profilesSampleRate: 1, // Set profiling sampling rate.
integrations: [nodeProfilingIntegration()],
});
```
--------------------------------
### Configure and Compile Native Bindings
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/profiling-node/README.md
Configure node-gyp to prepare for building native modules and then compile the binaries. These commands are necessary when building the profiling package from source.
```bash
# configure node-gyp using yarn
yarn build:bindings:configure
# or using npm
npm run build:bindings:configure
# compile the binaries using yarn
yarn build:bindings
# or using npm
npm run build:bindings
```
--------------------------------
### Run Tests
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/test-applications/node-firebase/README.md
Commands to execute the test suite. Tests can be run directly or against the Firebase Emulator Suite for integration testing.
```shell
$ pnpm test:build
$ pnpm test:assert
# Or using emulator:
$ pnpm dev
$ pnpm emulate
$ pnpm test --ui
```
--------------------------------
### Install Sentry Cloudflare Peer Dependency
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/hono/README.md
When using Sentry with Cloudflare Workers, install the `@sentry/cloudflare` package as a peer dependency. Ensure the version stays in sync with `@sentry/hono`.
```bash
npm install --save @sentry/cloudflare
```
--------------------------------
### Load Instrument File with Node CLI
Source: https://github.com/getsentry/sentry-javascript/blob/develop/packages/hono/README.md
Use the `--import` flag with the `node` command to load the Sentry initialization file before your application code runs.
```bash
node --import ./instrument.mjs app.js
```
--------------------------------
### Check Installed Sentry Browser Package Version
Source: https://github.com/getsentry/sentry-javascript/blob/develop/dev-packages/e2e-tests/README.md
Command to inspect the currently installed version of the Sentry browser package within a test application's node_modules.
```bash
cat node_modules/@sentry/browser/package.json | grep version
```
--------------------------------
### Manual Client Creation in Browser
Source: https://github.com/getsentry/sentry-javascript/blob/develop/docs/v8-initializing.md
Shows how to create and manage secondary Sentry clients in browser environments where only one global client is active. Useful for browser extensions or isolated code segments.
```javascript
// Default client - this is used everywhere
Sentry.init({
dsn: 'xxx',
});
// Setup a manual client
const clientA = new Client();
const scope = new Scope();
scope.setClient(clientA);
// You can capture exceptions manually for this client like this:
scope.captureException();
```