chore: improve error handling in frontend (baserow#5109)

Author: jrmi

.env.example

@@ -182,6 +182,7 @@ DATABASE_NAME=baserow
 
 # BASEROW_TOTP_ISSUER_NAME=
 
+# Set SENTRY_DSN to `fake` if you want to test sentry logging without sentry itself
 # SENTRY_DSN=
 # SENTRY_BACKEND_DSN=
 

backend/src/baserow/config/settings/base.py

@@ -1439,10 +1439,12 @@ def __setitem__(self, key, value):
 if SENTRY_DSN:
     import sentry_sdk
     import sentry_sdk.integrations as _sentry_integrations
+    from loguru import logger
     from sentry_sdk.integrations.django import DjangoIntegration
     from sentry_sdk.scrubber import DEFAULT_DENYLIST, EventScrubber
 
     from baserow.core.sentry import (
+        ConsoleSentryTransport,
         drop_expected_asyncio_websocket_ping_timeout_events,
     )
 
@@ -1457,6 +1459,15 @@ def __setitem__(self, key, value):
     ]
 
     SENTRY_DENYLIST = DEFAULT_DENYLIST + ["username", "email", "name"]
+    sentry_transport = None
+
+    if SENTRY_DSN == "fake":
+        logger.info(
+            "[SENTRY] Using fake backend Sentry DSN, events will be logged to the "
+            "console."
+        )
+        SENTRY_DSN = "https://public@example.invalid/1"
+        sentry_transport = ConsoleSentryTransport()
 
     sentry_sdk.init(
         dsn=SENTRY_DSN,
@@ -1465,6 +1476,7 @@ def __setitem__(self, key, value):
         before_send=drop_expected_asyncio_websocket_ping_timeout_events,
         event_scrubber=EventScrubber(recursive=True, denylist=SENTRY_DENYLIST),
         environment=os.getenv("SENTRY_ENVIRONMENT", ""),
+        transport=sentry_transport,
     )
 else:
     BASEROW_LAZY_LOADED_LIBRARIES.append("sentry_sdk")

backend/src/baserow/core/sentry.py

@@ -1,8 +1,67 @@
+import json
 import logging
 from typing import Any
 
 from django.contrib.auth import get_user_model
 
+from loguru import logger
+from sentry_sdk.transport import Transport
+
+SENTRY_LOG_PREFIX = "[SENTRY]"
+
+
+def _get_sentry_event_message(event: dict[str, Any]) -> str:
+    exception_values = event.get("exception", {}).get("values", [])
+    if exception_values:
+        exception = exception_values[-1]
+        exception_type = exception.get("type", "UnknownError")
+        exception_value = exception.get("value", "")
+        if exception_value:
+            return f"{exception_type}: {exception_value}"
+        return exception_type
+
+    log_entry = event.get("logentry", {})
+    if log_entry.get("formatted"):
+        return log_entry["formatted"]
+    if log_entry.get("message"):
+        return log_entry["message"]
+    if event.get("message"):
+        return str(event["message"])
+
+    return "Sentry event captured without a message."
+
+
+def log_sentry_event_to_console(event: dict[str, Any]) -> None:
+    level = str(event.get("level", "error")).upper()
+    event_id = event.get("event_id", "unknown")
+    message = _get_sentry_event_message(event)
+    logger.error(f"{SENTRY_LOG_PREFIX} [{level}] [{event_id}] {message}")
+
+
+class ConsoleSentryTransport(Transport):
+    """
+    A transport that logs Sentry events locally instead of sending them to Sentry.
+    """
+
+    def capture_event(self, event):
+        log_sentry_event_to_console(event)
+
+    def capture_envelope(self, envelope):
+        for item in envelope.items:
+            item_type = item.headers.get("type", "unknown")
+            payload = item.get_bytes().decode("utf-8", errors="replace")
+
+            if item_type == "event":
+                try:
+                    log_sentry_event_to_console(json.loads(payload))
+                    continue
+                except json.JSONDecodeError:
+                    pass
+
+            logger.error(
+                f"{SENTRY_LOG_PREFIX} [ENVELOPE] [{item_type.upper()}] {payload}"
+            )
+
 
 def drop_expected_asyncio_websocket_ping_timeout_events(
     event: dict[str, Any], hint: dict[str, Any]

backend/tests/baserow/core/test_sentry.py

@@ -1,6 +1,13 @@
 import logging
+from unittest.mock import patch
 
-from baserow.core.sentry import drop_expected_asyncio_websocket_ping_timeout_events
+from sentry_sdk.envelope import Envelope
+
+from baserow.core.sentry import (
+    ConsoleSentryTransport,
+    drop_expected_asyncio_websocket_ping_timeout_events,
+    log_sentry_event_to_console,
+)
 
 
 def test_drop_expected_asyncio_websocket_ping_timeout_events():
@@ -44,3 +51,37 @@ def test_drop_expected_asyncio_websocket_ping_timeout_events_keeps_other_errors(
         )
         == event
     )
