+
+
+
+
+
+
+
+
+
+ {getDomain()}
+
+
+
+ {getPath()}
+
+
+
+ {formatTime(timestamp)}
+
+
+
+ {formatDuration(res?.duration)}
+
+
+
+ {formatSize(res?.size)}
+
+
e.target.style.backgroundColor = '#0078d4'}
+ onMouseLeave={(e) => e.target.style.backgroundColor = isResizingDevtools ? '#0078d4' : 'transparent'}
+ />
+
+
+
+
+ );
+};
+
+export default Devtools;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/ErrorCapture/index.js b/packages/bruno-app/src/components/ErrorCapture/index.js
new file mode 100644
index 000000000..8a811276d
--- /dev/null
+++ b/packages/bruno-app/src/components/ErrorCapture/index.js
@@ -0,0 +1,147 @@
+import React, { Component, useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { addDebugError } from 'providers/ReduxStore/slices/logs';
+
+class ErrorBoundary extends Component {
+ constructor(props) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError(error) {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error, errorInfo) {
+ if (this.props.onError) {
+ this.props.onError({
+ message: error.message,
+ stack: error.stack,
+ error: error,
+ timestamp: new Date().toISOString()
+ });
+ }
+
+ setTimeout(() => {
+ this.setState({ hasError: false });
+ }, 100);
+ }
+
+ render() {
+ return this.props.children;
+ }
+}
+
+const serializeArgs = (args) => {
+ return args.map(arg => {
+ try {
+ if (arg === null) return 'null';
+ if (arg === undefined) return 'undefined';
+ if (typeof arg === 'string' || typeof arg === 'number' || typeof arg === 'boolean') {
+ return arg;
+ }
+ if (arg instanceof Error) {
+ return {
+ __type: 'Error',
+ name: arg.name,
+ message: arg.message,
+ stack: arg.stack
+ };
+ }
+ if (typeof arg === 'object') {
+ try {
+ return JSON.parse(JSON.stringify(arg));
+ } catch {
+ return String(arg);
+ }
+ }
+ return String(arg);
+ } catch (e) {
+ return '[Unserializable]';
+ }
+ });
+};
+
+// Helper function to extract file and line info from stack trace
+const extractFileInfo = (stack) => {
+ if (!stack) return { filename: null, lineno: null, colno: null };
+
+ try {
+ const lines = stack.split('\n');
+ for (let line of lines) {
+ if (line.includes('ErrorCapture') || line.trim() === 'Error') continue;
+
+ const match = line.match(/(?:at\s+.*?\s+)?\(?([^)]+):(\d+):(\d+)\)?/);
+ if (match) {
+ return {
+ filename: match[1],
+ lineno: parseInt(match[2]),
+ colno: parseInt(match[3])
+ };
+ }
+ }
+ } catch (e) {
+ // Ignore parsing errors
+ }
+
+ return { filename: null, lineno: null, colno: null };
+};
+
+const useGlobalErrorCapture = () => {
+ const dispatch = useDispatch();
+
+ useEffect(() => {
+ const originalConsoleError = console.error;
+
+ console.error = (...args) => {
+ const currentStack = new Error().stack;
+
+ originalConsoleError.apply(console, args);
+
+ if (currentStack && currentStack.includes('useIpcEvents.js')) {
+ return;
+ }
+
+ const errorMessage = args.join(' ');
+ if (errorMessage.includes('removeConsoleLogListener')) {
+ return;
+ }
+
+ const { filename, lineno, colno } = extractFileInfo(currentStack);
+
+ const serializedArgs = serializeArgs(args);
+
+ dispatch(addDebugError({
+ message: errorMessage,
+ stack: currentStack,
+ filename: filename,
+ lineno: lineno,
+ colno: colno,
+ args: serializedArgs,
+ timestamp: new Date().toISOString()
+ }));
+ };
+
+ return () => {
+ console.error = originalConsoleError;
+ };
+ }, [dispatch]);
+};
+
+const ErrorCapture = ({ children }) => {
+ const dispatch = useDispatch();
+
+ useGlobalErrorCapture();
+
+ const handleReactError = (errorData) => {
+ dispatch(addDebugError(errorData));
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export default ErrorCapture;
\ No newline at end of file
diff --git a/packages/bruno-app/src/components/Notifications/index.js b/packages/bruno-app/src/components/Notifications/index.js
index 88a28afe1..0667a4146 100644
--- a/packages/bruno-app/src/components/Notifications/index.js
+++ b/packages/bruno-app/src/components/Notifications/index.js
@@ -2,6 +2,7 @@ import { IconBell } from '@tabler/icons';
import { useState } from 'react';
import StyledWrapper from './StyleWrapper';
import Modal from 'components/Modal/index';
+import Portal from 'components/Portal';
import { useEffect } from 'react';
import { useApp } from 'providers/App';
import {
@@ -109,7 +110,7 @@ const Notifications = () => {
>
0 ? 'bell' : ''}`}
@@ -121,6 +122,7 @@ const Notifications = () => {
{showNotificationsModal && (
+
{
)}
+
{collections && collections.length
? collections.map((c) => {
return (
diff --git a/packages/bruno-app/src/components/Sidebar/index.js b/packages/bruno-app/src/components/Sidebar/index.js
index 9f476e3c8..1ba71b1ab 100644
--- a/packages/bruno-app/src/components/Sidebar/index.js
+++ b/packages/bruno-app/src/components/Sidebar/index.js
@@ -1,29 +1,20 @@
import TitleBar from './TitleBar';
import Collections from './Collections';
import StyledWrapper from './StyledWrapper';
-import Preferences from 'components/Preferences';
-import Cookies from 'components/Cookies';
-import ToolHint from 'components/ToolHint';
-import GoldenEdition from './GoldenEdition';
import { useApp } from 'providers/App';
import { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
-import { IconSettings, IconCookie, IconHeart } from '@tabler/icons';
-import { updateLeftSidebarWidth, updateIsDragging, showPreferences } from 'providers/ReduxStore/slices/app';
+import { updateLeftSidebarWidth, updateIsDragging } from 'providers/ReduxStore/slices/app';
import { useTheme } from 'providers/Theme';
-import Notifications from 'components/Notifications';
const MIN_LEFT_SIDEBAR_WIDTH = 221;
const MAX_LEFT_SIDEBAR_WIDTH = 600;
const Sidebar = () => {
const leftSidebarWidth = useSelector((state) => state.app.leftSidebarWidth);
- const preferencesOpen = useSelector((state) => state.app.showPreferences);
- const [goldenEditionOpen, setGoldenEditionOpen] = useState(false);
const { version } = useApp();
const [asideWidth, setAsideWidth] = useState(leftSidebarWidth);
- const [cookiesOpen, setCookiesOpen] = useState(false);
const { storedTheme } = useTheme();
@@ -81,112 +72,14 @@ const Sidebar = () => {
}, [leftSidebarWidth]);
return (
-
+