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

2
packages/react/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@aptabase/react",
"version": "0.1.0",
"version": "0.1.1",
"type": "module",
"description": "React SDK for Aptabase: Open Source, Privacy-First and Simple Analytics for Mobile, Desktop and Web Apps",
"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 { createContext, useContext, useEffect } from "react";
import { init, trackEvent, type AptabaseOptions } from '@aptabase/web';
import { createContext, useContext, useEffect } from 'react';
globalThis.__APTABASE_SDK_VERSION__ = `aptabase-react@${process.env.PKG_VERSION}`;
@ -27,20 +27,32 @@ export function AptabaseProvider({ appKey, options, children }: Props) {
init(appKey, options);
}, [appKey, options]);
return (
<AptabaseContext.Provider value={{ appKey, options }}>
{children}
</AptabaseContext.Provider>
);
return <AptabaseContext.Provider value={{ appKey, options }}>{children}</AptabaseContext.Provider>;
}
export function useAptabase(): AptabaseClient {
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) {
console.error(
"Aptabase: useAptabase must be used within AptabaseProvider. Did you forget to wrap your app in <AptabaseProvider>?"
);
return { trackEvent: () => Promise.resolve() };
return {
trackEvent: () => {
console.warn(
`Aptabase: useAptabase must be used within AptabaseProvider. Did you forget to wrap your app in <AptabaseProvider>?`,
);
return Promise.resolve();
},
};
}
return { trackEvent };