feat(flags): document custom featureFlagsIntegration and refactor all…

… JS integration docs (#12151)

* feat(flags): document featureFlagsIntegration for custom flag tracking

* Lowercase filename and create python file

* Del python doc

* review comment

Co-authored-by: Billy Vong <[email protected]>

* keep title consistent w identifier

* Rename featureFlags.mdx to featureflags.mdx

* Keep sentry/browser in code snippet

* Link from js index

* Link index from integration doc

* Fix invalid Exception syntax

* 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

* Update links, name 'Generic Support'

---------

Co-authored-by: Billy Vong <[email protected]>

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

@@ -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" />

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

@@ -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" />

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

@@ -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" />

docs/platforms/javascript/common/feature-flags/index.mdx

@@ -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" />

docs/platforms/python/feature-flags/index.mdx

@@ -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" />

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

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```

platform-includes/configuration/featureflags/javascript.mdx

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```

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

@@ -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!'));
+```