From 5a5038724b69c1af42ff0780cf6f2c81534f1a4d Mon Sep 17 00:00:00 2001 From: goenning Date: Mon, 4 Sep 2023 18:28:53 +0100 Subject: [PATCH] ignore trackEvent on server components --- packages/react/CHANGELOG.md | 4 ++++ packages/react/README.md | 6 +++--- packages/react/package.json | 2 +- packages/react/src/index.tsx | 36 ++++++++++++++++++++++++------------ 4 files changed, 32 insertions(+), 16 deletions(-) diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index a240c3d..35146c1 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -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 diff --git a/packages/react/README.md b/packages/react/README.md index 5452b9b..3b5fe49 100644 --- a/packages/react/README.md +++ b/packages/react/README.md @@ -28,7 +28,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) return ( - {children} + {children} ); @@ -48,7 +48,7 @@ import type { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { return ( - + ); @@ -72,7 +72,7 @@ startTransition(() => { hydrateRoot( document, - + , diff --git a/packages/react/package.json b/packages/react/package.json index a427529..e52056a 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -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", diff --git a/packages/react/src/index.tsx b/packages/react/src/index.tsx index 6214ea4..c0df156 100644 --- a/packages/react/src/index.tsx +++ b/packages/react/src/index.tsx @@ -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 ( - - {children} - - ); + return {children}; } 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 ?" - ); - return { trackEvent: () => Promise.resolve() }; + return { + trackEvent: () => { + console.warn( + `Aptabase: useAptabase must be used within AptabaseProvider. Did you forget to wrap your app in ?`, + ); + return Promise.resolve(); + }, + }; } return { trackEvent };