ref(flags): add platform-specific content and refactor JS integration docs

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

@@ -25,46 +25,24 @@ notSupported:
 
 <Alert level="info">
 
-This integration only works inside a browser environment. If you are using a specific
-feature flag provider, refer to the supported list [here](/platforms/javascript/feature-flags/#enable-evaluation-tracking) before setting up this integration.
+This integration only works inside a browser environment, and you must install
+from npm.
 
 </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`_
-
-## Install
-
-Install your platform's Sentry SDK from npm.
+<Alert level ="info">
 
-## Configure
+If you are using an external feature flag provider, refer to the supported list [here](/platforms/javascript/feature-flags/#enable-evaluation-tracking) before setting up this integration.
 
-```JavaScript
-import * as Sentry from '@sentry/browser';
-
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",
-  integrations: [Sentry.featureFlagsIntegration()]
-});
-```
-
-## Verify
+</Alert>
 
-The integration is tested by calling the `addFeatureFlag` method before capturing an exception.
+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.**
 
-```JavaScript
-import * as Sentry from '@sentry/browser';
+_Import names: `Sentry.featureFlagsIntegration` and `type Sentry.FeatureFlagsIntegration`_
 
-const flagsIntegration = Sentry.getClient()?.getIntegrationByName<Sentry.FeatureFlagsIntegration>('FeatureFlags');
-if (flagsIntegration) {
-  flagsIntegration.addFeatureFlag('hello', false);
-} else {
-  // check your configure step
-}
-Sentry.captureException(new Error('broke'));
-```
+<PlatformContent includePath="/configuration/featureflags" />
 
 Visit the Sentry website and confirm that your error event has recorded the feature flag "hello" and its value "false".
 

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

@@ -25,52 +25,16 @@ notSupported:
 
 <Alert level="info">
 
-This integration only works inside a browser environment.
+This integration only works inside a browser environment, and you must install
+from npm.
 
 </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
-
-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(new Error("Something went wrong!"))
-```
+<PlatformContent includePath="/configuration/launchdarkly" />
 
 Visit the Sentry website and confirm that your error event has recorded the feature flag "hello" and its value "false".
 

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

@@ -25,56 +25,16 @@ notSupported:
 
 <Alert level="info">
 
-This integration only works inside a browser environment.
+This integration only works inside a browser environment, and you must install
+from npm.
 
 </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
-
-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(new Error("Something went wrong!"))
-```
+<PlatformContent includePath="/configuration/openfeature" />
 
 Visit the Sentry website and confirm that your error event has recorded the feature flag "hello" and its value "false".
 

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```

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('hello', false);
+} else {
+  // set up failed
+}
+Sentry.captureException(new Error('broke'));
+```