From 55eb9e874affd09f61ac8e64ca60165eb86566d5 Mon Sep 17 00:00:00 2001
From: Blake Gentry <blakesgentry@gmail.com>
Date: Fri, 21 Feb 2025 10:57:07 -0600
Subject: [PATCH 1/4] job factory: realistic sample trace for better storybook
 pages

---
 src/test/factories/job.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/test/factories/job.ts b/src/test/factories/job.ts
index a917a980..9a7fcf38 100644
--- a/src/test/factories/job.ts
+++ b/src/test/factories/job.ts
@@ -7,13 +7,25 @@ import { add, sub } from "date-fns";
 
 class AttemptErrorFactory extends Factory<AttemptError, object> {}
 
+const sampleTrace = `
+worker.go:184: panic: runtime error: invalid memory address or nil pointer dereference
+    panic({0x1035d3c40?, 0x103c0f530?})
+        /opt/homebrew/Cellar/go/1.24.0/libexec/src/runtime/panic.go:787 +0xf0
+    github.com/riverqueue/myapp/worker.(*SyntheticBaseWorker).syntheticSleepOrError(0x0, {0x1036c44c0, 0x14000056380}, {0x1036bb5e0, 0x140000b0320})
+        /Users/username/River/myapp/worker/synthetic_base_job.go:22 +0x50
+    github.com/riverqueue/myapp/worker.(*ChargeCreditCard).Work(0x1400000c090, {0x1036c44c0, 0x14000056380}, 0x1400004a310)
+        /Users/username/River/myapp/worker/charge_credit_card.go:33 +0x19c
+    github.com/riverqueue/river/rivertest.(*wrapperWorkUnit[...]).Work(0x1036c4320, {0x1036c44c0, 0x140000562a0})
+        /Users/username/River/river/rivertest/worker.go:281 +0x60
+`.trim();
+
 export const attemptErrorFactory = AttemptErrorFactory.define(({ params }) => {
   const attempt = params.attempt || 1;
   return {
     at: params.at || sub(new Date(), { seconds: (21 - attempt) * 7.3 }),
     attempt,
     error: "Failed yet again with some Go message",
-    trace: "...",
+    trace: sampleTrace,
   };
 });
 

From 1c2a905df22f5b590894c759c476ca2a0bcac797 Mon Sep 17 00:00:00 2001
From: Blake Gentry <blakesgentry@gmail.com>
Date: Fri, 21 Feb 2025 11:22:47 -0600
Subject: [PATCH 2/4] JobDetails: improve styling of attempt error section +
 traces

---
 src/components/JobAttemptErrors.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/JobAttemptErrors.tsx b/src/components/JobAttemptErrors.tsx
