feat(flags): document statsig browser integration (#12718)

* feat(flags): document statsig browser integration

* Add /

* Specify sdk name

* Statsig feature gates

* Fix node name in notSupported list

* Improve statsigClient comment

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

* Add platform config

---------

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

Author: aliu39

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

@@ -0,0 +1,40 @@
+---
+title: Statsig
+description: "Learn how to use Sentry with Statsig."
+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.node
+  - 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>
+
+The [Statsig](https://www.statsig.com/) integration tracks feature flag evaluations produced by the Statsig JavaScript Client 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 from Statsig's `checkGate` method**. Learn more about [Statsig feature gates](https://docs.statsig.com/feature-flags/working-with/).
+
+This integration is available in Sentry SDK **versions 9.0.0 and higher**, or **versions 8.55.0 and higher for v8.**
+
+_Import name: `Sentry.statsigIntegration`_
+
+<PlatformContent includePath="/configuration/statsig" />
+
+<PlatformContent includePath="feature-flags/next-steps" />

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

@@ -35,6 +35,7 @@ Evaluation tracking requires enabling an SDK integration. Integrations are provi
 - [Generic](/platforms/javascript/configuration/integrations/featureflags/)
 - [LaunchDarkly](/platforms/javascript/configuration/integrations/launchdarkly/)
 - [OpenFeature](/platforms/javascript/configuration/integrations/openfeature/)
+- [Statsig](/platforms/javascript/configuration/integrations/statsig/)
 - [Unleash](/platforms/javascript/configuration/integrations/unleash/)
 
 ## Enable Change Tracking

platform-includes/configuration/integrations/javascript.mdx

@@ -25,4 +25,5 @@
 | [`replayIntegration`](./replay)                       |                  |            |             |     ✓      |           ✓            |
 | [`replayCanvasIntegration`](./replaycanvas)           |                  |            |             |     ✓      |                        |
 | [`reportingObserverIntegration`](./reportingobserver) |                  |     ✓      |             |            |                        |
+| [`statsigIntegration`](./statsig)                     |                  |            |             |            |           ✓            |
 | [`unleashIntegration`](./unleash)                     |                  |            |             |            |           ✓            |

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/angular';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/astro';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/ember';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/gatsby';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

platform-includes/configuration/statsig/javascript.mdx

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/browser';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/nextjs';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/nuxt';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/react';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/remix';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/solid';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/solidstart';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

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

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/svelte';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

platform-includes/configuration/statsig/javascript.sveltekit.mdx

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/sveltekit';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".

platform-includes/configuration/statsig/javascript.vue.mdx

@@ -0,0 +1,20 @@
+Before using this integration, you need to install and instrument Statsig in your app. Learn more by reading [Statsig's SDK reference](https://docs.statsig.com/client/javascript-sdk) and [quickstart guide](https://docs.statsig.com/guides/first-feature).
+
+```javascript
+import * as Sentry from '@sentry/vue';
+import { StatsigClient } from '@statsig/js-client';
+
+const statsigClient = new StatsigClient( YOUR_SDK_KEY, { userID: 'my-user-id' }, {} ); // see Statsig SDK reference.
+
+Sentry.init({
+  dsn: '___PUBLIC_DSN___',
+  integrations: [Sentry.statsigIntegration({featureFlagClient: statsigClient})],
+});
+
+await statsigClient.initializeAsync();  // or statsigClient.initializeSync();
+
+const result = statsigClient.checkGate('my-feature-gate');
+Sentry.captureException(new Error('something went wrong'));
+```
+
+Visit the Sentry website and confirm that your error event has recorded the feature flag "my-feature-gate" and its value "false".