GH-2162: Add more detailed logging to upload errors.

jena-fuseki2/jena-fuseki-ui/src/views/dataset/Upload.vue

@@ -182,6 +182,9 @@
                       {{ data.item.response.tripleCount }}
                     </span>
                     <span v-else class="small">0</span>
+                    <div v-if="data.item.error" class="small text-danger upload-error-message">
+                      {{ getUploadErrorMessage(data.item) }}
+                    </div>
                   </template>
                   <template #cell(actions)="data">
                     <button
@@ -368,7 +371,11 @@ export default {
     },
     upload: {
       handler () {
-        this.validateFiles()
+        if (this.upload.files && this.upload.files.length > 0) {
+          this.fileUploadClasses = ['btn', 'btn-success', 'is-valid']
+        } else if (!this.fileUploadClasses.includes('is-invalid')) {
+          this.fileUploadClasses = ['btn', 'btn-success']
+        }
       },
       deep: true,
       immediate: false
@@ -443,11 +450,34 @@ export default {
     },
     async handleUploadWithErrorHandling (file, component) {
       try {
-        return component
-          .uploadHtml5(file)
-          .catch(error => displayError(this, error))
-      } catch (error) {
-        displayError(this, error)
+        return await component.uploadHtml5(file)
+      } catch {
+        const uploadedFile = component.get(file) || file
+        displayError(this, this.getUploadErrorMessage(uploadedFile))
+      }
+    },
+    // Prefer the server's detailed error response body over the generic file.error code.
+    getUploadErrorMessage (file) {
+      const response = file && file.response
+      if (typeof response === 'string' && response.trim() !== '') {
+        return response.trim()
+      }
+      if (response && typeof response === 'object' && response.message) {
+        return response.message
+      }
+      switch (file && file.error) {
+        case 'network':
+          return 'Upload failed: could not reach the server. Please check your connection and try again.'
+        case 'timeout':
+          return 'Upload failed: the request timed out.'
+        case 'abort':
+          return 'Upload was cancelled.'
+        case 'denied':
+          return 'Upload was rejected by the server.'
+        case 'server':
+          return 'Upload failed: the server encountered an error while processing the file.'
+        default:
+          return 'Upload failed.'
       }
     }
   }

jena-fuseki2/jena-fuseki-ui/tests/unit/views/dataset/upload.vue.spec.js

@@ -0,0 +1,115 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { mount } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import Upload from '@/views/dataset/Upload.vue'
+import { describe, it, expect, vi } from 'vitest'
+
+const mountFunction = (options) => {
+  return mount(Upload, Object.assign(options || {}, {
+    shallow: true,
+    global: {
+      mocks: {
+        $route: { params: { datasetName: 'test-ds' } },
+        $fusekiService: {
+          getFusekiUrl: (path) => `http://localhost:3030${path}`,
+          getDatasetServices: vi.fn().mockResolvedValue({ 'gsp-rw': { 'srv.endpoints': ['data'] } })
+        }
+      }
+    }
+  }))
+}
+
+describe('Upload.vue', () => {
+  describe('getFileStatus', () => {
+    it('returns "danger" for a file with an error', () => {
+      const wrapper = mountFunction()
+      expect(wrapper.vm.getFileStatus({ error: 'some error', success: false, active: false })).toBe('danger')
+    })
+
+    it('returns "success" for a successfully uploaded file', () => {
+      const wrapper = mountFunction()
+      expect(wrapper.vm.getFileStatus({ error: null, success: true, active: false })).toBe('success')
+    })
+
+    it('returns "warning" for an active upload', () => {
+      const wrapper = mountFunction()
+      expect(wrapper.vm.getFileStatus({ error: null, success: false, active: true })).toBe('warning')
+    })
+
+    it('returns empty string for a file with no status', () => {
+      const wrapper = mountFunction()
+      expect(wrapper.vm.getFileStatus({ error: null, success: false, active: false })).toBe('')
+    })
+  })
+
+  describe('getUploadErrorMessage', () => {
+    it('returns the server\'s detailed plain-text error response, when present', () => {
+      const wrapper = mountFunction()
+      const file = { error: 'denied', response: '  Parse Error: [line: 3, col: 5] Triples not terminated by \'.\'  ' }
+      expect(wrapper.vm.getUploadErrorMessage(file)).toBe('Parse Error: [line: 3, col: 5] Triples not terminated by \'.\'')
+    })
+
+    it('returns the message field from a JSON error response, when present', () => {
+      const wrapper = mountFunction()
+      const file = { error: 'denied', response: { message: 'Unsupported Media Type' } }
+      expect(wrapper.vm.getUploadErrorMessage(file)).toBe('Unsupported Media Type')
+    })
+
+    it('falls back to a readable message for a generic "server" error code', () => {
+      const wrapper = mountFunction()
+      const file = { error: 'server', response: {} }
+      expect(wrapper.vm.getUploadErrorMessage(file)).toBe('Upload failed: the server encountered an error while processing the file.')
+    })
+
+    it('falls back to a readable message for a generic "network" error code', () => {
+      const wrapper = mountFunction()
+      const file = { error: 'network', response: {} }
+      expect(wrapper.vm.getUploadErrorMessage(file)).toBe('Upload failed: could not reach the server. Please check your connection and try again.')
+    })
+
+    it('returns a generic message when there is no file', () => {
+      const wrapper = mountFunction()
+      expect(wrapper.vm.getUploadErrorMessage(null)).toBe('Upload failed.')
+    })
+  })
+
+  describe('file list validation', () => {
+    it('does not flag the form invalid just from removing the last (failed) file', async () => {
+      const wrapper = mountFunction()
+      await nextTick()
+
+      wrapper.vm.upload.files = [{ id: '1', name: 'broken.ttl', error: null, success: false, active: false, response: {} }]
+      await nextTick()
+      expect(wrapper.vm.fileUploadClasses).toEqual(['btn', 'btn-success', 'is-valid'])
+
+      wrapper.vm.upload.files = [{ id: '1', name: 'broken.ttl', error: 'denied', success: false, active: false, response: 'Parse Error' }]
+      await nextTick()
+      expect(wrapper.vm.fileUploadClasses).toEqual(['btn', 'btn-success', 'is-valid'])
+
+      wrapper.vm.upload.files = []
+      await nextTick()
+      expect(wrapper.vm.fileUploadClasses).toEqual(['btn', 'btn-success'])
+    })
+
+    it('still flags the form invalid on an explicit submit attempt with no files', () => {
+      const wrapper = mountFunction()
+      expect(wrapper.vm.validateFiles()).toBe(false)
+      expect(wrapper.vm.fileUploadClasses).toEqual(['btn', 'btn-success', 'is-invalid'])
+    })
+  })
+})