Dynamic page title based on error kind (#1034)

Co-authored-by: Shane Osbourne <shane.osbourne8@gmail.com>
duckduckgo · Oct 10, 2024 · 347eb3f · 347eb3f
1 parent 48077a1
commit 347eb3f
Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/packages/special-pages/pages/special-error/app/components/App.jsx b/packages/special-pages/pages/special-error/app/components/App.jsx
@@ -1,9 +1,11 @@
 import { h } from "preact";
-import { useState } from "preact/hooks";
+import { useEffect, useState } from "preact/hooks";
 import { useEnv } from "../../../../shared/components/EnvironmentProvider";
 import { useMessaging } from "../providers/MessagingProvider";
 import { ErrorBoundary } from '../../../../shared/components/ErrorBoundary'
 import { ErrorFallback } from "./ErrorFallback";
+import { useTypedTranslation } from '../types'
+import { useErrorData } from "../providers/SpecialErrorProvider";
 import { Warning } from "./Warning";
 import { AdvancedInfo } from "./AdvancedInfo";
 
@@ -26,6 +28,23 @@ export function SpecialErrorView() {
     )
 }
 
+function PageTitle() {
+    const { kind } = useErrorData()
+    const { t } = useTypedTranslation()
+
+    useEffect(() => {
+        switch(kind) {
+            case 'phishing':
+                document.title = t('phishingPageHeading')
+                break;
+            default:
+                document.title = t('sslPageHeading')
+        }
+    }, [kind, t])
+
+    return null
+}
+
 export function App() {
     const { messaging } = useMessaging()
 
@@ -40,6 +59,7 @@ export function App() {
 
     return (
         <main className={styles.main}>
+            <PageTitle />
             <ErrorBoundary didCatch={didCatch} fallback={<ErrorFallback />}>
                 <SpecialErrorView />
                 <WillThrow/>

diff --git a/packages/special-pages/pages/special-error/src/index.html b/packages/special-pages/pages/special-error/src/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>SSL Error Page</title>
+    <title>Error</title>
     <meta name="robots" content="noindex,nofollow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <script src="js/inline.js"></script>