From 03c2b1003e48fd8186e574958ff13dcab2d163e3 Mon Sep 17 00:00:00 2001 From: Ben White Date: Tue, 23 Apr 2024 15:05:02 +0200 Subject: [PATCH 01/23] fixes --- playground/nextjs/package.json | 2 + playground/nextjs/pages/_app.tsx | 13 +- playground/nextjs/pages/_document.tsx | 8 +- playground/nextjs/pages/animations.tsx | 57 -------- playground/nextjs/pages/api/auth/login.ts | 16 ++ playground/nextjs/pages/iframe.tsx | 41 ------ playground/nextjs/pages/index.tsx | 138 ++++++++---------- playground/nextjs/pages/long.tsx | 34 ----- playground/nextjs/pages/longmain.tsx | 70 --------- playground/nextjs/pages/media.tsx | 29 ---- .../pages/replay-examples/animations.tsx | 46 ++++++ .../pages/{ => replay-examples}/canvas.tsx | 13 +- .../nextjs/pages/replay-examples/iframe.tsx | 34 +++++ .../nextjs/pages/replay-examples/long.tsx | 27 ++++ .../nextjs/pages/replay-examples/media.tsx | 24 +++ playground/nextjs/pnpm-lock.yaml | 17 ++- playground/nextjs/src/AuthModal.tsx | 94 ++++++++++++ playground/nextjs/src/Header.tsx | 44 ++++++ playground/nextjs/src/auth.ts | 60 ++++++++ playground/nextjs/src/posthog.ts | 2 +- 20 files changed, 444 insertions(+), 325 deletions(-) delete mode 100644 playground/nextjs/pages/animations.tsx create mode 100644 playground/nextjs/pages/api/auth/login.ts delete mode 100644 playground/nextjs/pages/iframe.tsx delete mode 100644 playground/nextjs/pages/long.tsx delete mode 100644 playground/nextjs/pages/longmain.tsx delete mode 100644 playground/nextjs/pages/media.tsx create mode 100644 playground/nextjs/pages/replay-examples/animations.tsx rename playground/nextjs/pages/{ => replay-examples}/canvas.tsx (91%) create mode 100644 playground/nextjs/pages/replay-examples/iframe.tsx create mode 100644 playground/nextjs/pages/replay-examples/long.tsx create mode 100644 playground/nextjs/pages/replay-examples/media.tsx create mode 100644 playground/nextjs/src/AuthModal.tsx create mode 100644 playground/nextjs/src/Header.tsx create mode 100644 playground/nextjs/src/auth.ts diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json index 9182d4fe2..700a2cddc 100644 --- a/playground/nextjs/package.json +++ b/playground/nextjs/package.json @@ -15,6 +15,7 @@ "@types/node": "18.13.0", "@types/react": "18.0.28", "@types/react-dom": "18.0.10", + "cookie": "^0.6.0", "eslint": "8.34.0", "eslint-config-next": "13.1.6", "next": "13.5.6", @@ -24,6 +25,7 @@ "typescript": "4.9.5" }, "devDependencies": { + "@types/cookie": "^0.6.0", "autoprefixer": "^10.4.17", "postcss": "^8.4.35", "tailwindcss": "^3.4.1" diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx index 9c4a0e66b..15fa1755f 100644 --- a/playground/nextjs/pages/_app.tsx +++ b/playground/nextjs/pages/_app.tsx @@ -8,6 +8,8 @@ import posthog from 'posthog-js' import { PostHogProvider } from 'posthog-js/react' import { CookieBanner } from '@/src/CookieBanner' import '@/src/posthog' +import Head from 'next/head' +import { PageHeader } from '@/src/Header' export default function App({ Component, pageProps }: AppProps) { const router = useRouter() @@ -24,9 +26,16 @@ export default function App({ Component, pageProps }: AppProps) { return ( - + + PostHog + + - +
+ + + +
) } diff --git a/playground/nextjs/pages/_document.tsx b/playground/nextjs/pages/_document.tsx index 4984c17fa..04886f20f 100644 --- a/playground/nextjs/pages/_document.tsx +++ b/playground/nextjs/pages/_document.tsx @@ -4,11 +4,15 @@ import React from 'react' export default function Document() { return ( - + + PostHog + + +
- + ) } diff --git a/playground/nextjs/pages/animations.tsx b/playground/nextjs/pages/animations.tsx deleted file mode 100644 index 73ca0d043..000000000 --- a/playground/nextjs/pages/animations.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import Head from 'next/head' -import { useFeatureFlagEnabled, usePostHog } from 'posthog-js/react' -import { useEffect, useState } from 'react' -import { Player, Controls } from '@lottiefiles/react-lottie-player' - -export default function Home() { - const posthog = usePostHog() - - return ( - <> - - PostHog - - -
-

Animations

-

Useful testing for Replay handling heavy animations

- - - -
- - ) -} diff --git a/playground/nextjs/pages/api/auth/login.ts b/playground/nextjs/pages/api/auth/login.ts new file mode 100644 index 000000000..2c8ecdf9f --- /dev/null +++ b/playground/nextjs/pages/api/auth/login.ts @@ -0,0 +1,16 @@ +import { serialize } from 'cookie' +import type { NextApiRequest, NextApiResponse } from 'next' + +export default function handler(req: NextApiRequest, res: NextApiResponse) { + const sessionData = req.body + const encryptedSessionData = JSON.stringify(sessionData) + + const cookie = serialize('session', encryptedSessionData, { + httpOnly: false, + secure: false, + maxAge: 60 * 60 * 24 * 7, // One week + path: '/', + }) + res.setHeader('Set-Cookie', cookie) + res.status(200).json({ message: 'Successfully set cookie!' }) +} diff --git a/playground/nextjs/pages/iframe.tsx b/playground/nextjs/pages/iframe.tsx deleted file mode 100644 index f96c427b9..000000000 --- a/playground/nextjs/pages/iframe.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import Head from 'next/head' -import { usePostHog } from 'posthog-js/react' -import { useEffect, useState } from 'react' - -export default function Home() { - const posthog = usePostHog() - - const [otherHost, setOtherHost] = useState('') - - useEffect(() => { - setOtherHost(window.location.origin.includes('other-localhost') ? 'localhost' : 'other-localhost') - }) - - return ( - <> - - PostHog - - -
-

Iframes

- -

Cross origin iframe

-

- This loads the same page but from other-localhost which you need to add to your hosts file. -

- - {otherHost && ( -