Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(flags): document custom featureFlagsIntegration and refactor all JS integration docs #12151

Merged
merged 12 commits into from
Dec 18, 2024
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
---
title: FeatureFlags
description: "Learn how to attach custom feature flag data to Sentry error events."
notSupported:
- javascript.aws-lambda
- javascript.azure-functions
- javascript.bun
- javascript.capacitor
- javascript.cloudflare
- javascript.connect
- javascript.cordova
- javascript.deno
- javascript.electron
- javascript.express
- javascript.fastify
- javascript.gcp-functions
- javascript.hapi
- javascript.koa
- javascript.nestjs
- javascript.nodejs
- javascript.wasm
---

<PlatformContent includePath="feature-flags/prerelease-alert" />

<Alert level="info">

This integration only works inside a browser environment. It is only available from a package-based install (e.g. `npm` or `yarn`).

</Alert>

<Alert level ="info">

If you are using an external feature flag provider, refer to the [supported list](/platforms/javascript/feature-flags/#enable-evaluation-tracking) before setting up this integration.

</Alert>

The Feature Flags integration allows you to manually track feature flag evaluations through an API.
These evaluations are held in memory and sent to Sentry when an error occurs.
**At the moment, we only support boolean flag evaluations.**

_Import names: `Sentry.featureFlagsIntegration` and `type Sentry.FeatureFlagsIntegration`_

<PlatformContent includePath="/configuration/featureflags" />

Visit the Sentry website and confirm that your error event has recorded the feature flag "test-flag" and its value "false".

<PlatformContent includePath="feature-flags/next-steps" />
Original file line number Diff line number Diff line change
Expand Up @@ -25,53 +25,16 @@ notSupported:

<Alert level="info">

This integration only works inside a browser environment.
This integration only works inside a browser environment. It is only available from a package-based install (e.g. `npm` or `yarn`).

</Alert>

The [LaunchDarkly](https://launchdarkly.com/) integration tracks feature flag evaluations produced by the LaunchDarkly SDK. These evaluations are held in memory, and in the event an error occurs, sent to Sentry for review and analysis. **At the moment, we only support boolean flag evaluations.**

_Import names: `Sentry.launchDarklyIntegration` and `Sentry.buildLaunchDarklyFlagUsedHandler`_

## Install
<PlatformContent includePath="/configuration/launchdarkly" />

Install your platform's Sentry SDK and [`launchdarkly-js-client-sdk`](https://www.npmjs.com/package/launchdarkly-js-client-sdk) from npm.

## Configure

```JavaScript
import * as Sentry from '@sentry/browser';
import * as LaunchDarkly from 'launchdarkly-js-client-sdk';

Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.launchDarklyIntegration()]
});

const ldClient = LaunchDarkly.initialize(
'my-client-ID',
{kind: 'user', key: 'my-user-context-key'},
{inspectors: [Sentry.buildLaunchDarklyFlagUsedHandler()]}
);
```

Learn more about the [LaunchDarkly SDK](https://docs.launchdarkly.com/sdk/client-side/javascript). At the moment, **we aren't officially supporting framework-specific LaunchDarkly SDKs.** However, you may reuse the setup code for [React](https://www.npmjs.com/package/launchdarkly-react-client-sdk) and [client-side Node.js](https://www.npmjs.com/package/launchdarkly-node-client-sdk).

## Verify

The integration is tested by evaluating a feature flag with your LaunchDarkly SDK before capturing an exception.

```JavaScript
import * as Sentry from '@sentry/browser';
import * as LaunchDarkly from 'launchdarkly-js-client-sdk';

// Evaluate a flag with a default value, with the ldClient from the Configure step.
// You may have to wait for your client to initialize before doing this.
ldClient?.variation("hello", false);

Sentry.captureException(Exception("Something went wrong!"))
```

Visit the Sentry website and confirm that your error event has recorded the feature flag "hello" and its value "false".
Visit the Sentry website and confirm that your error event has recorded the feature flag "test-flag" and its value "false".

<PlatformContent includePath="feature-flags/next-steps" />
Original file line number Diff line number Diff line change
Expand Up @@ -25,57 +25,16 @@ notSupported:

<Alert level="info">

This integration only works inside a browser environment.
This integration only works inside a browser environment. It is only available from a package-based install (e.g. `npm` or `yarn`).

</Alert>

The [OpenFeature](https://openfeature.dev/) integration tracks feature flag evaluations produced by the OpenFeature SDK. These evaluations are held in memory, and in the event an error occurs, sent to Sentry for review and analysis. **At the moment, we only support boolean flag evaluations.**

_Import name: `Sentry.openFeatureIntegration` and `Sentry.OpenFeatureIntegrationHook`_

## Install
<PlatformContent includePath="/configuration/openfeature" />

Install your platform's Sentry SDK and [`@openfeature/web-sdk`](https://www.npmjs.com/package/@openfeature/web-sdk) from npm.

## Configure

```JavaScript
import * as Sentry from '@sentry/browser';
import { OpenFeature } from '@openfeature/web-sdk';

Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.openFeatureIntegration()]
});

OpenFeature.setProvider(new MyProviderOfChoice());

// Option 1: track all OpenFeature evaluations.
OpenFeature.addHooks(new Sentry.OpenFeatureIntegrationHook());

// Option 2: only track evaluations by a specific client.
const client = OpenFeature.getClient();
client.addHooks(new Sentry.OpenFeatureIntegrationHook());
```

Learn more about OpenFeature [providers](https://openfeature.dev/docs/reference/concepts/provider) and the [web SDK](https://openfeature.dev/docs/reference/technologies/client/web/).

## Verify

The integration is tested by evaluating a feature flag with your OpenFeature SDK before capturing an exception.

```JavaScript
import * as Sentry from '@sentry/browser';
import { OpenFeature } from '@openfeature/web-sdk';

// Evaluate a flag with a default value. If you added the hook to a client in
// the Configure step, make sure to use the same client here.
const client = OpenFeature.getClient();
const result = client.getBooleanValue('hello', false);

Sentry.captureException(Exception("Something went wrong!"))
```

Visit the Sentry website and confirm that your error event has recorded the feature flag "hello" and its value "false".
Visit the Sentry website and confirm that your error event has recorded the feature flag "test-flag" and its value "false".

<PlatformContent includePath="feature-flags/next-steps" />
1 change: 1 addition & 0 deletions docs/platforms/javascript/common/feature-flags/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -33,5 +33,6 @@ description: With Feature Flags, Sentry tracks feature flag evaluations in your
Evaluation tracking requires enabling an SDK integration. Integrations are provider specific. Documentation for supported providers is listed below.
- [OpenFeature](/platforms/javascript/configuration/integrations/openfeature/)
- [LaunchDarkly](/platforms/javascript/configuration/integrations/launchdarkly/)
- [Generic Support](/platforms/javascript/configuration/integrations/featureflags/) - if you use an unsupported or in-house provider, you may manually track evaluations through an API.

<PlatformContent includePath="feature-flags/enable-change-tracking" />
1 change: 1 addition & 0 deletions docs/platforms/python/feature-flags/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,6 @@ Evaluation tracking requires enabling an SDK integration. Integrations are provi

- [OpenFeature](/platforms/python/integrations/openfeature/)
- [LaunchDarkly](/platforms/python/integrations/launchdarkly/)
- [Generic Support](/platforms/javascript/configuration/integrations/featureflags/) - if you use an unsupported or in-house provider, you may manually track evaluations through an API.

<PlatformContent includePath="feature-flags/enable-change-tracking" />
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/angular';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.astro.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/astro';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.ember.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/ember';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.gatsby.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/gatsby';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/browser';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.nextjs.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/nextjs';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.nuxt.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/nuxt';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.react.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/react';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.remix.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/remix';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.solid.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/solid';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/solidstart';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
17 changes: 17 additions & 0 deletions platform-includes/configuration/featureflags/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
```typescript
import * as Sentry from '@sentry/svelte';

Sentry.init({
dsn: '___PUBLIC_DSN___',
integrations: [Sentry.featureFlagsIntegration()]
});

const flagsIntegration = Sentry.getClient()?
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
if (flagsIntegration) {
flagsIntegration.addFeatureFlag('test-flag', false);
} else {
// Something went wrong, check your DSN and/or integrations
}
Sentry.captureException(new Error('Something went wrong!'));
```
Loading
Loading