diff --git a/client/src/components/DatasetInformation/DatasetError.vue b/client/src/components/DatasetInformation/DatasetError.vue
index 5618117ab4d..a35b56a565f 100644
--- a/client/src/components/DatasetInformation/DatasetError.vue
+++ b/client/src/components/DatasetInformation/DatasetError.vue
@@ -21,23 +21,11 @@
                         <b id="dataset-error-tool-id" class="text-break">{{ jobDetails.tool_id }}</b
                         >.
                     </p>
-                    <div v-if="jobDetails.tool_stderr || jobDetails.job_stderr || jobDetails.job_messages">
-                        <h3>Details</h3>
-                    </div>
-                    <div v-if="jobDetails.job_messages" id="dataset-error-job-messages">
-                        <p>Execution resulted in the following messages:</p>
-                        <div v-for="(job_message, index) in jobDetails.job_messages" :key="index">
-                            <pre class="rounded code">{{ job_message["desc"] }}</pre>
-                        </div>
-                    </div>
-                    <div v-if="jobDetails.tool_stderr">
-                        <p>Tool generated the following standard error:</p>
-                        <pre id="dataset-error-tool-stderr" class="rounded code">{{ jobDetails.tool_stderr }}</pre>
-                    </div>
-                    <div v-if="jobDetails.job_stderr">
-                        <p>Galaxy job runner generated the following standard error:</p>
-                        <pre id="dataset-error-job-stderr" class="rounded code">{{ jobDetails.job_stderr }}</pre>
-                    </div>
+                    <DatasetErrorDetails
+                        :tool-stderr="jobDetails.tool_stderr"
+                        :job-stderr="jobDetails.job_stderr"
+                        :job-messages="jobDetails.job_messages"
+                    />
                     <JobProblemProvider :jobid="dataset.creating_job" v-slot="{ result: jobProblems }" @error="onError">
                         <div v-if="jobProblems && (jobProblems.has_duplicate_inputs || jobProblems.has_empty_inputs)">
                             <h3 class="common_problems mt-3">Detected Common Potential Problems</h3>
@@ -97,6 +85,7 @@
 </template>
 
 <script>
+import DatasetErrorDetails from "./DatasetErrorDetails";
 import FormElement from "components/Form/FormElement";
 import { DatasetProvider } from "components/WorkflowInvocationState/providers";
 import { JobDetailsProvider, JobProblemProvider } from "components/providers/JobProvider";
@@ -110,6 +99,7 @@ library.add(faBug);
 export default {
     components: {
         DatasetProvider,
+        DatasetErrorDetails,
         FontAwesomeIcon,
         FormElement,
         JobDetailsProvider,
diff --git a/client/src/components/DatasetInformation/DatasetErrorDetails.vue b/client/src/components/DatasetInformation/DatasetErrorDetails.vue
new file mode 100644
index 00000000000..e2f98519d44
--- /dev/null
+++ b/client/src/components/DatasetInformation/DatasetErrorDetails.vue
@@ -0,0 +1,46 @@
+<template>
+    <div v-if="hasDetails">
+        <h3>Details</h3>
+        <div v-if="hasMessages" id="dataset-error-job-messages">
+            <p>Execution resulted in the following messages:</p>
+            <div v-for="(jobMessage, index) in jobMessages" :key="index">
+                <pre class="rounded code">{{ jobMessage["desc"] }}</pre>
+            </div>
+        </div>
+        <div v-if="toolStderr">
+            <p>Tool generated the following standard error:</p>
+            <pre id="dataset-error-tool-stderr" class="rounded code">{{ toolStderr }}</pre>
+        </div>
+        <div v-if="jobStderr">
+            <p>Galaxy job runner generated the following standard error:</p>
+            <pre id="dataset-error-job-stderr" class="rounded code">{{ jobStderr }}</pre>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        toolStderr: {
+            type: String,
+            default: null,
+        },
+        jobStderr: {
+            type: String,
+            default: null,
+        },
+        jobMessages: {
+            type: Array,
+            default: null,
+        },
+    },
+    computed: {
+        hasDetails() {
+            return this.toolStderr || this.jobStderr || this.hasMessages;
+        },
+        hasMessages() {
+            return this.jobMessages && this.jobMessages.length > 0;
+        },
+    },
+};
+</script>