From 4c967d4bc1abd7e62137b952eb598c75eb0c3e4c Mon Sep 17 00:00:00 2001 From: nick-delirium Date: Mon, 17 Mar 2025 13:42:30 +0100 Subject: [PATCH] ui: update tracker import examples --- .../Client/Integrations/ProfilerDoc/ProfilerDoc.tsx | 10 ++++++---- .../Integrations/Tracker/AssistDoc/AssistNpm.tsx | 10 ++++++---- .../Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx | 9 +++++---- .../Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx | 9 +++++---- .../Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx | 9 +++++---- .../Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx | 4 ++-- .../Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx | 9 +++++---- .../Client/Integrations/Tracker/VueDoc/VueDoc.tsx | 9 +++++---- .../Integrations/Tracker/ZustandDoc/ZustandDoc.tsx | 10 +++++----- .../OnboardingTabs/InstallDocs/InstallDocs.js | 9 +++++---- .../TrackingCodeModal/InstallDocs/InstallDocs.js | 9 +++++---- 11 files changed, 54 insertions(+), 43 deletions(-) diff --git a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.tsx b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.tsx index eb6013a7c..6b0f5b930 100644 --- a/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.tsx +++ b/frontend/app/components/Client/Integrations/ProfilerDoc/ProfilerDoc.tsx @@ -16,10 +16,10 @@ function ProfilerDoc() { ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey; - const usage = `import OpenReplay from '@openreplay/tracker'; + const usage = `import { tracker } from '@openreplay/tracker'; import trackerProfiler from '@openreplay/tracker-profiler'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.start() @@ -29,10 +29,12 @@ export const profiler = tracker.use(trackerProfiler()); const fn = profiler('call_name')(() => { //... }, thisArg); // thisArg is optional`; - const usageCjs = `import OpenReplay from '@openreplay/tracker/cjs'; + const usageCjs = `import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope + import trackerProfiler from '@openreplay/tracker-profiler/cjs'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); //... diff --git a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx index 30893ba95..a333441b9 100644 --- a/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/AssistDoc/AssistNpm.tsx @@ -7,17 +7,19 @@ import { useTranslation } from 'react-i18next'; function AssistNpm(props) { const { t } = useTranslation(); - const usage = `import OpenReplay from '@openreplay/tracker'; + const usage = `import { tracker } from '@openreplay/tracker'; import trackerAssist from '@openreplay/tracker-assist'; -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${props.projectKey}', }); tracker.start() tracker.use(trackerAssist(options)); // check the list of available options below`; - const usageCjs = `import OpenReplay from '@openreplay/tracker/cjs'; + const usageCjs = `import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope import trackerAssist from '@openreplay/tracker-assist/cjs'; -const tracker = new OpenReplay({ + +tracker.configure({ projectKey: '${props.projectKey}' }); const trackerAssist = tracker.use(trackerAssist(options)); // check the list of available options below diff --git a/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx index dd704b0bf..85e6d68c0 100644 --- a/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/GraphQLDoc/GraphQLDoc.tsx @@ -14,19 +14,20 @@ function GraphQLDoc() { const projectKey = siteId ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey; - const usage = `import OpenReplay from '@openreplay/tracker'; + const usage = `import { tracker } from '@openreplay/tracker'; import trackerGraphQL from '@openreplay/tracker-graphql'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.start() //... export const recordGraphQL = tracker.use(trackerGraphQL());`; - const usageCjs = `import OpenReplay from '@openreplay/tracker/cjs'; + const usageCjs = `import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope import trackerGraphQL from '@openreplay/tracker-graphql/cjs'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); //... diff --git a/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx index e31a25b86..688f97824 100644 --- a/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/MobxDoc/MobxDoc.tsx @@ -15,20 +15,21 @@ function MobxDoc() { ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey; - const mobxUsage = `import OpenReplay from '@openreplay/tracker'; + const mobxUsage = `import { tracker } from '@openreplay/tracker'; import trackerMobX from '@openreplay/tracker-mobx'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.use(trackerMobX()); // check list of available options below tracker.start(); `; - const mobxUsageCjs = `import OpenReplay from '@openreplay/tracker/cjs'; + const mobxUsageCjs = `import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope import trackerMobX from '@openreplay/tracker-mobx/cjs'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.use(trackerMobX()); // check list of available options below diff --git a/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx index d1401899f..8e52cdfa2 100644 --- a/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/NgRxDoc/NgRxDoc.tsx @@ -16,10 +16,10 @@ function NgRxDoc() { : sites[0]?.projectKey; const usage = `import { StoreModule } from '@ngrx/store'; import { reducers } from './reducers'; -import OpenReplay from '@openreplay/tracker'; +import { tracker } from '@openreplay/tracker'; import trackerNgRx from '@openreplay/tracker-ngrx'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.start() @@ -32,10 +32,11 @@ const metaReducers = [tracker.use(trackerNgRx())]; // check list of ava export class AppModule {}`; const usageCjs = `import { StoreModule } from '@ngrx/store'; import { reducers } from './reducers'; -import OpenReplay from '@openreplay/tracker/cjs'; +import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope import trackerNgRx from '@openreplay/tracker-ngrx/cjs'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); //... diff --git a/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx index 8c18077f2..c9ac2e9f9 100644 --- a/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/PiniaDoc/PiniaDoc.tsx @@ -17,10 +17,10 @@ function PiniaDoc() { ? sites.find((site) => site.id === siteId)?.projectKey : sites[0]?.projectKey; const usage = `import Vuex from 'vuex' -import OpenReplay from '@openreplay/tracker'; +import { tracker } from '@openreplay/tracker'; import trackerVuex from '@openreplay/tracker-vuex'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.start() diff --git a/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx index 35c2ad37a..216bf6605 100644 --- a/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/ReduxDoc/ReduxDoc.tsx @@ -16,10 +16,10 @@ function ReduxDoc() { : sites[0]?.projectKey; const usage = `import { applyMiddleware, createStore } from 'redux'; -import OpenReplay from '@openreplay/tracker'; +import { tracker } from '@openreplay/tracker'; import trackerRedux from '@openreplay/tracker-redux'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.start() @@ -29,10 +29,11 @@ const store = createStore( applyMiddleware(tracker.use(trackerRedux())) // check list of available options below );`; const usageCjs = `import { applyMiddleware, createStore } from 'redux'; -import OpenReplay from '@openreplay/tracker/cjs'; +import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope import trackerRedux from '@openreplay/tracker-redux/cjs'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); //... diff --git a/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.tsx index b32e9f1f4..133f17c89 100644 --- a/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/VueDoc/VueDoc.tsx @@ -16,10 +16,10 @@ function VueDoc() { : sites[0]?.projectKey; const usage = `import Vuex from 'vuex' -import OpenReplay from '@openreplay/tracker'; +import { tracker } from '@openreplay/tracker'; import trackerVuex from '@openreplay/tracker-vuex'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); tracker.start() @@ -29,10 +29,11 @@ const store = new Vuex.Store({ plugins: [tracker.use(trackerVuex())] // check list of available options below });`; const usageCjs = `import Vuex from 'vuex' -import OpenReplay from '@openreplay/tracker/cjs'; +import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope import trackerVuex from '@openreplay/tracker-vuex/cjs'; //... -const tracker = new OpenReplay({ +tracker.configure({ projectKey: '${projectKey}' }); //... diff --git a/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.tsx b/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.tsx index b25f40dd6..75e51afaf 100644 --- a/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.tsx +++ b/frontend/app/components/Client/Integrations/Tracker/ZustandDoc/ZustandDoc.tsx @@ -16,11 +16,10 @@ function ZustandDoc(props) { : sites[0]?.projectKey; const usage = `import create from "zustand"; -import Tracker from '@openreplay/tracker'; +import { tracker } from '@openreplay/tracker'; import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand'; - -const tracker = new Tracker({ +tracker.configure({ projectKey: ${projectKey}, }); @@ -43,11 +42,12 @@ const useBearStore = create( ) `; const usageCjs = `import create from "zustand"; -import Tracker from '@openreplay/tracker/cjs'; +import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope import trackerZustand, { StateLogger } from '@openreplay/tracker-zustand/cjs'; -const tracker = new Tracker({ +tracker.configure({ projectKey: ${projectKey}, }); diff --git a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js index c9dc3c245..724d95eea 100644 --- a/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js +++ b/frontend/app/components/Onboarding/components/OnboardingTabs/InstallDocs/InstallDocs.js @@ -7,16 +7,17 @@ import stl from './installDocs.module.css'; import { useTranslation } from 'react-i18next'; const installationCommand = 'npm i @openreplay/tracker'; -const usageCode = `import Tracker from '@openreplay/tracker'; +const usageCode = `import { tracker } from '@openreplay/tracker'; -const tracker = new Tracker({ +tracker.configure({ projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest", }); tracker.start()`; -const usageCodeSST = `import Tracker from '@openreplay/tracker/cjs'; +const usageCodeSST = `import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope -const tracker = new Tracker({ +tracker.configure({ projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest", }); diff --git a/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js b/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js index b9f400d4e..526382406 100644 --- a/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js +++ b/frontend/app/components/shared/TrackingCodeModal/InstallDocs/InstallDocs.js @@ -5,17 +5,18 @@ import stl from './installDocs.module.css'; import { useTranslation } from 'react-i18next'; const installationCommand = 'npm i @openreplay/tracker'; -const usageCode = `import Tracker from '@openreplay/tracker'; +const usageCode = `import { tracker } from '@openreplay/tracker'; -const tracker = new Tracker({ +tracker.configure({ projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest", }); tracker.start()`; -const usageCodeSST = `import Tracker from '@openreplay/tracker/cjs'; +const usageCodeSST = `import { tracker } from '@openreplay/tracker/cjs'; +// alternatively you can use dynamic import without /cjs suffix to prevent issues with window scope -const tracker = new Tracker({ +tracker.configure({ projectKey: "PROJECT_KEY", ingestPoint: "https://${window.location.hostname}/ingest", });