feat: RemoteConfig logic (decide replacement)

ee/clickhouse/views/test/__snapshots__/test_clickhouse_experiments.ambr

@@ -1,7 +1,7 @@
 # serializer version: 1
 # name: ClickhouseTestFunnelExperimentResults.test_experiment_flow_with_event_results
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
@@ -108,7 +108,7 @@
 # ---
 # name: ClickhouseTestFunnelExperimentResults.test_experiment_flow_with_event_results_and_events_out_of_time_range_timezones
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
@@ -215,7 +215,7 @@
 # ---
 # name: ClickhouseTestFunnelExperimentResults.test_experiment_flow_with_event_results_for_three_test_variants
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
@@ -322,7 +322,7 @@
 # ---
 # name: ClickhouseTestFunnelExperimentResults.test_experiment_flow_with_event_results_with_hogql_aggregation
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
@@ -429,7 +429,7 @@
 # ---
 # name: ClickhouseTestTrendExperimentResults.test_experiment_flow_with_event_results
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
@@ -592,7 +592,7 @@
 # ---
 # name: ClickhouseTestTrendExperimentResults.test_experiment_flow_with_event_results_for_three_test_variants
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
@@ -694,7 +694,7 @@
 # ---
 # name: ClickhouseTestTrendExperimentResults.test_experiment_flow_with_event_results_out_of_timerange_timezone
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events
@@ -849,7 +849,7 @@
 # ---
 # name: ClickhouseTestTrendExperimentResults.test_experiment_flow_with_event_results_with_hogql_filter
   '''
-  /* user_id:0 celery:posthog.tasks.tasks.sync_insight_caching_state */
+  /* celery:posthog.tasks.tasks.sync_insight_caching_state */
   SELECT team_id,
          date_diff('second', max(timestamp), now()) AS age
   FROM events

frontend/src/lib/components/JSSnippet.tsx

@@ -6,7 +6,7 @@ import { apiHostOrigin } from 'lib/utils/apiHost'
 import posthog from 'posthog-js'
 import { teamLogic } from 'scenes/teamLogic'
 
-export function snippetFunctions(): string {
+function snippetFunctions(arrayJs = '/static/array.js'): string {
     const methods: string[] = []
     const posthogPrototype = Object.getPrototypeOf(posthog)
     for (const key of Object.getOwnPropertyNames(posthogPrototype)) {
@@ -20,23 +20,24 @@ export function snippetFunctions(): string {
     }
     const snippetMethods = methods.join(' ')
 
-    return `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="${snippetMethods}".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);`
+    return `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"${arrayJs}",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="${snippetMethods}".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);`
 }
 
-export function useJsSnippet(indent = 0): string {
+export function useJsSnippet(indent = 0, arrayJs?: string): string {
     const { currentTeam } = useValues(teamLogic)
     const { featureFlags } = useValues(featureFlagLogic)
     const isPersonProfilesDisabled = featureFlags[FEATURE_FLAGS.PERSONLESS_EVENTS_NOT_SUPPORTED]
 
     return [
         '<script>',
-        `    ${snippetFunctions()}`,
-        `    posthog.init('${currentTeam?.api_token}',{api_host:'${apiHostOrigin()}', ${
+        `    ${snippetFunctions(arrayJs)}`,
+        `    posthog.init('${currentTeam?.api_token}', {
+        api_host:'${apiHostOrigin()}'${
             isPersonProfilesDisabled
                 ? ``
-                : `person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well`
+                : `,\n        person_profiles: 'identified_only' // or 'always' to create profiles for anonymous users as well`
         }
-        })`,
+    })`,
         '</script>',
     ]
         .map((x) => ' '.repeat(indent) + x)
@@ -48,3 +49,11 @@ export function JSSnippet(): JSX.Element {
 
     return <CodeSnippet language={Language.HTML}>{snippet}</CodeSnippet>
 }
+
+export function JSSnippetV2(): JSX.Element {
+    const { currentTeam } = useValues(teamLogic)
+
+    const snippet = useJsSnippet(0, `/array/${currentTeam?.api_token}/array.js`)
+
+    return <CodeSnippet language={Language.HTML}>{snippet}</CodeSnippet>
+}

frontend/src/lib/constants.tsx

@@ -230,6 +230,7 @@ export const FEATURE_FLAGS = {
     CUSTOM_CSS_THEMES: 'custom-css-themes', // owner: @daibhin
     EXPERIMENTS_MULTIPLE_METRICS: 'experiments-multiple-metrics', // owner: @jurajmajerik #team-experiments
     WEB_ANALYTICS_WARN_CUSTOM_EVENT_NO_SESSION: 'web-analytics-warn-custom-event-no-session', // owner: @robbie-c #team-web-analytics
+    REMOTE_CONFIG: 'remote-config', // owner: @benjackwhite
     TWO_FACTOR_UI: 'two-factor-ui', // owner: @zach
     SITE_DESTINATIONS: 'site-destinations', // owner: @mariusandra #team-cdp
     SITE_APP_FUNCTIONS: 'site-app-functions', // owner: @mariusandra #team-cdp

frontend/src/scenes/settings/environment/TeamSettings.tsx

@@ -1,11 +1,12 @@
 import { urls } from '@posthog/apps-common'
-import { LemonButton, LemonDialog, LemonInput, LemonLabel, LemonSkeleton } from '@posthog/lemon-ui'
+import { LemonButton, LemonDialog, LemonInput, LemonLabel, LemonSkeleton, LemonTag } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
 import { AuthorizedUrlList } from 'lib/components/AuthorizedUrlList/AuthorizedUrlList'
 import { AuthorizedUrlListType } from 'lib/components/AuthorizedUrlList/authorizedUrlListLogic'
 import { CodeSnippet } from 'lib/components/CodeSnippet'
+import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { JSBookmarklet } from 'lib/components/JSBookmarklet'
-import { JSSnippet } from 'lib/components/JSSnippet'
+import { JSSnippet, JSSnippetV2 } from 'lib/components/JSSnippet'
 import { getPublicSupportSnippet } from 'lib/components/Support/supportLogic'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { IconRefresh } from 'lib/lemon-ui/icons'
@@ -66,6 +67,25 @@ export function WebSnippet(): JSX.Element {
             ) : (
                 <JSSnippet />
             )}
+
+            <FlaggedFeature flag="remote-config">
+                <h3 className="mt-4 flex items-center gap-2">
+                    Web Snippet V2 <LemonTag type="warning">Experimental</LemonTag>
+                </h3>
+                <p>
+                    The V2 version of the snippet is more advanced and includes your project config automatically along
+                    with the PostHog JS code. This generally leads to faster load times and fewer calls needed before
+                    the SDK is fully functional.
+                </p>
+                {currentTeamLoading && !currentTeam ? (
+                    <div className="space-y-4">
+                        <LemonSkeleton className="w-1/2 h-4" />
+                        <LemonSkeleton repeat={3} />
+                    </div>
+                ) : (
+                    <JSSnippetV2 />
+                )}
+            </FlaggedFeature>
         </>
     )
 }

posthog/api/decide.py

@@ -263,10 +263,7 @@ def get_decide(request: HttpRequest):
                 if random() < settings.NEW_CAPTURE_ENDPOINTS_SAMPLING_RATE:
                     response["__preview_ingestion_endpoints"] = True
 
-            if (
-                settings.ELEMENT_CHAIN_AS_STRING_EXCLUDED_TEAMS
-                and str(team.id) not in settings.ELEMENT_CHAIN_AS_STRING_EXCLUDED_TEAMS
-            ):
+            if str(team.id) not in (settings.ELEMENT_CHAIN_AS_STRING_EXCLUDED_TEAMS or []):
                 response["elementsChainAsString"] = True
 
             response["sessionRecording"] = _session_recording_config_response(request, team, token)

posthog/api/remote_config.py

@@ -0,0 +1,38 @@
+from django.http import JsonResponse, Http404, HttpResponse
+from rest_framework.views import APIView
+from posthog.models.remote_config import RemoteConfig
+
+
+class BaseRemoteConfigAPIView(APIView):
+    """
+    Base class for RemoteConfig API views.
+    """
+
+    authentication_classes = []
+    permission_classes = []
+
+    def get_object(self, token: str) -> RemoteConfig:
+        try:
+            return RemoteConfig.objects.get(team__api_token=token)
+        except RemoteConfig.DoesNotExist:
+            raise Http404()
+
+
+class RemoteConfigAPIView(BaseRemoteConfigAPIView):
+    def get(self, request, token: str, *args, **kwargs):
+        resource = self.get_object(token)
+        return JsonResponse(resource.config)
+
+
+class RemoteConfigJSAPIView(BaseRemoteConfigAPIView):
+    def get(self, request, token: str, *args, **kwargs):
+        resource = self.get_object(token)
+        script_content = resource.build_js_config()
+        return HttpResponse(script_content, content_type="application/javascript")
+
+
+class RemoteConfigArrayJSAPIView(BaseRemoteConfigAPIView):
+    def get(self, request, token: str, *args, **kwargs):
+        resource = self.get_object(token)
+        script_content = resource.build_array_js_config()
+        return HttpResponse(script_content, content_type="application/javascript")

posthog/api/site_app.py

@@ -1,5 +1,4 @@
 import json
-
 from django.http import HttpRequest, HttpResponse
 from django.views.decorators.csrf import csrf_exempt
 from rest_framework import status
@@ -8,8 +7,8 @@
 
 from posthog.exceptions import generate_exception_response
 from posthog.logging.timing import timed
+from posthog.plugins.site import get_transpiled_site_source, get_site_config_from_schema
 from posthog.models.hog_functions.hog_function import HogFunction
-from posthog.plugins.site import get_site_config_from_schema, get_transpiled_site_source
 
 
 @csrf_exempt