index 528a3d3a..675eb2d1 100644
--- a/src/components/JobAttemptErrors.tsx
+++ b/src/components/JobAttemptErrors.tsx
@@ -15,12 +15,12 @@ export default function JobAttemptErrors({ job }: JobAttemptErrorsProps) {
     : job.errors.slice(-1 * defaultErrorDisplayCount).reverse();
 
   return (
-    <div className="sm:col-span-2">
-      <div className="px-4 lg:px-0">
+    <div className="sm:col-span-2 border-slate-100 dark:border-slate-800 border-t py-6 px-4 sm:px-0">
+      <div className="lg:px-0">
         <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
           Errors
         </dt>
-        <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
+        <dd className="mt-1 text-sm leading-6 text-slate-700 dark:text-slate-300 sm:mt-2">
           {job.errors.length === 0 ? (
             <>No errors</>
           ) : (
@@ -30,17 +30,17 @@ export default function JobAttemptErrors({ job }: JobAttemptErrorsProps) {
                 className="divide-y divide-slate-300 dark:divide-slate-700"
               >
                 {errorsToDisplay.map((error) => (
-                  <li key={error.attempt} className="p-4 sm:p-6">
+                  <li key={error.attempt} className="py-4 sm:py-6">
                     <div className="flex items-start">
                       <p className="font-mono font-medium leading-5 text-slate-900 dark:text-slate-100">
                         {error.attempt.toString()}
                       </p>
-                      <div className="ml-4">
+                      <div className="ml-4 max-w-full overflow-hidden">
                         <h5 className="mb-4 font-mono text-sm font-medium text-slate-900 dark:text-slate-100">
                           {error.error}
                         </h5>
                         {error.trace && (
-                          <pre className="max-h-20 overflow-scroll bg-slate-300/10 text-sm text-slate-700 dark:bg-slate-700/10 dark:text-slate-300">
+                          <pre className="h-min max-h-80 overflow-x-auto bg-slate-300/10 text-sm text-slate-700 dark:bg-slate-700/10 dark:text-slate-300 px-4 py-2 whitespace-pre resize-y">
                             {error.trace}
                           </pre>
                         )}

From bdd5297e568fecb3582ca506938cedd2a6173396 Mon Sep 17 00:00:00 2001
From: Blake Gentry <blakesgentry@gmail.com>
Date: Fri, 21 Feb 2025 11:44:39 -0600
Subject: [PATCH 3/4] JobAttemptErrors: improve display of multiline errors,
 stack trace header

---
 src/components/JobAttemptErrors.tsx | 28 ++++++++++++++++++++++++----
 src/test/factories/job.ts           | 12 +++++++++---
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/JobAttemptErrors.tsx b/src/components/JobAttemptErrors.tsx
index 675eb2d1..3b89affc 100644
--- a/src/components/JobAttemptErrors.tsx
+++ b/src/components/JobAttemptErrors.tsx
@@ -1,6 +1,7 @@
 import { Job } from "@services/jobs";
 import RelativeTimeFormatter from "./RelativeTimeFormatter";
 import { useState } from "react";
+import clsx from "clsx";
 
 type JobAttemptErrorsProps = {
   job: Job;
@@ -14,6 +15,10 @@ export default function JobAttemptErrors({ job }: JobAttemptErrorsProps) {
     ? job.errors.slice().reverse()
     : job.errors.slice(-1 * defaultErrorDisplayCount).reverse();
 
+  const isMultilineError = (error: AttemptError) => {
+    return error.error.includes("\n");
+  };
+
   return (
     <div className="sm:col-span-2 border-slate-100 dark:border-slate-800 border-t py-6 px-4 sm:px-0">
       <div className="lg:px-0">
@@ -36,13 +41,28 @@ export default function JobAttemptErrors({ job }: JobAttemptErrorsProps) {
                         {error.attempt.toString()}
                       </p>
                       <div className="ml-4 max-w-full overflow-hidden">
-                        <h5 className="mb-4 font-mono text-sm font-medium text-slate-900 dark:text-slate-100">
+                        <h5
+                          className={clsx(
+                            "font-mono text-sm font-medium text-slate-900 dark:text-slate-100 mb-2",
+                            isMultilineError(error) &&
+                              "block whitespace-pre-wrap bg-slate-300/20 dark:bg-slate-700/20 px-4 py-2 -mt-2 rounded-md max-h-80 h-min overflow-y-auto resize-y"
+                          )}
+                          aria-description="Error message"
+                        >
                           {error.error}
                         </h5>
                         {error.trace && (
-                          <pre className="h-min max-h-80 overflow-x-auto bg-slate-300/10 text-sm text-slate-700 dark:bg-slate-700/10 dark:text-slate-300 px-4 py-2 whitespace-pre resize-y">
-                            {error.trace}
-                          </pre>
+                          <>
+                            <h6 className="mt-4 mb-2 text-xs font-semibold text-slate-600 dark:text-slate-400">
+                              Stack Trace:
+                            </h6>
+                            <pre
+                              className="h-min max-h-80 overflow-x-auto bg-slate-300/10 text-sm text-slate-700 dark:bg-slate-700/10 dark:text-slate-300 px-4 py-2 whitespace-pre resize-y"
+                              aria-description="Stack trace"
+                            >
+                              {error.trace}
+                            </pre>
+                          </>
                         )}
                         <p className="mt-4 text-sm text-slate-700 dark:text-slate-300">
                           <RelativeTimeFormatter time={error.at} addSuffix />
diff --git a/src/test/factories/job.ts b/src/test/factories/job.ts
index 9a7fcf38..7f4ed828 100644
--- a/src/test/factories/job.ts
+++ b/src/test/factories/job.ts
@@ -106,6 +106,12 @@ class JobFactory extends Factory<Job, object> {
     const erroredAt = add(attemptedAt, {
       seconds: faker.number.float({ min: 0.01, max: 95 }),
     });
+    const multilineError = `
+      This is a long error message that spans multiple lines.
+      It is used to test the ability of the JobAttemptErrors component to display long error messages.
+       
+      It should not show as a single paragraph with no linebreaks.
+    `.trim();
     return this.params({
       attempt: 9,
       attemptedAt,
@@ -123,13 +129,13 @@ class JobFactory extends Factory<Job, object> {
       errors: [
         attemptErrorFactory.build({ attempt: 1 }),
         attemptErrorFactory.build({ attempt: 2 }),
-        attemptErrorFactory.build({ attempt: 3 }),
+        attemptErrorFactory.build({ attempt: 3, error: multilineError }),
         attemptErrorFactory.build({ attempt: 4 }),
         attemptErrorFactory.build({ attempt: 5 }),
         attemptErrorFactory.build({ attempt: 6 }),
         attemptErrorFactory.build({ attempt: 7 }),
-        attemptErrorFactory.build({ attempt: 8 }),
-        attemptErrorFactory.build({ attempt: 9 }),
+        attemptErrorFactory.build({ attempt: 8, error: multilineError }),
+        attemptErrorFactory.build({ attempt: 9, trace: undefined }),
         attemptErrorFactory.build({
           at: erroredAt,
           attempt: 10,

From 4570ebe864ff8db08d6e938cded0cb58206da820 Mon Sep 17 00:00:00 2001
From: Blake Gentry <blakesgentry@gmail.com>
Date: Fri, 21 Feb 2025 13:12:41 -0600
Subject: [PATCH 4/4] JobAttemptError: handle multiline error messages w/
 scrolling

Fixes #290.
---
 CHANGELOG.md                        |   1 +
 src/components/JobAttemptErrors.tsx |   8 +-
 src/components/JobDetail.tsx        | 122 ++++++++++++++--------------
 3 files changed, 65 insertions(+), 66 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7ee229ef..2cac762c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Fix negative wait times in job timeline. [PR #288](https://github.com/riverqueue/riverui/pull/288).
 - Fix occasionally incorrect job durations for errored jobs. [PR #288](https://github.com/riverqueue/riverui/pull/288).
+- Improve display of job attempt errors. [PR #291](https://github.com/riverqueue/riverui/pull/291).
 
 ## [v0.8.0] - 2025-02-10
 
diff --git a/src/components/JobAttemptErrors.tsx b/src/components/JobAttemptErrors.tsx
index 3b89affc..fd91af1b 100644
--- a/src/components/JobAttemptErrors.tsx
+++ b/src/components/JobAttemptErrors.tsx
@@ -1,4 +1,4 @@
-import { Job } from "@services/jobs";
+import { type AttemptError, Job } from "@services/jobs";
 import RelativeTimeFormatter from "./RelativeTimeFormatter";
 import { useState } from "react";
 import clsx from "clsx";
@@ -40,12 +40,12 @@ export default function JobAttemptErrors({ job }: JobAttemptErrorsProps) {
                       <p className="font-mono font-medium leading-5 text-slate-900 dark:text-slate-100">
                         {error.attempt.toString()}
                       </p>
-                      <div className="ml-4 max-w-full overflow-hidden">
+                      <div className="ml-4 flex-1 max-w-full min-w-0">
                         <h5
                           className={clsx(
                             "font-mono text-sm font-medium text-slate-900 dark:text-slate-100 mb-2",
                             isMultilineError(error) &&
-                              "block whitespace-pre-wrap bg-slate-300/20 dark:bg-slate-700/20 px-4 py-2 -mt-2 rounded-md max-h-80 h-min overflow-y-auto resize-y"
+                              "block whitespace-pre bg-slate-300/20 dark:bg-slate-700/20 px-4 py-2 -mt-2 rounded-md max-h-80 h-min overflow-auto resize-y"
                           )}
                           aria-description="Error message"
                         >
@@ -57,7 +57,7 @@ export default function JobAttemptErrors({ job }: JobAttemptErrorsProps) {
                               Stack Trace:
                             </h6>
                             <pre
-                              className="h-min max-h-80 overflow-x-auto bg-slate-300/10 text-sm text-slate-700 dark:bg-slate-700/10 dark:text-slate-300 px-4 py-2 whitespace-pre resize-y"
+                              className="w-full h-min max-h-80 bg-slate-300/10 text-sm text-slate-700 dark:bg-slate-700/10 dark:text-slate-300 px-4 py-2 whitespace-pre overflow-x-auto resize-y"
                               aria-description="Stack trace"
                             >
                               {error.trace}
diff --git a/src/components/JobDetail.tsx b/src/components/JobDetail.tsx
index e7fcff6f..35449597 100644
--- a/src/components/JobDetail.tsx
+++ b/src/components/JobDetail.tsx
@@ -130,7 +130,7 @@ export default function JobDetail({
           </div>
         </header>
 
-        <div className="mx-auto grid gap-8 pb-16 sm:grid-cols-2 sm:px-6 lg:px-8">
+        <div className="mx-auto grid gap-8 pb-16 grid-cols-1 sm:grid-cols-2 sm:px-6 lg:px-8">
           {/* Description list */}
           <div className="">
             <dl className="grid grid-cols-12">
@@ -221,69 +221,67 @@ export default function JobDetail({
 
           <JobTimeline job={job} />
 
-          <div className="sm:order-3 sm:col-span-2">
-            <div>
-              <dl className="grid-cols-1 gap-x-4 border-slate-100 dark:border-slate-800 md:grid md:grid-cols-2 md:border-t">
-                <div className="col-span-1 border-t border-slate-100 px-4 py-6 dark:border-slate-800 sm:px-0 md:border-t-0">
-                  <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
-                    Args
-                  </dt>
-                  <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
-                    <pre className="overflow-scroll bg-slate-300/10 p-4 font-mono text-slate-900 dark:bg-slate-700/10 dark:text-slate-100">
-                      {JSON.stringify(job.args, null, 2)}
-                    </pre>
-                  </dd>
-                </div>
-                <div className="col-span-1 border-t border-slate-100 px-4 py-6 dark:border-slate-800 sm:px-0">
-                  <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
-                    Metadata
-                  </dt>
-                  <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
-                    <pre className="overflow-scroll bg-slate-300/10 p-4 font-mono text-slate-900 dark:bg-slate-700/10 dark:text-slate-100">
-                      {JSON.stringify(job.metadata, null, 2)}
-                    </pre>
-                  </dd>
-                </div>
-                <div className="border-t border-slate-100 px-4 py-6 dark:border-slate-800 sm:col-span-1 sm:px-0">
-                  <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
-                    Attempted By
-                  </dt>
-                  <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
-                    <ul role="list">
-                      {attemptsToDisplay.map((attemptedBy, i) => (
-                        <li
-                          className="font-mono"
-                          key={i}
-                          title={job.errors.at(i)?.at.toISOString()}
-                        >
-                          {attemptedBy}
-                        </li>
-                      ))}
-                    </ul>
-                    {!showAllAttempts && job.attemptedBy.length > 5 && (
-                      <button
-                        type="button"
-                        className="mt-4 text-sm font-semibold text-indigo-600 hover:underline dark:text-slate-100"
-                        onClick={() => setShowAllAttempts(true)}
-                      >
-                        Show all {job.attemptedBy.length} attempts
-                      </button>
-                    )}
-                    {showAllAttempts && (
-                      <button
-                        type="button"
-                        className="mt-4 text-sm font-semibold text-indigo-600 hover:underline dark:text-slate-100"
-                        onClick={() => setShowAllAttempts(false)}
+          <div className="sm:order-3 col-span-1 sm:col-span-2">
+            <dl className="grid-cols-1 gap-x-4 border-slate-100 dark:border-slate-800 md:grid md:grid-cols-2 md:border-t">
+              <div className="col-span-1 border-t border-slate-100 px-4 py-6 dark:border-slate-800 sm:px-0 md:border-t-0">
+                <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
+                  Args
+                </dt>
+                <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
+                  <pre className="overflow-scroll bg-slate-300/10 p-4 font-mono text-slate-900 dark:bg-slate-700/10 dark:text-slate-100">
+                    {JSON.stringify(job.args, null, 2)}
+                  </pre>
+                </dd>
+              </div>
+              <div className="col-span-1 border-t border-slate-100 px-4 py-6 dark:border-slate-800 sm:px-0">
+                <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
+                  Metadata
+                </dt>
+                <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
+                  <pre className="overflow-scroll bg-slate-300/10 p-4 font-mono text-slate-900 dark:bg-slate-700/10 dark:text-slate-100">
+                    {JSON.stringify(job.metadata, null, 2)}
+                  </pre>
+                </dd>
+              </div>
+              <div className="border-t border-slate-100 px-4 py-6 dark:border-slate-800 sm:col-span-1 sm:px-0">
+                <dt className="text-sm font-medium leading-6 text-slate-900 dark:text-slate-100">
+                  Attempted By
+                </dt>
+                <dd className="mt-1 text-sm leading-6  text-slate-700 dark:text-slate-300 sm:mt-2">
+                  <ul role="list">
+                    {attemptsToDisplay.map((attemptedBy, i) => (
+                      <li
+                        className="font-mono"
+                        key={i}
+                        title={job.errors.at(i)?.at.toISOString()}
                       >
-                        Show fewer attempts
-                      </button>
-                    )}
-                  </dd>
-                </div>
+                        {attemptedBy}
+                      </li>
+                    ))}
+                  </ul>
+                  {!showAllAttempts && job.attemptedBy.length > 5 && (
+                    <button
+                      type="button"
+                      className="mt-4 text-sm font-semibold text-indigo-600 hover:underline dark:text-slate-100"
+                      onClick={() => setShowAllAttempts(true)}
+                    >
+                      Show all {job.attemptedBy.length} attempts
+                    </button>
+                  )}
+                  {showAllAttempts && (
+                    <button
+                      type="button"
+                      className="mt-4 text-sm font-semibold text-indigo-600 hover:underline dark:text-slate-100"
+                      onClick={() => setShowAllAttempts(false)}
+                    >
+                      Show fewer attempts
+                    </button>
+                  )}
+                </dd>
+              </div>
 
-                <JobAttemptErrors job={job} />
-              </dl>
-            </div>
+              <JobAttemptErrors job={job} />
+            </dl>
           </div>
         </div>
       </main>