Auto-redirect to legacy.replay.io (#10427)

src/ui/components/DevTools.tsx

@@ -284,7 +284,7 @@ function _DevTools({
   };
 
   if (unsupportedTarget) {
-    return <UnsupportedTarget target={unsupportedTarget} />;
+    return <UnsupportedTarget />;
   }
 
   if (!loadingFinished) {

src/ui/components/UnsupportedTarget.tsx

@@ -1,18 +1,33 @@
-export function UnsupportedTarget({ target }: { target: string }) {
+import { useEffect, useState } from "react";
+
+export function UnsupportedTarget() {
   const url = new URL(window.location.href);
-  url.pathname + url.search;
+  const redirectUrl = `https://legacy.replay.io${url.pathname + url.search}`;
+
+  const [count, setCount] = useState(5);
+
+  useEffect(() => {
+    if (count <= 0) {
+      window.location.href = redirectUrl;
+    } else {
+      const timeout = setTimeout(() => {
+        setCount(count - 1);
+      }, 1000);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [count, redirectUrl]);
 
   return (
     <div className="flex h-full items-center justify-center space-y-4">
       <div>
-        Recordings made with <strong>{target}</strong> must be viewed at{" "}
-        <a
-          className="pointer-hand underline"
-          href={`https://legacy.replay.io${url.pathname + url.search}`}
-        >
+        Redirecting to{" "}
+        <a className="pointer-hand underline" href={redirectUrl}>
           legacy.replay.io
-        </a>
-        .
+        </a>{" "}
+        in {count}...
       </div>
     </div>
   );