From e0c4cade86e43efb5735be045d34802270b6f124 Mon Sep 17 00:00:00 2001 From: Joe Date: Wed, 15 Jan 2025 23:57:20 -0800 Subject: [PATCH 1/8] Update Statsig Template to require fewer env variables --- edge-middleware/ab-testing-statsig/README.md | 4 +- .../ab-testing-statsig/lib/statsig-api.ts | 27 ++++++----- .../ab-testing-statsig/middleware.ts | 25 ++++++++-- .../ab-testing-statsig/pages/[bucket].tsx | 46 ++++++++++++++++--- 4 files changed, 77 insertions(+), 25 deletions(-) diff --git a/edge-middleware/ab-testing-statsig/README.md b/edge-middleware/ab-testing-statsig/README.md index 53527f27ab..37adf50ff4 100644 --- a/edge-middleware/ab-testing-statsig/README.md +++ b/edge-middleware/ab-testing-statsig/README.md @@ -8,7 +8,7 @@ useCase: - Edge Middleware - Documentation css: Tailwind -deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&integration-ids=oac_NAO87zzp3ADxj2ZUh3vikLip&env=STATSIG_SERVER_API_KEY,NEXT_PUBLIC_STATSIG_CLIENT_KEY,STATSIG_CONSOLE_API_KEY,EDGE_CONFIG,EDGE_CONFIG_ITEM_KEY&envDescription=Statsig%20API%20keys%20and%20Edge%20Config%20settings&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature +deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&integration-ids=oac_NAO87zzp3ADxj2ZUh3vikLip demoUrl: https://edge-ab-testing-statsig.vercel.app relatedTemplates: - ab-testing-google-optimize @@ -31,7 +31,7 @@ You can choose from one of the following two methods to use this repository: Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples): -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&integration-ids=oac_NAO87zzp3ADxj2ZUh3vikLip&env=STATSIG_SERVER_API_KEY,NEXT_PUBLIC_STATSIG_CLIENT_KEY,STATSIG_CONSOLE_API_KEY,EDGE_CONFIG,EDGE_CONFIG_ITEM_KEY&envDescription=Statsig%20API%20keys%20and%20Edge%20Config%20settings&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&integration-ids=oac_NAO87zzp3ADxj2ZUh3vikLip) ### Clone and Deploy diff --git a/edge-middleware/ab-testing-statsig/lib/statsig-api.ts b/edge-middleware/ab-testing-statsig/lib/statsig-api.ts index 902a1a7f89..0712feaab6 100644 --- a/edge-middleware/ab-testing-statsig/lib/statsig-api.ts +++ b/edge-middleware/ab-testing-statsig/lib/statsig-api.ts @@ -1,5 +1,5 @@ const STATSIG_URL = 'https://statsigapi.net' -const STATSIG_CONSOLE_API_KEY = process.env.STATSIG_CONSOLE_API_KEY! +const STATSIG_CONSOLE_API_KEY = process.env.STATSIG_CONSOLE_API_KEY /** * Fetch wrapper for the Statsig API @@ -44,17 +44,22 @@ async function statsig( const api = { async getBuckets(experiment: string) { - // https://docs.statsig.com/console-api/experiments#get-/experiments/-experiment_id- - const experimentConfig = await statsig( - `/console/v1/experiments/${experiment}`, - 'GET', - { apiKey: STATSIG_CONSOLE_API_KEY } - ) + try { + // https://docs.statsig.com/console-api/experiments#get-/experiments/-experiment_id- + const experimentConfig = await statsig( + `/console/v1/experiments/${experiment}`, + 'GET', + { apiKey: STATSIG_CONSOLE_API_KEY } + ) - return experimentConfig.data.groups.map( - (group: { parameterValues: { bucket: string } }) => - group.parameterValues.bucket - ) + return experimentConfig.data.groups.map( + (group: { parameterValues: { bucket: string } }) => + group.parameterValues.bucket + ) + } catch (e) { + console.error('Failed to fetch buckets from Statsig', e) + return [] + } }, } diff --git a/edge-middleware/ab-testing-statsig/middleware.ts b/edge-middleware/ab-testing-statsig/middleware.ts index 53a56c2e06..d80b694e0a 100644 --- a/edge-middleware/ab-testing-statsig/middleware.ts +++ b/edge-middleware/ab-testing-statsig/middleware.ts @@ -7,11 +7,18 @@ import { EXPERIMENT, UID_COOKIE, GROUP_PARAM_FALLBACK } from './lib/constants' // We'll use this to validate a random UUID const IS_UUID = /^[0-9a-f-]+$/i -const edgeConfigClient = createClient(process.env.EDGE_CONFIG) -const dataAdapter = new EdgeConfigDataAdapter({ - edgeConfigClient, - edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!, -}) +let dataAdapter: EdgeConfigDataAdapter; + +const missingEdgeConfigEnvVars = !process.env.EDGE_CONFIG || !process.env.EDGE_CONFIG_ITEM_KEY +const missingConsoleApiEnvVars = !process.env.STATSIG_CONSOLE_API_KEY + +if (!missingEdgeConfigEnvVars) { + const edgeConfigClient = createClient(process.env.EDGE_CONFIG) + dataAdapter = new EdgeConfigDataAdapter({ + edgeConfigClient, + edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY, + }) +} export const config = { matcher: '/', @@ -75,6 +82,14 @@ export async function middleware(req: NextRequest, event: NextFetchEvent) { const url = req.nextUrl.clone() url.pathname = `/${bucket}` + if (missingEdgeConfigEnvVars) { + url.searchParams.set('missingEdgeConfigEnvVars', 'true'); + } + + if (missingConsoleApiEnvVars) { + url.searchParams.set('missingConsoleApiEnvVars', 'true'); + } + // Response that'll rewrite to the selected bucket const res = NextResponse.rewrite(url) diff --git a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx index a71711ba77..fdc867e953 100644 --- a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx +++ b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx @@ -41,7 +41,7 @@ export const getStaticPaths: GetStaticPaths<{ bucket: string }> = async () => { } function BucketPage({ bucket }: Props) { - const { reload } = useRouter() + const { query, reload } = useRouter() function resetBucket() { Cookie.remove(UID_COOKIE) @@ -52,14 +52,10 @@ function BucketPage({ bucket }: Props) { return (
- Performant experimentation with Statsig + Experimentation with Statsig In this demo we use Statsig's Server SDK at the edge to pull - experiment variants and show the resulting allocation. We leverage the{' '} - - edge config integration - {' '} - to pull Statsig configurations from the edge. As long as you have a + experiment variants and show the resulting allocation. As long as you have a bucket assigned you will always see the same result, otherwise you will be assigned a bucket to mantain the odds specified in the experiment. @@ -101,6 +97,42 @@ function BucketPage({ bucket }: Props) { />
+
+ Leveraging Edge Config For Performance + { + query.missingEdgeConfigEnvVars ? + + You can leverage the {' '} + + edge config integration + {' '} to pull Statsig configurations from the edge to improve performance. Follow the README for more information. + : + + We leverage the{' '} + + edge config integration + {' '} + to pull Statsig configurations from the edge. + + } + + { + query.missingConsoleApiEnvVars ? + + Set the STATSIG_CONSOLE_API_KEY env variable to leverage static page + generation. The sample pre-renders pages at build time in a{' '} + /[bucket] page based on the experiment variants + so its fast to rewrite to them. Take a look at the + middleware.ts file to know more. + : + + Buckets are statically generated at build time in a{' '} + /[bucket] page so its fast to rewrite to them. Take a + look at the middleware.ts file to know more. + + } +
+
Using metrics in your experiments From 9b8de25b2a68c0e333d4117a48ac1922e5768d67 Mon Sep 17 00:00:00 2001 From: Joe Date: Thu, 16 Jan 2025 00:06:39 -0800 Subject: [PATCH 2/8] fix compile error --- edge-middleware/ab-testing-statsig/lib/statsig-api.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/edge-middleware/ab-testing-statsig/lib/statsig-api.ts b/edge-middleware/ab-testing-statsig/lib/statsig-api.ts index 0712feaab6..2af9a18063 100644 --- a/edge-middleware/ab-testing-statsig/lib/statsig-api.ts +++ b/edge-middleware/ab-testing-statsig/lib/statsig-api.ts @@ -1,5 +1,5 @@ const STATSIG_URL = 'https://statsigapi.net' -const STATSIG_CONSOLE_API_KEY = process.env.STATSIG_CONSOLE_API_KEY +const STATSIG_CONSOLE_API_KEY = process.env.STATSIG_CONSOLE_API_KEY ?? '' /** * Fetch wrapper for the Statsig API @@ -49,7 +49,7 @@ const api = { const experimentConfig = await statsig( `/console/v1/experiments/${experiment}`, 'GET', - { apiKey: STATSIG_CONSOLE_API_KEY } + { apiKey: STATSIG_CONSOLE_API_KEY } ) return experimentConfig.data.groups.map( From db39f13cf05457d45185ba1a49fffd2a7f51e98d Mon Sep 17 00:00:00 2001 From: Joe Date: Thu, 16 Jan 2025 00:08:21 -0800 Subject: [PATCH 3/8] fix compile error --- edge-middleware/ab-testing-statsig/middleware.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/edge-middleware/ab-testing-statsig/middleware.ts b/edge-middleware/ab-testing-statsig/middleware.ts index d80b694e0a..7b255539dc 100644 --- a/edge-middleware/ab-testing-statsig/middleware.ts +++ b/edge-middleware/ab-testing-statsig/middleware.ts @@ -16,7 +16,7 @@ if (!missingEdgeConfigEnvVars) { const edgeConfigClient = createClient(process.env.EDGE_CONFIG) dataAdapter = new EdgeConfigDataAdapter({ edgeConfigClient, - edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY, + edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!, }) } From 5080ecd7ce45615cd4e5e660e965a8f2698861dc Mon Sep 17 00:00:00 2001 From: Joe Date: Thu, 16 Jan 2025 00:16:11 -0800 Subject: [PATCH 4/8] remove repeated text --- edge-middleware/ab-testing-statsig/pages/[bucket].tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx index fdc867e953..f56cf2dcd0 100644 --- a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx +++ b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx @@ -60,11 +60,6 @@ function BucketPage({ bucket }: Props) { will be assigned a bucket to mantain the odds specified in the experiment. - - Buckets are statically generated at build time in a{' '} - /[bucket] page so its fast to rewrite to them. Take a - look at the middleware.ts file to know more. - You can reset the bucket multiple times to get a different bucket assigned. You can configure your experiments, see diagnostics and From 9412fc0a5d860dc8baaf8d57d5ea719a54edbe58 Mon Sep 17 00:00:00 2001 From: Joe Date: Thu, 16 Jan 2025 10:04:46 -0800 Subject: [PATCH 5/8] update readme with new deploy url --- edge-middleware/ab-testing-statsig/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/edge-middleware/ab-testing-statsig/README.md b/edge-middleware/ab-testing-statsig/README.md index 37adf50ff4..c2eb5a3b5f 100644 --- a/edge-middleware/ab-testing-statsig/README.md +++ b/edge-middleware/ab-testing-statsig/README.md @@ -8,7 +8,7 @@ useCase: - Edge Middleware - Documentation css: Tailwind -deployUrl: https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&integration-ids=oac_NAO87zzp3ADxj2ZUh3vikLip +deployUrl: https://vercel.com/new/clone?demo-description=Reduce+CLS+and+improve+performance+from+client-loaded+experiments+at+the+edge+with+Statsig&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3iWLIPxEQc7e5plRHDW5Nd%2Fdf781629a2e72f6ae5d05879787c4c79%2Fvercel_statsig.png&demo-title=Experimentation+with+Statsig&demo-url=https%3A%2F%2Fedge-ab-testing-statsig.vercel.app&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&products=%5B%7B%22integrationSlug%22%3A%22statsig%22%2C%22productSlug%22%3A%22statsig%22%2C%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experiments%22%7D%5D demoUrl: https://edge-ab-testing-statsig.vercel.app relatedTemplates: - ab-testing-google-optimize @@ -31,7 +31,7 @@ You can choose from one of the following two methods to use this repository: Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples): -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&integration-ids=oac_NAO87zzp3ADxj2ZUh3vikLip) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=Reduce+CLS+and+improve+performance+from+client-loaded+experiments+at+the+edge+with+Statsig&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3iWLIPxEQc7e5plRHDW5Nd%2Fdf781629a2e72f6ae5d05879787c4c79%2Fvercel_statsig.png&demo-title=Experimentation+with+Statsig&demo-url=https%3A%2F%2Fedge-ab-testing-statsig.vercel.app&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&products=%5B%7B%22integrationSlug%22%3A%22statsig%22%2C%22productSlug%22%3A%22statsig%22%2C%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experiments%22%7D%5D) ### Clone and Deploy From 85471b16a70a4c63871a278295c9427b491f8386 Mon Sep 17 00:00:00 2001 From: joe Date: Mon, 17 Feb 2025 17:22:17 -0800 Subject: [PATCH 6/8] Avoid CLS --- .../ab-testing-statsig/middleware.ts | 9 --- .../ab-testing-statsig/pages/[bucket].tsx | 68 ++++++++++--------- 2 files changed, 36 insertions(+), 41 deletions(-) diff --git a/edge-middleware/ab-testing-statsig/middleware.ts b/edge-middleware/ab-testing-statsig/middleware.ts index 7b255539dc..11545f43ce 100644 --- a/edge-middleware/ab-testing-statsig/middleware.ts +++ b/edge-middleware/ab-testing-statsig/middleware.ts @@ -10,7 +10,6 @@ const IS_UUID = /^[0-9a-f-]+$/i let dataAdapter: EdgeConfigDataAdapter; const missingEdgeConfigEnvVars = !process.env.EDGE_CONFIG || !process.env.EDGE_CONFIG_ITEM_KEY -const missingConsoleApiEnvVars = !process.env.STATSIG_CONSOLE_API_KEY if (!missingEdgeConfigEnvVars) { const edgeConfigClient = createClient(process.env.EDGE_CONFIG) @@ -82,14 +81,6 @@ export async function middleware(req: NextRequest, event: NextFetchEvent) { const url = req.nextUrl.clone() url.pathname = `/${bucket}` - if (missingEdgeConfigEnvVars) { - url.searchParams.set('missingEdgeConfigEnvVars', 'true'); - } - - if (missingConsoleApiEnvVars) { - url.searchParams.set('missingConsoleApiEnvVars', 'true'); - } - // Response that'll rewrite to the selected bucket const res = NextResponse.rewrite(url) diff --git a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx index f56cf2dcd0..7e050bb66d 100644 --- a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx +++ b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx @@ -18,12 +18,16 @@ import exampleScreenshot from '../public/example_experiment.png' interface Props { bucket: string + missingEdgeConfigEnvVars: boolean + missingConsoleApiEnvVars: boolean } export const getStaticProps: GetStaticProps = async ({ params }) => { return { props: { bucket: params?.bucket as string, + missingEdgeConfigEnvVars: !process.env.EDGE_CONFIG || !process.env.EDGE_CONFIG_ITEM_KEY, + missingConsoleApiEnvVars: !process.env.STATSIG_CONSOLE_API_KEY, }, } } @@ -35,13 +39,13 @@ export const getStaticPaths: GetStaticPaths<{ bucket: string }> = async () => { .filter(Boolean) return { - paths: groups.map((group) => ({ params: { bucket: group } })), + paths: groups.map((group) => ({ params: { bucket: group, missingEdgeConfigEnvVars: !process.env.EDGE_CONFIG || !process.env.EDGE_CONFIG_ITEM_KEY, missingConsoleApiEnvVars: !process.env.STATSIG_CONSOLE_API_KEY } })), fallback: 'blocking', } } -function BucketPage({ bucket }: Props) { - const { query, reload } = useRouter() +function BucketPage({ bucket, missingEdgeConfigEnvVars, missingConsoleApiEnvVars }: Props) { + const { reload } = useRouter() function resetBucket() { Cookie.remove(UID_COOKIE) @@ -81,8 +85,8 @@ function BucketPage({ bucket }: Props) { In order to set this demo up yourself, in the Statsig console - , create a new experiment called "statsig_example". - Create experiment groups, each with a "bucket" parameter. + , create a new experiment called "statsig_example". + Create experiment groups, each with a "bucket" parameter. Make sure to start the experiment, and from there this example will display the bucket that the user was assigned to. See the screenshot below for an example experiment setup. @@ -95,36 +99,36 @@ function BucketPage({ bucket }: Props) {
Leveraging Edge Config For Performance { - query.missingEdgeConfigEnvVars ? - - You can leverage the {' '} - - edge config integration - {' '} to pull Statsig configurations from the edge to improve performance. Follow the README for more information. - : - - We leverage the{' '} - - edge config integration - {' '} - to pull Statsig configurations from the edge. - + missingEdgeConfigEnvVars ? + + You can leverage the {' '} + + edge config integration + {' '} to pull Statsig configurations from the edge to improve performance. Follow the README for more information. + : + + We leverage the{' '} + + edge config integration + {' '} + to pull Statsig configurations from the edge. + } { - query.missingConsoleApiEnvVars ? - - Set the STATSIG_CONSOLE_API_KEY env variable to leverage static page - generation. The sample pre-renders pages at build time in a{' '} - /[bucket] page based on the experiment variants - so its fast to rewrite to them. Take a look at the - middleware.ts file to know more. - : - - Buckets are statically generated at build time in a{' '} - /[bucket] page so its fast to rewrite to them. Take a - look at the middleware.ts file to know more. - + missingConsoleApiEnvVars ? + + Set the STATSIG_CONSOLE_API_KEY env variable to leverage static page + generation. The sample pre-renders pages at build time in a{' '} + /[bucket] page based on the experiment variants + so its fast to rewrite to them. Take a look at the + middleware.ts file to know more. + : + + Buckets are statically generated at build time in a{' '} + /[bucket] page so its fast to rewrite to them. Take a + look at the middleware.ts file to know more. + }
From 325c27c3518f90e7a5283013e870a160495c2368 Mon Sep 17 00:00:00 2001 From: Joe Zeng Date: Mon, 24 Feb 2025 10:47:06 -0800 Subject: [PATCH 7/8] Update deploy URL --- edge-middleware/ab-testing-statsig/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/edge-middleware/ab-testing-statsig/README.md b/edge-middleware/ab-testing-statsig/README.md index c2eb5a3b5f..d4c23b929e 100644 --- a/edge-middleware/ab-testing-statsig/README.md +++ b/edge-middleware/ab-testing-statsig/README.md @@ -8,7 +8,7 @@ useCase: - Edge Middleware - Documentation css: Tailwind -deployUrl: https://vercel.com/new/clone?demo-description=Reduce+CLS+and+improve+performance+from+client-loaded+experiments+at+the+edge+with+Statsig&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3iWLIPxEQc7e5plRHDW5Nd%2Fdf781629a2e72f6ae5d05879787c4c79%2Fvercel_statsig.png&demo-title=Experimentation+with+Statsig&demo-url=https%3A%2F%2Fedge-ab-testing-statsig.vercel.app&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&products=%5B%7B%22integrationSlug%22%3A%22statsig%22%2C%22productSlug%22%3A%22statsig%22%2C%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experiments%22%7D%5D +deployUrl: https://vercel.com/new/clone?demo-description=Reduce+CLS+and+improve+performance+from+client-loaded+experiments+at+the+edge+with+Statsig&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3iWLIPxEQc7e5plRHDW5Nd%2Fdf781629a2e72f6ae5d05879787c4c79%2Fvercel_statsig.png&demo-title=Experimentation+with+Statsig&demo-url=https%3A%2F%2Fedge-ab-testing-statsig.vercel.app&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&products=%5B%7B%22integrationSlug%22%3A%22statsig%22%2C%22productSlug%22%3A%22statsig%22%2C%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experimentation%22%7D%5D demoUrl: https://edge-ab-testing-statsig.vercel.app relatedTemplates: - ab-testing-google-optimize @@ -31,7 +31,7 @@ You can choose from one of the following two methods to use this repository: Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples): -[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=Reduce+CLS+and+improve+performance+from+client-loaded+experiments+at+the+edge+with+Statsig&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3iWLIPxEQc7e5plRHDW5Nd%2Fdf781629a2e72f6ae5d05879787c4c79%2Fvercel_statsig.png&demo-title=Experimentation+with+Statsig&demo-url=https%3A%2F%2Fedge-ab-testing-statsig.vercel.app&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&products=%5B%7B%22integrationSlug%22%3A%22statsig%22%2C%22productSlug%22%3A%22statsig%22%2C%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experiments%22%7D%5D) +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?demo-description=Reduce+CLS+and+improve+performance+from+client-loaded+experiments+at+the+edge+with+Statsig&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3iWLIPxEQc7e5plRHDW5Nd%2Fdf781629a2e72f6ae5d05879787c4c79%2Fvercel_statsig.png&demo-title=Experimentation+with+Statsig&demo-url=https%3A%2F%2Fedge-ab-testing-statsig.vercel.app&envLink=https%3A%2F%2Fdocs.statsig.com%2Fguides%2Ffirst-feature&project-name=ab-testing-statsig&repository-name=ab-testing-statsig&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-statsig&products=%5B%7B%22integrationSlug%22%3A%22statsig%22%2C%22productSlug%22%3A%22statsig%22%2C%22type%22%3A%22integration%22%2C%22protocol%22%3A%22experimentation%22%7D%5D) ### Clone and Deploy From 67e4cb7e5410b25919a737833714dce484f6dc51 Mon Sep 17 00:00:00 2001 From: Joe Zeng Date: Mon, 24 Feb 2025 13:01:21 -0800 Subject: [PATCH 8/8] Update env vars to match marketplace env vars --- edge-middleware/ab-testing-statsig/middleware.ts | 6 +++--- edge-middleware/ab-testing-statsig/pages/[bucket].tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/edge-middleware/ab-testing-statsig/middleware.ts b/edge-middleware/ab-testing-statsig/middleware.ts index 11545f43ce..bfdc525a20 100644 --- a/edge-middleware/ab-testing-statsig/middleware.ts +++ b/edge-middleware/ab-testing-statsig/middleware.ts @@ -9,13 +9,13 @@ const IS_UUID = /^[0-9a-f-]+$/i let dataAdapter: EdgeConfigDataAdapter; -const missingEdgeConfigEnvVars = !process.env.EDGE_CONFIG || !process.env.EDGE_CONFIG_ITEM_KEY +const missingEdgeConfigEnvVars = !process.env.EXPERIMENTATION_CONFIG || !process.env.EXPERIMENTATION_CONFIG_ITEM_KEY if (!missingEdgeConfigEnvVars) { - const edgeConfigClient = createClient(process.env.EDGE_CONFIG) + const edgeConfigClient = createClient(process.env.EXPERIMENTATION_CONFIG) dataAdapter = new EdgeConfigDataAdapter({ edgeConfigClient, - edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!, + edgeConfigItemKey: process.env.EXPERIMENTATION_CONFIG_ITEM_KEY!, }) } diff --git a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx index 7e050bb66d..bf6cc6d8a0 100644 --- a/edge-middleware/ab-testing-statsig/pages/[bucket].tsx +++ b/edge-middleware/ab-testing-statsig/pages/[bucket].tsx @@ -26,7 +26,7 @@ export const getStaticProps: GetStaticProps = async ({ params }) => { return { props: { bucket: params?.bucket as string, - missingEdgeConfigEnvVars: !process.env.EDGE_CONFIG || !process.env.EDGE_CONFIG_ITEM_KEY, + missingEdgeConfigEnvVars: !process.env.EXPERIMENTATION_CONFIG || !process.env.EXPERIMENTATION_CONFIG_ITEM_KEY, missingConsoleApiEnvVars: !process.env.STATSIG_CONSOLE_API_KEY, }, } @@ -39,7 +39,7 @@ export const getStaticPaths: GetStaticPaths<{ bucket: string }> = async () => { .filter(Boolean) return { - paths: groups.map((group) => ({ params: { bucket: group, missingEdgeConfigEnvVars: !process.env.EDGE_CONFIG || !process.env.EDGE_CONFIG_ITEM_KEY, missingConsoleApiEnvVars: !process.env.STATSIG_CONSOLE_API_KEY } })), + paths: groups.map((group) => ({ params: { bucket: group, missingEdgeConfigEnvVars: !process.env.EXPERIMENTATION_CONFIG || !process.env.EXPERIMENTATION_CONFIG_ITEM_KEY, missingConsoleApiEnvVars: !process.env.STATSIG_CONSOLE_API_KEY } })), fallback: 'blocking', } }