Remove {@html} from error messages

src/components/ErrorMessage.svelte

@@ -11,6 +11,9 @@
   export let description: string;
   export let error: ErrorParam = undefined;
   export let icon: ComponentProps<IconLarge>["name"] = "alert";
+  // An optional seed address shown below the description, e.g. the node the
+  // failed request targeted. Rendered as plain text, never as markup.
+  export let seed: string | undefined = undefined;
 </script>
 
 <style>
@@ -27,8 +30,9 @@
   .label {
     font: var(--txt-body-m-regular);
     max-width: 36rem;
+    white-space: pre-line;
   }
-  .error :global(code) {
+  .error code {
     font: var(--txt-code-regular);
     background-color: var(--color-surface-mid);
     border-radius: var(--border-radius-sm);
@@ -54,8 +58,10 @@
   <div class="txt-heading-m">
     {title}
   </div>
-  <!-- description is rendered as HTML; callers must escape any interpolated user input. -->
-  <div class="label">{@html description}</div>
+  <div class="label">{description}</div>
+  {#if seed}
+    <div class="label"><code>{seed}</code></div>
+  {/if}
   {#if error}
     <div class="help">
       If you need help resolving this issue, copy the error message

src/modals/ErrorModal.svelte

@@ -16,7 +16,9 @@
   <IconLarge name="alert" slot="icon" />
 
   <div slot="subtitle">
-    {@html subtitle.join("<br />")}
+    {#each subtitle as line, i}
+      {#if i > 0}<br />{/if}{line}
+    {/each}
 
     <br />
     <br />

src/views/error/View.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
+  import type { BaseUrl } from "@http-client";
   import type { ComponentProps } from "svelte";
   import type IconLarge from "@app/components/IconLarge.svelte";
   import type { ErrorParam } from "@app/lib/router/definitions";
 
+  import { baseUrlToString } from "@app/lib/utils";
   import Layout from "@app/App/Layout.svelte";
   import ErrorMessage from "@app/components/ErrorMessage.svelte";
 
@@ -10,6 +12,7 @@
   export let title: string;
   export let description: string;
   export let error: ErrorParam = undefined;
+  export let baseUrl: BaseUrl | undefined = undefined;
 </script>
 
 <style>
@@ -35,7 +38,12 @@
 <Layout>
   <div class="wrapper">
     <div class="container">
-      <ErrorMessage {icon} {title} {description} {error} />
+      <ErrorMessage
+        {icon}
+        {title}
+        {description}
+        {error}
+        seed={baseUrl ? baseUrlToString(baseUrl) : undefined} />
     </div>
   </div>
 </Layout>

src/views/nodes/error.ts

@@ -1,18 +1,12 @@
 import type { BaseUrl } from "@http-client";
 import type { ErrorRoute, NotFoundRoute } from "@app/lib/router/definitions";
 
-import escape from "lodash/escape";
-
 import { ResponseParseError, ResponseError } from "@http-client/lib/fetcher";
-import { baseUrlToString } from "@app/lib/utils";
 
 export function handleError(
   error: Error | ResponseParseError | ResponseError,
   baseUrl: BaseUrl,
 ): NotFoundRoute | ErrorRoute {
-  const url = baseUrlToString(baseUrl);
-  const safeUrl = escape(url);
-
   if (error instanceof ResponseParseError) {
     return {
       resource: "error",
@@ -29,7 +23,8 @@ export function handleError(
       params: {
         error,
         title: "Could not load this node",
-        description: `You’re trying to access a node that is not reachable, make sure the address <a href="${safeUrl}">${safeUrl}</a> is correct and the right ports are exposed if its your node.`,
+        description:
+          "You’re trying to access a node that is not reachable. Make sure the address below is correct and the right ports are exposed if it’s your node.",
         baseUrl,
       },
     };

src/views/repos/Cob/Revision.svelte

@@ -464,9 +464,8 @@
           style:border-radius="var(--border-radius-md)">
           <ErrorMessage
             title="Failed to load diff for this revision"
-            description="Make sure you are able to connect to the seed <code>{utils.baseUrlToString(
-              api.baseUrl,
-            )}</code>"
+            description="Make sure you are able to connect to the seed:"
+            seed={utils.baseUrlToString(api.baseUrl)}
             {error} />
         </div>
       {/if}

src/views/repos/History.svelte

@@ -172,9 +172,8 @@
     <div class="message">
       <ErrorMessage
         title="Couldn’t load commits"
-        description="Make sure you are able to connect to the seed <code>{baseUrlToString(
-          api.baseUrl,
-        )}</code>"
+        description="Make sure you are able to connect to the seed:"
+        seed={baseUrlToString(api.baseUrl)}
         {error} />
     </div>
   {/if}

src/views/repos/Issues.svelte

@@ -160,9 +160,8 @@
   {#if error}
     <ErrorMessage
       title="Couldn’t load issues"
-      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(
-        api.baseUrl,
-      )}</code>"
+      description="Please make sure you are able to connect to the seed:"
+      seed={baseUrlToString(api.baseUrl)}
       {error} />
   {/if}
 

src/views/repos/Patches.svelte

@@ -199,9 +199,8 @@
   {#if error}
     <ErrorMessage
       title="Couldn’t load patches"
-      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(
-        api.baseUrl,
-      )}</code>"
+      description="Please make sure you are able to connect to the seed:"
+      seed={baseUrlToString(api.baseUrl)}
       {error} />
   {/if}
 

src/views/repos/Releases.svelte

@@ -194,9 +194,8 @@
   {#if error}
     <ErrorMessage
       title="Couldn't load releases"
-      description="Please make sure you are able to connect to the seed <code>{baseUrlToString(
-        api.baseUrl,
-      )}</code>"
+      description="Please make sure you are able to connect to the seed:"
+      seed={baseUrlToString(api.baseUrl)}
       {error} />
   {/if}
 

src/views/repos/error.ts

@@ -1,14 +1,12 @@
 import type { ErrorRoute, NotFoundRoute } from "@app/lib/router/definitions";
 import type { RepoRoute } from "@app/views/repos/router";
 
-import { baseUrlToString } from "@app/lib/utils";
 import { ResponseParseError, ResponseError } from "@http-client/lib/fetcher";
 
 export function handleError(
   error: Error | ResponseParseError | ResponseError,
   route: RepoRoute,
 ): NotFoundRoute | ErrorRoute {
-  const url = baseUrlToString(route.node);
   if (error instanceof ResponseError && error.status === 404) {
     let subject;
 
@@ -36,7 +34,7 @@ export function handleError(
       params: {
         error,
         title: "Could not load this repository",
-        description: `Make sure you are able to connect to the seed <a href="${url}">${url}</a>.`,
+        description: "Make sure you are able to connect to the seed:",
         baseUrl: route.node,
       },
     };