Korbs/Zalvena
1
Fork 0
Code Issues Pull requests Activity

ignore trackEvent on server components

Browse source
This commit is contained in:
goenning 2023-09-04 18:28:53 +01:00
parent ab4656dcb6
commit 5a5038724b
4 changed files with 32 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

4
packages/react/CHANGELOG.md
View file

@ -1,3 +1,7 @@
## 0.1.1
- Remove warning log from Server Side Rendering
## 0.1.0 ## 0.1.0
- Initial version of the React SDK for Aptabase - Initial version of the React SDK for Aptabase

6
packages/react/README.md
View file

@ -28,7 +28,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
return ( return (
<html lang="en"> <html lang="en">
<body> <body>
<AptabaseProvider appKey="A-US-5431775171">{children}</AptabaseProvider> <AptabaseProvider appKey="<YOUR_APP_KEY>">{children}</AptabaseProvider>
</body> </body>
</html> </html>
); );
@ -48,7 +48,7 @@ import type { AppProps } from 'next/app';
export default function App({ Component, pageProps }: AppProps) { export default function App({ Component, pageProps }: AppProps) {
return ( return (
<AptabaseProvider appKey="A-DEV-0000000000"> <AptabaseProvider appKey="<YOUR_APP_KEY>">
<Component {...pageProps} /> <Component {...pageProps} />
</AptabaseProvider> </AptabaseProvider>
); );
@ -72,7 +72,7 @@ startTransition(() => {
hydrateRoot( hydrateRoot(
document, document,
<StrictMode> <StrictMode>
<AptabaseProvider appKey="A-DEV-0000000000"> <AptabaseProvider appKey="<YOUR_APP_KEY>">
<RemixBrowser /> <RemixBrowser />
</AptabaseProvider> </AptabaseProvider>
</StrictMode>, </StrictMode>,

2
packages/react/package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "@aptabase/react", "name": "@aptabase/react",
"version": "0.1.0", "version": "0.1.1",
"type": "module", "type": "module",
"description": "React SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps", "description": "React SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
"main": "./dist/index.cjs", "main": "./dist/index.cjs",

36
packages/react/src/index.tsx
View file

@ -1,7 +1,7 @@
"use client"; 'use client';
import { init, trackEvent, type AptabaseOptions } from "@aptabase/web"; import { init, trackEvent, type AptabaseOptions } from '@aptabase/web';
import { createContext, useContext, useEffect } from "react"; import { createContext, useContext, useEffect } from 'react';
globalThis.__APTABASE_SDK_VERSION__ = `aptabase-react@${process.env.PKG_VERSION}`; globalThis.__APTABASE_SDK_VERSION__ = `aptabase-react@${process.env.PKG_VERSION}`;
@ -27,20 +27,32 @@ export function AptabaseProvider({ appKey, options, children }: Props) {
init(appKey, options); init(appKey, options);
}, [appKey, options]); }, [appKey, options]);
return ( return <AptabaseContext.Provider value={{ appKey, options }}>{children}</AptabaseContext.Provider>;
<AptabaseContext.Provider value={{ appKey, options }}>
{children}
</AptabaseContext.Provider>
);
} }
export function useAptabase(): AptabaseClient { export function useAptabase(): AptabaseClient {
const ctx = useContext(AptabaseContext); const ctx = useContext(AptabaseContext);
if (typeof window !== 'undefined') {
return {
trackEvent: (eventName: string) => {
console.warn(
`Aptabase: trackEvent can only be called from client components. Event '${eventName}' will be ignored.`,
);
return Promise.resolve();
},
};
}
if (!ctx.appKey) { if (!ctx.appKey) {
console.error( return {
"Aptabase: useAptabase must be used within AptabaseProvider. Did you forget to wrap your app in <AptabaseProvider>?" trackEvent: () => {
); console.warn(
return { trackEvent: () => Promise.resolve() }; `Aptabase: useAptabase must be used within AptabaseProvider. Did you forget to wrap your app in <AptabaseProvider>?`,
);
return Promise.resolve();
},
};
} }
return { trackEvent }; return { trackEvent };