Improves troubleshooting messages

laravel · Sep 3, 2020 · c27cbed · c27cbed
1 parent 8c0695f
commit c27cbed
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/public/app.css b/public/app.css
diff --git a/public/app.js b/public/app.js
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/app.js": "/app.js?id=fbc4701521cbabffd708",
-    "/app.css": "/app.css?id=0cb44721a8285bf23fc2"
+    "/app.js": "/app.js?id=d16d069303c609f663ee",
+    "/app.css": "/app.css?id=b86433565210152cce12"
 }
diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue
@@ -105,13 +105,16 @@
                             </div>
                         </div>
 
-                        <div class="mt-3 max-w-2xl text-sm text-gray-700">
-                            It looks like there was an error. Please check your application logs.
+                        <div class="mt-3 text-sm text-gray-700">
+                            <slot name="troubleshooting"> </slot>
                         </div>
                     </div>
                 </template>
 
-                <div class="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-lg">
+                <div
+                    v-if="!troubleshooting"
+                    class="align-middle min-w-full overflow-x-auto shadow overflow-hidden sm:rounded-lg"
+                >
                     <div class="bg-white min-w-full" v-if="entries.length > 0">
                         <div
                             class="px-6 py-3 border-b border-gray-200 bg-gray-50 text-left text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider"
@@ -161,6 +164,7 @@ export default {
         return {
             entries: [],
             errors: [],
+            troubleshooting: false,
             minutesAgo: null,
             searching: true,
             cursor: null,
@@ -271,6 +275,8 @@ export default {
                 .catch(({ response }) => {
                     this.searching = false;
                     this.troubleshooting = true;
+
+                    throw 'Server error.';
                 })
                 .then((data) => {
                     this.troubleshooting = false;

diff --git a/resources/js/screens/jobs/index.vue b/resources/js/screens/jobs/index.vue
@@ -2,6 +2,14 @@
     <search>
         <template slot="filters" slot-scope="{ filters, loadEntries }"></template>
 
+        <template slot="troubleshooting">
+            <p>It looks like there was an error. Please check your application logs.</p>
+            <p class="mt-2">
+                This error is most likely happening because you haven't properly configured "failed jobs" in your
+                application.
+            </p>
+        </template>
+
         <template slot="row" slot-scope="{ entry }">
             <td class="max-w-0 w-full px-6 py-4 whitespace-no-wrap text-sm leading-5 text-cool-gray-900">
                 <div class="ml-4">

diff --git a/resources/js/screens/logs/index.vue b/resources/js/screens/logs/index.vue
@@ -17,6 +17,14 @@
             </div>
         </template>
 
+        <template slot="troubleshooting">
+            <p>It looks like there was an error. Please check your application logs.</p>
+            <p class="mt-2">
+                Consider searching using a more recent "Starting from" date. The CloudWatch API can have long response
+                times while searching long in the past. Those requests may timeout, or lead to unexpected errors.
+            </p>
+        </template>
+
         <template slot="row" slot-scope="{ entry }">
             <td class="max-w-0 w-full px-6 py-4 whitespace-no-wrap text-sm leading-5 text-cool-gray-900">
                 <div class="ml-4">