From 0b6e9446bf5d32af1a13c69e7e78f97c56483acd Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 6 Mar 2024 14:09:39 -0500 Subject: [PATCH 1/2] Don't reset page title after a root-level error --- pages/_app.tsx | 22 ++++++---------------- src/ui/components/Library/Library.tsx | 7 +++++++ 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index 31337d17787..c0dc20e4e11 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,9 +2,8 @@ import { useAuth0 } from "@auth0/auth0-react"; import { Store } from "@reduxjs/toolkit"; import type { AppContext, AppProps } from "next/app"; import NextApp from "next/app"; -import Head from "next/head"; import { useRouter } from "next/router"; -import React, { ReactNode, memo, useEffect, useState } from "react"; +import React, { ReactNode, useEffect, useState } from "react"; import { Provider } from "react-redux"; import "../src/global-css"; import "../src/test-prep"; @@ -85,9 +84,13 @@ function Routing({ Component, pageProps }: AppProps) { return ; } + // Don't set a default title in this component + // Else it overrides the recording title when the root error boundary renders + // See FE-2041 return ( - + + <_App> @@ -100,19 +103,6 @@ function Routing({ Component, pageProps }: AppProps) { ); } -// Ensure this component only renders once even if the parent component re-renders -// Otherwise it can temporarily override titles set by child components, -// causing the document title to flicker. -const MemoizedHeader = memo(function MemoizedHeader() { - return ( - - - - Replay - - ); -}); - const App = ({ apiKey, ...props }: AppProps & AuthProps) => { useAuthTelemetry(); const router = useRouter(); diff --git a/src/ui/components/Library/Library.tsx b/src/ui/components/Library/Library.tsx index 4f70a19a015..d658189c752 100644 --- a/src/ui/components/Library/Library.tsx +++ b/src/ui/components/Library/Library.tsx @@ -1,3 +1,4 @@ +import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect } from "react"; @@ -63,6 +64,9 @@ export default function LibraryLoader() { if (userSettingsLoading || userInfo.loading) { return (
+ + Replay +
); @@ -100,6 +104,9 @@ function Library({ userSettings, userInfo }: { userSettings: UserSettings; userI return (
+ + Replay + From 5bd675bf631ff7ca36c870cd045b53826eb4cda7 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 6 Mar 2024 14:16:01 -0500 Subject: [PATCH 2/2] Conditionally render default title --- pages/_app.tsx | 25 +++++++++++++++++++------ src/ui/components/Library/Library.tsx | 7 ------- 2 files changed, 19 insertions(+), 13 deletions(-) diff --git a/pages/_app.tsx b/pages/_app.tsx index c0dc20e4e11..e9cfe2de195 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,8 +2,9 @@ import { useAuth0 } from "@auth0/auth0-react"; import { Store } from "@reduxjs/toolkit"; import type { AppContext, AppProps } from "next/app"; import NextApp from "next/app"; +import Head from "next/head"; import { useRouter } from "next/router"; -import React, { ReactNode, useEffect, useState } from "react"; +import React, { ReactNode, memo, useEffect, useState } from "react"; import { Provider } from "react-redux"; import "../src/global-css"; import "../src/test-prep"; @@ -23,6 +24,7 @@ import { useLaunchDarkly } from "ui/utils/launchdarkly"; import { InstallRouteListener } from "ui/utils/routeListener"; import tokenManager from "ui/utils/tokenManager"; import "../src/base.css"; +import { getRecordingId } from "shared/utils/recording"; interface AuthProps { apiKey?: string; @@ -84,13 +86,9 @@ function Routing({ Component, pageProps }: AppProps) { return ; } - // Don't set a default title in this component - // Else it overrides the recording title when the root error boundary renders - // See FE-2041 return ( - - + <_App> @@ -103,6 +101,21 @@ function Routing({ Component, pageProps }: AppProps) { ); } + // Don't set a default title within the DevTools app + // Else it overrides the recording title when the root error boundary renders + // See FE-2041 +const MemoizedHeader = memo(function MemoizedHeader() { + const hasRecordingId = getRecordingId() != null; + + return ( + + + + {hasRecordingId || Replay} + + ); +}); + const App = ({ apiKey, ...props }: AppProps & AuthProps) => { useAuthTelemetry(); const router = useRouter(); diff --git a/src/ui/components/Library/Library.tsx b/src/ui/components/Library/Library.tsx index d658189c752..4f70a19a015 100644 --- a/src/ui/components/Library/Library.tsx +++ b/src/ui/components/Library/Library.tsx @@ -1,4 +1,3 @@ -import Head from "next/head"; import { useRouter } from "next/router"; import { useEffect } from "react"; @@ -64,9 +63,6 @@ export default function LibraryLoader() { if (userSettingsLoading || userInfo.loading) { return (
- - Replay -
); @@ -104,9 +100,6 @@ function Library({ userSettings, userInfo }: { userSettings: UserSettings; userI return (
- - Replay -