Show server error in modal

Author: superdevops233

app/Exceptions/Handler.php

@@ -2,6 +2,7 @@
 
 namespace App\Exceptions;
 
+use Throwable;
 use Illuminate\Auth\AuthenticationException;
 use Illuminate\Foundation\Exceptions\Handler as ExceptionHandler;
 
@@ -39,4 +40,22 @@ protected function unauthenticated($request, AuthenticationException $exception)
                     ? response()->json(['message' => $exception->getMessage()], 401)
                     : redirect()->guest(url('/login'));
     }
+
+        /**
+     * Prepare a JSON response for the given exception.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Throwable  $e
+     * @return \Symfony\Component\HttpFoundation\Response
+     */
+    protected function prepareJsonResponse($request, Throwable $e)
+    {
+        $response = parent::prepareJsonResponse($request, $e);
+
+        if ($response->getStatusCode() === 500 && config('app.debug')) {
+            return $this->prepareResponse($request, $e);
+        }
+
+        return $response;
+    }
 }

resources/js/plugins/axios.js

@@ -25,17 +25,6 @@ axios.interceptors.request.use(request => {
 axios.interceptors.response.use(response => response, error => {
   const { status } = error.response
 
-  if (status >= 500) {
-    Swal.fire({
-      icon: 'error',
-      title: i18n.t('error_alert_title'),
-      text: i18n.t('error_alert_text'),
-      reverseButtons: true,
-      confirmButtonText: i18n.t('ok'),
-      cancelButtonText: i18n.t('cancel')
-    })
-  }
-
   if (status === 401 && store.getters['auth/check']) {
     Swal.fire({
       icon: 'warning',
@@ -51,5 +40,44 @@ axios.interceptors.response.use(response => response, error => {
     })
   }
 
+  if (status >= 500) {
+    serverError(error.response)
+  }
+
   return Promise.reject(error)
 })
+
+let serverErrorModalShown = false
+async function serverError (response) {
+  if (serverErrorModalShown) {
+    return
+  }
+
+  if ((response.headers['content-type'] || '').includes('text/html')) {
+    const iframe = document.createElement('iframe')
+
+    if (response.data instanceof Blob) {
+      iframe.srcdoc = await response.data.text()
+    } else {
+      iframe.srcdoc = response.data
+    }
+
+    Swal.fire({
+      html: iframe.outerHTML,
+      showConfirmButton: false,
+      customClass: { container: 'server-error-modal' },
+      didDestroy: () => { serverErrorModalShown = false }
+    })
+
+    serverErrorModalShown = true
+  } else {
+    Swal.fire({
+      icon: 'error',
+      title: i18n.t('error_alert_title'),
+      text: i18n.t('error_alert_text'),
+      reverseButtons: true,
+      confirmButtonText: i18n.t('ok'),
+      cancelButtonText: i18n.t('cancel')
+    })
+  }
+}

resources/sass/app.scss

@@ -6,3 +6,5 @@
 @import 'elements/navbar';
 @import 'elements/buttons';
 @import 'elements/transitions';
+
+@import 'components/server-error';

resources/sass/components/_server-error.scss

@@ -0,0 +1,22 @@
+.server-error-modal {
+  height: 100%;
+
+  .swal2-modal {
+    padding: 0;
+    width: calc(100% - 60px);
+    height: calc(100% - 60px);
+  }
+
+  .swal2-content,
+  .swal2-html-container {
+    padding: 0;
+    height: 100%;
+  }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 5px;
+  }
+}