pretty errors can have magic dashboard links

Author: nicktrn

apps/webapp/app/routes/resources.orgs.$organizationSlug.projects.v3.$projectParam.runs.$runParam.spans.$spanParam/route.tsx

@@ -1,4 +1,10 @@
-import { CheckIcon, ClockIcon, CloudArrowDownIcon, QueueListIcon } from "@heroicons/react/20/solid";
+import {
+  CheckIcon,
+  ClockIcon,
+  CloudArrowDownIcon,
+  EnvelopeIcon,
+  QueueListIcon,
+} from "@heroicons/react/20/solid";
 import { Link } from "@remix-run/react";
 import { LoaderFunctionArgs } from "@remix-run/server-runtime";
 import {
@@ -13,6 +19,7 @@ import { typedjson, useTypedFetcher } from "remix-typedjson";
 import { ExitIcon } from "~/assets/icons/ExitIcon";
 import { CodeBlock } from "~/components/code/CodeBlock";
 import { EnvironmentLabel } from "~/components/environments/EnvironmentLabel";
+import { Feedback } from "~/components/Feedback";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
 import { Callout } from "~/components/primitives/Callout";
 import { DateTime, DateTimeAccurate } from "~/components/primitives/DateTime";
@@ -963,11 +970,26 @@ function RunError({ error }: { error: TaskRunError }) {
         <div className="flex flex-col gap-2 rounded-sm border border-rose-500/50 px-3 pb-3 pt-2">
           <Header3 className="text-rose-500">{name}</Header3>
           {enhancedError.message && <Callout variant="error">{enhancedError.message}</Callout>}
-          {enhancedError.link && (
-            <Callout variant="docs" to={enhancedError.link.href}>
-              {enhancedError.link.name}
-            </Callout>
-          )}
+          {enhancedError.link &&
+            (enhancedError.link.magic === "CONTACT_FORM" ? (
+              <Feedback
+                button={
+                  <Button
+                    variant="tertiary/medium"
+                    LeadingIcon={EnvelopeIcon}
+                    leadingIconClassName="text-blue-400"
+                    fullWidth
+                    textAlignLeft
+                  >
+                    {enhancedError.link.name}
+                  </Button>
+                }
+              />
+            ) : (
+              <Callout variant="docs" to={enhancedError.link.href}>
+                {enhancedError.link.name}
+              </Callout>
+            ))}
           {enhancedError.stackTrace && (
             <CodeBlock
               showCopyButton={false}

packages/core/src/v3/errors.ts

@@ -312,8 +312,22 @@ export class GracefulExitTimeoutError extends Error {
   }
 }
 
+type ErrorLink = {
+  name: string;
+  href: string;
+  magic?: "CONTACT_FORM";
+};
+
+type EnhanceError<T extends TaskRunError | ExceptionEventProperties> = T & { link?: ErrorLink };
+
 const prettyInternalErrors: Partial<
-  Record<TaskRunInternalError["code"], { message: string; link?: { name: string; href: string } }>
+  Record<
+    TaskRunInternalError["code"],
+    {
+      message: string;
+      link?: ErrorLink;
+    }
+  >
 > = {
   TASK_PROCESS_OOM_KILLED: {
     message:
@@ -337,14 +351,11 @@ const prettyInternalErrors: Partial<
     link: {
       name: "Contact us",
       href: links.site.contact,
+      magic: "CONTACT_FORM",
     },
   },
 };
 
-type EnhanceError<T extends TaskRunError | ExceptionEventProperties> = T & {
-  link?: { name: string; href: string };
-};
-
 export function taskRunErrorEnhancer(error: TaskRunError): EnhanceError<TaskRunError> {
   switch (error.type) {
     case "BUILT_IN_ERROR": {