+
+
+@patch("baserow.core.sentry.logger")
+def test_log_sentry_event_to_console_logs_exception_with_prefix(mock_logger):
+    log_sentry_event_to_console(
+        {
+            "event_id": "event-123",
+            "level": "error",
+            "exception": {
+                "values": [
+                    {
+                        "type": "ValueError",
+                        "value": "broken",
+                    }
+                ]
+            },
+        }
+    )
+
+    mock_logger.error.assert_called_once_with(
+        "[SENTRY] [ERROR] [event-123] ValueError: broken"
+    )
+
+
+@patch("baserow.core.sentry.logger")
+def test_console_sentry_transport_logs_envelope_payload(mock_logger):
+    envelope = Envelope(headers={"event_id": "event-123"})
+    envelope.add_event({"event_id": "event-123", "message": "Envelope event"})
+
+    ConsoleSentryTransport().capture_envelope(envelope)
+
+    mock_logger.error.assert_called_once_with(
+        "[SENTRY] [ERROR] [event-123] Envelope event"
+    )

changelog/entries/unreleased/refactor/improve_error_handling_in_frontend.json

@@ -0,0 +1,9 @@
+{
+    "type": "refactor",
+    "message": "Improve error handling in frontend",
+    "issue_origin": "github",
+    "issue_number": null,
+    "domain": "core",
+    "bullet_points": [],
+    "created_at": "2026-04-16"
+}

enterprise/web-frontend/modules/baserow_enterprise/pages/admin/dataScanner.vue

@@ -44,10 +44,21 @@ if (!$hasFeature(EnterpriseFeatures.DATA_SCANNER)) {
   throw createError({
     statusCode: 401,
     message: 'Available in the enterprise version',
+    data: {
+      report: false,
+    },
+    fatal: true,
   })
 }
 
 if (!store.getters['auth/isStaff']) {
-  throw createError({ statusCode: 403, message: 'Forbidden.' })
+  throw createError({
+    statusCode: 403,
+    message: 'Forbidden.',
+    data: {
+      report: false,
+    },
+    fatal: true,
+  })
 }
 </script>

enterprise/web-frontend/modules/baserow_enterprise/pages/auditLog.vue

@@ -161,6 +161,10 @@ if (workspaceId) {
     throw createError({
       statusCode: 401,
       message: 'Available in the advanced/enterprise version',
+      data: {
+        report: false,
+      },
+      fatal: true,
     })
   } else if (
     !$hasPermission(
@@ -169,15 +173,33 @@ if (workspaceId) {
       workspaceId
     )
   ) {
-    throw createError({ statusCode: 404, message: 'Page not found' })
+    throw createError({
+      statusCode: 404,
+      message: 'Page not found',
+      data: {
+        report: false,
+      },
+      fatal: true,
+    })
   }
 } else if (!$hasFeature(EnterpriseFeatures.AUDIT_LOG)) {
   throw createError({
     statusCode: 401,
     message: 'Available in the advanced/enterprise version',
+    data: {
+      report: false,
+    },
+    fatal: true,
   })
 } else if (!store.getters['auth/isStaff']) {
-  throw createError({ statusCode: 403, message: 'Forbidden.' })
+  throw createError({
+    statusCode: 403,
+    message: 'Forbidden.',
+    data: {
+      report: false,
+    },
+    fatal: true,
+  })
 }
 
 // Template refs

premium/web-frontend/modules/baserow_premium/pages/admin/license.vue

@@ -224,10 +224,23 @@ const { data, error } = await useAsyncData(
         route.params.id
       )
       return licenseData
-    } catch {
+    } catch (e) {
+      const statusCode = e.response?.status || 500
+
+      if (statusCode === 404) {
+        throw createError({
+          statusCode: 404,
+          message: 'The license was not found.',
+          data: {
+            report: false,
+          },
+          fatal: true,
+        })
+      }
       throw createError({
-        statusCode: 404,
-        message: 'The license was not found.',
+        statusCode: statusCode,
+        message: 'Something went wrong while fetching the licenses.',
+        fatal: true,
       })
     }
   }

premium/web-frontend/modules/baserow_premium/pages/admin/licenses.vue

@@ -181,8 +181,20 @@ const { data, error } = await useAsyncData('licensesPage', async () => {
       instanceId: instanceData.instance_id,
     }
   } catch (e) {
+    const statusCode = e.response?.status || 500
+
+    if (statusCode === 404) {
+      throw createError({
+        statusCode: 404,
+        message: 'Licenses not found.',
+        data: {
+          report: false,
+        },
+        fatal: true,
+      })
+    }
     throw createError({
-      statusCode: 400,
+      statusCode: statusCode,
       message: 'Something went wrong while fetching the licenses.',
       fatal: true,
     })