### 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 ( ); }, }); ``` -------------------------------- ### 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(); ```