feat(app): scroll to and highlight error line on script error (usebruno#8183)

pooja-bruno · web-flow · commit b73bf9d89815 · 2026-06-15T13:01:19.000+05:30
diff --git a/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js b/packages/bruno-app/src/components/CodeEditor/StyledWrapper.js
@@ -165,6 +165,32 @@ const StyledWrapper = styled.div`
     background: ${(props) => props.theme.codemirror.searchLineHighlightCurrent};
   }
 
+  @keyframes cm-error-line-flash {
+    0%, 60% {
+      background-color: ${(props) => props.theme.status.danger.background};
+    }
+    100% {
+      background-color: transparent;
+    }
+  }
+
+  .CodeMirror .cm-error-line-flash {
+    background-color: transparent;
+    animation: cm-error-line-flash 3s ease-in-out;
+  }
+
+  .CodeMirror .cm-error-line-flash-gutter {
+    color: ${(props) => props.theme.colors.text.danger} !important;
+    font-weight: 600;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .CodeMirror .cm-error-line-flash {
+      animation: none;
+      background-color: ${(props) => props.theme.status.danger.background};
+    }
+  }
+
   .cm-search-match {
     background: rgba(255, 193, 7, 0.25);
   }
diff --git a/packages/bruno-app/src/components/CollectionSettings/Script/index.js b/packages/bruno-app/src/components/CollectionSettings/Script/index.js
@@ -14,6 +14,7 @@ import { flattenItems, isItemARequest } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
 import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Script = ({ collection }) => {
   const dispatch = useDispatch();
@@ -60,6 +61,20 @@ const Script = ({ collection }) => {
     return () => clearTimeout(timer);
   }, [activeTab]);
 
+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: preRequestEditorRef,
+    scriptPhase: 'pre-request',
+    isVisible: activeTab === 'pre-request'
+  });
+
+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: postResponseEditorRef,
+    scriptPhase: 'post-response',
+    isVisible: activeTab === 'post-response'
+  });
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateCollectionRequestScript({
diff --git a/packages/bruno-app/src/components/CollectionSettings/Tests/index.js b/packages/bruno-app/src/components/CollectionSettings/Tests/index.js
@@ -9,6 +9,7 @@ import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
 import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Tests = ({ collection }) => {
   const dispatch = useDispatch();
@@ -30,6 +31,12 @@ const Tests = ({ collection }) => {
 
   const handleSave = () => dispatch(saveCollectionSettings(collection.uid));
 
+  useFocusErrorLine({
+    uid: collection.uid,
+    editorRef: testsEditorRef,
+    scriptPhase: 'test'
+  });
+
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
       <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
diff --git a/packages/bruno-app/src/components/FolderSettings/Script/index.js b/packages/bruno-app/src/components/FolderSettings/Script/index.js
@@ -14,6 +14,7 @@ import { flattenItems, isItemARequest } from 'utils/collections';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
 import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Script = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -63,6 +64,20 @@ const Script = ({ collection, folder }) => {
     return () => clearTimeout(timer);
   }, [activeTab]);
 
+  useFocusErrorLine({
+    uid: folder.uid,
+    editorRef: preRequestEditorRef,
+    scriptPhase: 'pre-request',
+    isVisible: activeTab === 'pre-request'
+  });
+
+  useFocusErrorLine({
+    uid: folder.uid,
+    editorRef: postResponseEditorRef,
+    scriptPhase: 'post-response',
+    isVisible: activeTab === 'post-response'
+  });
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateFolderRequestScript({
diff --git a/packages/bruno-app/src/components/FolderSettings/Tests/index.js b/packages/bruno-app/src/components/FolderSettings/Tests/index.js
@@ -9,6 +9,7 @@ import { useTheme } from 'providers/Theme';
 import StyledWrapper from './StyledWrapper';
 import Button from 'ui/Button';
 import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Tests = ({ collection, folder }) => {
   const dispatch = useDispatch();
@@ -31,6 +32,12 @@ const Tests = ({ collection, folder }) => {
 
   const handleSave = () => dispatch(saveFolderRoot(collection.uid, folder.uid));
 
+  useFocusErrorLine({
+    uid: folder.uid,
+    editorRef: testsEditorRef,
+    scriptPhase: 'test'
+  });
+
   return (
     <StyledWrapper className="w-full flex flex-col h-full">
       <div className="text-xs mb-4 text-muted">These tests will run any time a request in this collection is sent.</div>
diff --git a/packages/bruno-app/src/components/RequestPane/Script/index.js b/packages/bruno-app/src/components/RequestPane/Script/index.js
@@ -12,6 +12,7 @@ import { useTheme } from 'providers/Theme';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from 'components/Tabs';
 import StatusDot from 'components/StatusDot';
 import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Script = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -57,6 +58,20 @@ const Script = ({ item, collection }) => {
     return () => clearTimeout(timer);
   }, [activeTab]);
 
+  useFocusErrorLine({
+    uid: item.uid,
+    editorRef: preRequestEditorRef,
+    scriptPhase: 'pre-request',
+    isVisible: activeTab === 'pre-request'
+  });
+
+  useFocusErrorLine({
+    uid: item.uid,
+    editorRef: postResponseEditorRef,
+    scriptPhase: 'post-response',
+    isVisible: activeTab === 'post-response'
+  });
+
   const onRequestScriptEdit = (value) => {
     dispatch(
       updateRequestScript({
diff --git a/packages/bruno-app/src/components/RequestPane/Tests/index.js b/packages/bruno-app/src/components/RequestPane/Tests/index.js
@@ -8,6 +8,7 @@ import { updateRequestTests } from 'providers/ReduxStore/slices/collections';
 import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions';
 import { useTheme } from 'providers/Theme';
 import { usePersistedState } from 'hooks/usePersistedState';
+import { useFocusErrorLine } from 'hooks/useFocusErrorLine';
 
 const Tests = ({ item, collection }) => {
   const dispatch = useDispatch();
@@ -31,6 +32,12 @@ const Tests = ({ item, collection }) => {
   const onRun = () => dispatch(sendRequest(item, collection.uid));
   const onSave = () => dispatch(saveRequest(item.uid, collection.uid));
 
+  useFocusErrorLine({
+    uid: item.uid,
+    editorRef: testsEditorRef,
+    scriptPhase: 'test'
+  });
+
   const requestContext = useMemo(() => buildRequestContextFromItem(item), [item]);
 
   return (
diff --git a/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js b/packages/bruno-app/src/components/ResponsePane/ScriptError/index.js
@@ -5,7 +5,7 @@ import ErrorBanner from 'ui/ErrorBanner';
 import CodeSnippet from 'components/CodeSnippet';
 import { getTreePathFromCollectionToItem } from 'utils/collections';
 import { normalizePath } from 'utils/common/path';
-import { addTab, updateRequestPaneTab, updateScriptPaneTab } from 'providers/ReduxStore/slices/tabs';
+import { addTab, updateRequestPaneTab, updateScriptPaneTab, setFocusErrorLine } from 'providers/ReduxStore/slices/tabs';
 import { updateSettingsSelectedTab, updatedFolderSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
 import StyledWrapper from './StyledWrapper';
 
@@ -114,18 +114,28 @@ const ScriptErrorCard = ({ title, message, errorContext, item, collection, scrip
     const collectionSettingsTab = scriptPhase === 'test' ? 'tests' : 'script';
     const folderSettingsTab = scriptPhase === 'test' ? 'test' : 'script';
 
+    const errorLine = errorContext?.errorLine;
+    const focusPayload = (uid) =>
+      typeof errorLine === 'number'
+        ? { uid, scriptPhase, line: errorLine, requestedAt: Date.now() }
+        : null;
+
     if (sourceInfo.sourceType === 'collection') {
       dispatch(addTab({ uid: collection.uid, collectionUid: collection.uid, type: 'collection-settings' }));
       dispatch(updateSettingsSelectedTab({ collectionUid: collection.uid, tab: collectionSettingsTab }));
       if (collectionSettingsTab === 'script') {
         dispatch(updateScriptPaneTab({ uid: collection.uid, scriptPaneTab: scriptPhase }));
       }
+      const payload = focusPayload(collection.uid);
+      if (payload) dispatch(setFocusErrorLine(payload));
     } else if (sourceInfo.sourceType === 'folder' && sourceInfo.sourceUid) {
       dispatch(addTab({ uid: sourceInfo.sourceUid, collectionUid: collection.uid, type: 'folder-settings' }));
       dispatch(updatedFolderSettingsSelectedTab({ collectionUid: collection.uid, folderUid: sourceInfo.sourceUid, tab: folderSettingsTab }));
       if (folderSettingsTab === 'script') {
         dispatch(updateScriptPaneTab({ uid: sourceInfo.sourceUid, scriptPaneTab: scriptPhase }));
       }
+      const payload = focusPayload(sourceInfo.sourceUid);
+      if (payload) dispatch(setFocusErrorLine(payload));
     } else if (sourceInfo.sourceType === 'request') {
       dispatch(addTab({ uid: item.uid, collectionUid: collection.uid, type: 'request' }));
       if (scriptPhase === 'test') {
@@ -134,6 +144,8 @@ const ScriptErrorCard = ({ title, message, errorContext, item, collection, scrip
         dispatch(updateRequestPaneTab({ uid: item.uid, requestPaneTab: 'script' }));
         dispatch(updateScriptPaneTab({ uid: item.uid, scriptPaneTab: scriptPhase }));
       }
+      const payload = focusPayload(item.uid);
+      if (payload) dispatch(setFocusErrorLine(payload));
     }
   };
 
diff --git a/packages/bruno-app/src/hooks/useFocusErrorLine/index.js b/packages/bruno-app/src/hooks/useFocusErrorLine/index.js
@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import find from 'lodash/find';
+import { useDispatch, useSelector } from 'react-redux';
+import { clearFocusErrorLine } from 'providers/ReduxStore/slices/tabs';
+import { focusErrorLine } from 'utils/codemirror/focusErrorLine';
+
+/**
+ * Subscribes a CodeMirror-hosting component to the tab's `focusErrorLine` signal.
+ * When the signal targets this host's `scriptPhase`, scrolls the editor to the
+ * line and flashes a red highlight that fades over ~3s. Re-firing for the same
+ * line is handled via the `requestedAt` token.
+ *
+ * @param {object} params
+ * @param {string} params.uid                        Tab uid (request/folder/collection uid)
+ * @param {React.RefObject} params.editorRef         Ref to a CodeEditor component (exposes `.editor`)
+ * @param {string} params.scriptPhase               'pre-request' | 'post-response' | 'test'
+ * @param {boolean} [params.isVisible=true]          Whether this editor's tab is currently shown
+ */
+export const useFocusErrorLine = ({ uid, editorRef, scriptPhase, isVisible = true }) => {
+  const dispatch = useDispatch();
+  const focusErrorLineState = useSelector((state) => {
+    const tab = find(state.tabs.tabs, (t) => t.uid === uid);
+    return tab?.focusErrorLine || null;
+  });
+
+  const disposeRef = useRef(null);
+
+  useEffect(() => {
+    if (!focusErrorLineState || !isVisible) return;
+
+    if (focusErrorLineState.scriptPhase !== scriptPhase) return;
+
+    const timer = setTimeout(() => {
+      const editor = editorRef.current?.editor;
+      if (!editor) return;
+
+      if (disposeRef.current) {
+        disposeRef.current();
+        disposeRef.current = null;
+      }
+
+      disposeRef.current = focusErrorLine(editor, focusErrorLineState.line);
+      dispatch(clearFocusErrorLine({ uid }));
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [focusErrorLineState?.requestedAt, focusErrorLineState?.line, focusErrorLineState?.scriptPhase, isVisible, scriptPhase, uid]);
+
+  useEffect(() => {
+    return () => {
+      if (disposeRef.current) {
+        disposeRef.current();
+        disposeRef.current = null;
+      }
+    };
+  }, []);
+};
+
+export default useFocusErrorLine;
diff --git a/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js b/packages/bruno-app/src/providers/ReduxStore/slices/tabs.js
@@ -280,6 +280,24 @@ export const tabsSlice = createSlice({
         tab.scriptPaneTab = action.payload.scriptPaneTab;
       }
     },
+    setFocusErrorLine: (state, action) => {
+      const tab = find(state.tabs, (t) => t.uid === action.payload.uid);
+
+      if (tab) {
+        tab.focusErrorLine = {
+          scriptPhase: action.payload.scriptPhase,
+          line: action.payload.line,
+          requestedAt: action.payload.requestedAt
+        };
+      }
+    },
+    clearFocusErrorLine: (state, action) => {
+      const tab = find(state.tabs, (t) => t.uid === action.payload.uid);
+
+      if (tab) {
+        tab.focusErrorLine = null;
+      }
+    },
     updateQueryBuilderOpen: (state, action) => {
       const tab = find(state.tabs, (t) => t.uid === action.payload.uid);
 
@@ -519,6 +537,8 @@ export const {
   updateGqlDocsOpen,
   updateTableColumnWidths,
   updateScriptPaneTab,
+  setFocusErrorLine,
+  clearFocusErrorLine,
   closeTabs,
   closeAllCollectionTabs,
   makeTabPermanent,
diff --git a/packages/bruno-app/src/utils/codemirror/focusErrorLine.js b/packages/bruno-app/src/utils/codemirror/focusErrorLine.js
@@ -0,0 +1,40 @@
+const LINE_CLASS_TARGET = 'background';
+const LINE_CLASS_NAME = 'cm-error-line-flash';
+const GUTTER_CLASS_TARGET = 'gutter';
+const GUTTER_CLASS_NAME = 'cm-error-line-flash-gutter';
+
+export const focusErrorLine = (editor, line1Based, { durationMs = 3000 } = {}) => {
+  if (!editor || typeof line1Based !== 'number' || Number.isNaN(line1Based)) {
+    return () => {};
+  }
+
+  const lineCount = editor.lineCount();
+  const line = Math.max(0, Math.min(line1Based - 1, lineCount - 1));
+
+  try {
+    editor.scrollIntoView({ line, ch: 0 }, 80);
+    editor.addLineClass(line, LINE_CLASS_TARGET, LINE_CLASS_NAME);
+    editor.addLineClass(line, GUTTER_CLASS_TARGET, GUTTER_CLASS_NAME);
+  } catch (e) {
+    return () => {};
+  }
+
+  let disposed = false;
+  const dispose = () => {
+    if (disposed) return;
+    disposed = true;
+    try {
+      editor.removeLineClass(line, LINE_CLASS_TARGET, LINE_CLASS_NAME);
+      editor.removeLineClass(line, GUTTER_CLASS_TARGET, GUTTER_CLASS_NAME);
+    } catch (e) {
+      // editor may have been swapped out; nothing to clean up
+    }
+  };
+
+  const timer = setTimeout(dispose, durationMs);
+
+  return () => {
+    clearTimeout(timer);
+    dispose();
+  };
+};
diff --git a/tests/script-errors/fixtures/collections/script-errors-test/long-pre-request-error.bru b/tests/script-errors/fixtures/collections/script-errors-test/long-pre-request-error.bru
diff --git a/tests/script-errors/focus-error-line.spec.ts b/tests/script-errors/focus-error-line.spec.ts
