Skip to content

Commit fb02818

Browse files
aliu39aliu39
authored
ref(flags): add platform-specific content and refactor JS integration docs (#12172)
* ref(flags): add platform-specific content to JS integration docs * featureflags platforms * ld and of platforms * Rm 'Install with npm or yarn' * Label featureflags code as TypeScript * Update info alert and ffs link * Lowercase all code snippet language headers * Rewording from review * Use single quotes in all code snippets * Update provider pkg and docs links
1 parent 4277118 commit fb02818

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+1052
-117
lines changed

‎docs/platforms/javascript/common/configuration/integrations/featureflags.mdx‎

Lines changed: 10 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -25,47 +25,24 @@ notSupported:
2525

2626
<Alert level="info">
2727

28-
This integration only works inside a browser environment. If you are using a specific
29-
feature flag provider, refer to the supported list [here](/platforms/javascript/feature-flags/#enable-evaluation-tracking) before setting up this integration.
28+
This integration only works inside a browser environment. It is only available from a package-based install (e.g. `npm` or `yarn`).
3029

3130
</Alert>
3231

33-
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.
34-
**At the moment, we only support boolean flag evaluations.**
35-
36-
_Import names: `Sentry.featureFlagsIntegration` and `type Sentry.FeatureFlagsIntegration`_
37-
38-
## Install
39-
40-
Install your platform's Sentry SDK from npm.
32+
<Alert level ="info">
4133

42-
## Configure
34+
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.
4335

44-
```JavaScript
45-
import * as Sentry from '@sentry/browser';
46-
47-
Sentry.init({
48-
dsn: "___PUBLIC_DSN___",
49-
integrations: [Sentry.featureFlagsIntegration()]
50-
});
51-
```
52-
53-
## Verify
36+
</Alert>
5437

55-
The integration is tested by calling the `addFeatureFlag` method before capturing an exception.
38+
The Feature Flags integration allows you to manually track feature flag evaluations through an API.
39+
These evaluations are held in memory and sent to Sentry when an error occurs.
40+
**At the moment, we only support boolean flag evaluations.**
5641

57-
```JavaScript
58-
import * as Sentry from '@sentry/browser';
42+
_Import names: `Sentry.featureFlagsIntegration` and `type Sentry.FeatureFlagsIntegration`_
5943

60-
const flagsIntegration = Sentry.getClient()?.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
61-
if (flagsIntegration) {
62-
flagsIntegration.addFeatureFlag('hello', false);
63-
} else {
64-
// check your configure step
65-
}
66-
Sentry.captureException(new Error('broke'));
67-
```
44+
<PlatformContent includePath="/configuration/featureflags" />
6845

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

7148
<PlatformContent includePath="feature-flags/next-steps" />

‎docs/platforms/javascript/common/configuration/integrations/launchdarkly.mdx‎

Lines changed: 3 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -25,53 +25,16 @@ notSupported:
2525

2626
<Alert level="info">
2727

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

3030
</Alert>
3131

3232
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.**
3333

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

36-
## Install
36+
<PlatformContent includePath="/configuration/launchdarkly" />
3737

38-
Install your platform's Sentry SDK and [`launchdarkly-js-client-sdk`](https://www.npmjs.com/package/launchdarkly-js-client-sdk) from npm.
39-
40-
## Configure
41-
42-
```JavaScript
43-
import * as Sentry from '@sentry/browser';
44-
import * as LaunchDarkly from 'launchdarkly-js-client-sdk';
45-
46-
Sentry.init({
47-
dsn: "___PUBLIC_DSN___",
48-
integrations: [Sentry.launchDarklyIntegration()]
49-
});
50-
51-
const ldClient = LaunchDarkly.initialize(
52-
'my-client-ID',
53-
{kind: 'user', key: 'my-user-context-key'},
54-
{inspectors: [Sentry.buildLaunchDarklyFlagUsedHandler()]}
55-
);
56-
```
57-
58-
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).
59-
60-
## Verify
61-
62-
The integration is tested by evaluating a feature flag with your LaunchDarkly SDK before capturing an exception.
63-
64-
```JavaScript
65-
import * as Sentry from '@sentry/browser';
66-
import * as LaunchDarkly from 'launchdarkly-js-client-sdk';
67-
68-
// Evaluate a flag with a default value, with the ldClient from the Configure step.
69-
// You may have to wait for your client to initialize before doing this.
70-
ldClient?.variation("hello", false);
71-
72-
Sentry.captureException(new Error("Something went wrong!"))
73-
```
74-
75-
Visit the Sentry website and confirm that your error event has recorded the feature flag "hello" and its value "false".
38+
Visit the Sentry website and confirm that your error event has recorded the feature flag "test-flag" and its value "false".
7639

7740
<PlatformContent includePath="feature-flags/next-steps" />

‎docs/platforms/javascript/common/configuration/integrations/openfeature.mdx‎

Lines changed: 3 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -25,57 +25,16 @@ notSupported:
2525

2626
<Alert level="info">
2727

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

3030
</Alert>
3131

3232
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.**
3333

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

36-
## Install
36+
<PlatformContent includePath="/configuration/openfeature" />
3737

38-
Install your platform's Sentry SDK and [`@openfeature/web-sdk`](https://www.npmjs.com/package/@openfeature/web-sdk) from npm.
39-
40-
## Configure
41-
42-
```JavaScript
43-
import * as Sentry from '@sentry/browser';
44-
import { OpenFeature } from '@openfeature/web-sdk';
45-
46-
Sentry.init({
47-
dsn: "___PUBLIC_DSN___",
48-
integrations: [Sentry.openFeatureIntegration()]
49-
});
50-
51-
OpenFeature.setProvider(new MyProviderOfChoice());
52-
53-
// Option 1: track all OpenFeature evaluations.
54-
OpenFeature.addHooks(new Sentry.OpenFeatureIntegrationHook());
55-
56-
// Option 2: only track evaluations by a specific client.
57-
const client = OpenFeature.getClient();
58-
client.addHooks(new Sentry.OpenFeatureIntegrationHook());
59-
```
60-
61-
Learn more about OpenFeature [providers](https://openfeature.dev/docs/reference/concepts/provider) and the [web SDK](https://openfeature.dev/docs/reference/technologies/client/web/).
62-
63-
## Verify
64-
65-
The integration is tested by evaluating a feature flag with your OpenFeature SDK before capturing an exception.
66-
67-
```JavaScript
68-
import * as Sentry from '@sentry/browser';
69-
import { OpenFeature } from '@openfeature/web-sdk';
70-
71-
// Evaluate a flag with a default value. If you added the hook to a client in
72-
// the Configure step, make sure to use the same client here.
73-
const client = OpenFeature.getClient();
74-
const result = client.getBooleanValue('hello', false);
75-
76-
Sentry.captureException(new Error("Something went wrong!"))
77-
```
78-
79-
Visit the Sentry website and confirm that your error event has recorded the feature flag "hello" and its value "false".
38+
Visit the Sentry website and confirm that your error event has recorded the feature flag "test-flag" and its value "false".
8039

8140
<PlatformContent includePath="feature-flags/next-steps" />

‎platform-includes/configuration/featureflags/javascript.angular.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```typescript
2+
import * as Sentry from '@sentry/angular';
3+
4+
Sentry.init({
5+
dsn: '___PUBLIC_DSN___',
6+
integrations: [Sentry.featureFlagsIntegration()]
7+
});
8+
9+
const flagsIntegration = Sentry.getClient()?
10+
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
11+
if (flagsIntegration) {
12+
flagsIntegration.addFeatureFlag('test-flag', false);
13+
} else {
14+
// Something went wrong, check your DSN and/or integrations
15+
}
16+
Sentry.captureException(new Error('Something went wrong!'));
17+
```

‎platform-includes/configuration/featureflags/javascript.astro.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```typescript
2+
import * as Sentry from '@sentry/astro';
3+
4+
Sentry.init({
5+
dsn: '___PUBLIC_DSN___',
6+
integrations: [Sentry.featureFlagsIntegration()]
7+
});
8+
9+
const flagsIntegration = Sentry.getClient()?
10+
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
11+
if (flagsIntegration) {
12+
flagsIntegration.addFeatureFlag('test-flag', false);
13+
} else {
14+
// Something went wrong, check your DSN and/or integrations
15+
}
16+
Sentry.captureException(new Error('Something went wrong!'));
17+
```

‎platform-includes/configuration/featureflags/javascript.ember.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```typescript
2+
import * as Sentry from '@sentry/ember';
3+
4+
Sentry.init({
5+
dsn: '___PUBLIC_DSN___',
6+
integrations: [Sentry.featureFlagsIntegration()]
7+
});
8+
9+
const flagsIntegration = Sentry.getClient()?
10+
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
11+
if (flagsIntegration) {
12+
flagsIntegration.addFeatureFlag('test-flag', false);
13+
} else {
14+
// Something went wrong, check your DSN and/or integrations
15+
}
16+
Sentry.captureException(new Error('Something went wrong!'));
17+
```

‎platform-includes/configuration/featureflags/javascript.gatsby.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```typescript
2+
import * as Sentry from '@sentry/gatsby';
3+
4+
Sentry.init({
5+
dsn: '___PUBLIC_DSN___',
6+
integrations: [Sentry.featureFlagsIntegration()]
7+
});
8+
9+
const flagsIntegration = Sentry.getClient()?
10+
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
11+
if (flagsIntegration) {
12+
flagsIntegration.addFeatureFlag('test-flag', false);
13+
} else {
14+
// Something went wrong, check your DSN and/or integrations
15+
}
16+
Sentry.captureException(new Error('Something went wrong!'));
17+
```

‎platform-includes/configuration/featureflags/javascript.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```typescript
2+
import * as Sentry from '@sentry/browser';
3+
4+
Sentry.init({
5+
dsn: '___PUBLIC_DSN___',
6+
integrations: [Sentry.featureFlagsIntegration()]
7+
});
8+
9+
const flagsIntegration = Sentry.getClient()?
10+
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
11+
if (flagsIntegration) {
12+
flagsIntegration.addFeatureFlag('test-flag', false);
13+
} else {
14+
// Something went wrong, check your DSN and/or integrations
15+
}
16+
Sentry.captureException(new Error('Something went wrong!'));
17+
```

‎platform-includes/configuration/featureflags/javascript.nextjs.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```typescript
2+
import * as Sentry from '@sentry/nextjs';
3+
4+
Sentry.init({
5+
dsn: '___PUBLIC_DSN___',
6+
integrations: [Sentry.featureFlagsIntegration()]
7+
});
8+
9+
const flagsIntegration = Sentry.getClient()?
10+
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
11+
if (flagsIntegration) {
12+
flagsIntegration.addFeatureFlag('test-flag', false);
13+
} else {
14+
// Something went wrong, check your DSN and/or integrations
15+
}
16+
Sentry.captureException(new Error('Something went wrong!'));
17+
```

‎platform-includes/configuration/featureflags/javascript.nuxt.mdx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
```typescript
2+
import * as Sentry from '@sentry/nuxt';
3+
4+
Sentry.init({
5+
dsn: '___PUBLIC_DSN___',
6+
integrations: [Sentry.featureFlagsIntegration()]
7+
});
8+
9+
const flagsIntegration = Sentry.getClient()?
10+
.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
11+
if (flagsIntegration) {
12+
flagsIntegration.addFeatureFlag('test-flag', false);
13+
} else {
14+
// Something went wrong, check your DSN and/or integrations
15+
}
16+
Sentry.captureException(new Error('Something went wrong!'));
17+
```

0 commit comments

Comments
 (0)