mirror of
https://github.com/usebruno/bruno.git
synced 2026-06-25 13:45:52 +00:00
274 lines
11 KiB
JavaScript
274 lines
11 KiB
JavaScript
import React, { useState } from 'react';
|
|
import { useDispatch } from 'react-redux';
|
|
import { IconX, IconChevronDown, IconChevronRight, IconExternalLink } from '@tabler/icons';
|
|
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, setFocusErrorLine } from 'providers/ReduxStore/slices/tabs';
|
|
import { updateSettingsSelectedTab, updatedFolderSettingsSelectedTab } from 'providers/ReduxStore/slices/collections';
|
|
import StyledWrapper from './StyledWrapper';
|
|
|
|
/**
|
|
* Determines the source of a script error (request, folder, or collection)
|
|
* based on the filePath from the error context.
|
|
*
|
|
* Bruno executes scripts at three levels in order: collection -> folder -> request.
|
|
* When an error occurs, the filePath tells us which level it came from:
|
|
*
|
|
* filePath: "echo json.bru" -> request-level -> { sourceType: 'request', label: 'Request' }
|
|
* filePath: "auth/folder.bru" -> folder-level -> { sourceType: 'folder', label: 'Folder: auth', sourceUid: 'f1' }
|
|
* filePath: "collection.bru" -> collection-level -> { sourceType: 'collection', label: 'Collection' }
|
|
*
|
|
* For folder-level errors, this function walks the tree path from collection to
|
|
* the current item to match the folder by its relative path, resolving its UID
|
|
* and display name. If the folder can't be matched (e.g. missing tree data),
|
|
* it falls back to a generic "Folder" label without a sourceUid.
|
|
*
|
|
* @param {string|undefined} filePath - Relative path from errorContext (e.g. "subfolder/folder.bru")
|
|
* @param {object} item - The current request item
|
|
* @param {object} collection - The parent collection (needs .pathname for folder matching)
|
|
* @param {function} getTreePath - Function to get the tree path from collection root to item
|
|
* @returns {{ sourceType: string, label: string, sourceUid?: string } | null}
|
|
*/
|
|
const getErrorSourceInfo = (filePath, item, collection, getTreePath) => {
|
|
if (!filePath) return null;
|
|
|
|
// Normalize backslashes to forward slashes for cross-platform compatibility.
|
|
// On Windows, path.relative() produces backslash separators, but the renderer
|
|
// logic and regexes expect forward slashes.
|
|
const normalizedPath = normalizePath(filePath);
|
|
|
|
const isFolderFile = /(?:^|\/)folder\.(?:bru|yml)$/.test(normalizedPath);
|
|
const isCollectionFile = normalizedPath === 'collection.bru' || /^opencollection\.yml$/.test(normalizedPath);
|
|
|
|
// Folder level (check before collection to avoid folder.yml matching as collection)
|
|
if (isFolderFile) {
|
|
const info = { sourceType: 'folder', label: 'Folder' };
|
|
const folderFileName = normalizedPath.split('/').pop();
|
|
|
|
// Try to find the folder UID and name from the tree path
|
|
if (getTreePath && collection && item) {
|
|
const collectionPathname = normalizePath(collection.pathname || '');
|
|
const treePath = getTreePath(collection, item);
|
|
if (treePath?.length) {
|
|
for (const node of treePath) {
|
|
if (node?.type === 'folder') {
|
|
const nodePath = normalizePath(node.pathname || '');
|
|
const folderRelPath = nodePath && nodePath.startsWith(collectionPathname)
|
|
? nodePath.slice(collectionPathname.length).replace(/^\//, '') + '/' + folderFileName
|
|
: folderFileName;
|
|
if (folderRelPath === normalizedPath) {
|
|
info.sourceUid = node.uid;
|
|
info.label = `Folder: ${node.name}`;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return info;
|
|
}
|
|
|
|
// Collection level
|
|
if (isCollectionFile) {
|
|
return { sourceType: 'collection', label: 'Collection' };
|
|
}
|
|
|
|
// Request level
|
|
return { sourceType: 'request', label: 'Request' };
|
|
};
|
|
|
|
const ScriptErrorCard = ({ title, message, errorContext, item, collection, scriptPhase, onClose }) => {
|
|
const dispatch = useDispatch();
|
|
const [showStack, setShowStack] = useState(false);
|
|
|
|
const displayFilePath = errorContext?.filePath ? normalizePath(errorContext.filePath) : null;
|
|
|
|
const sourceInfo = getErrorSourceInfo(
|
|
errorContext?.filePath,
|
|
item,
|
|
collection,
|
|
getTreePathFromCollectionToItem
|
|
);
|
|
|
|
const canNavigate = sourceInfo
|
|
&& collection?.uid
|
|
&& (sourceInfo.sourceType === 'collection'
|
|
|| (sourceInfo.sourceType === 'folder' && sourceInfo.sourceUid)
|
|
|| (sourceInfo.sourceType === 'request' && item?.uid));
|
|
|
|
const handleNavigateKeyDown = (e) => {
|
|
if (!canNavigate) return;
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
handleNavigate();
|
|
}
|
|
};
|
|
|
|
const handleNavigate = () => {
|
|
if (!canNavigate) return;
|
|
|
|
// CollectionSettings expects 'tests', FolderSettings expects 'test'
|
|
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') {
|
|
dispatch(updateRequestPaneTab({ uid: item.uid, requestPaneTab: 'tests' }));
|
|
} else {
|
|
dispatch(updateRequestPaneTab({ uid: item.uid, requestPaneTab: 'script' }));
|
|
dispatch(updateScriptPaneTab({ uid: item.uid, scriptPaneTab: scriptPhase }));
|
|
}
|
|
const payload = focusPayload(item.uid);
|
|
if (payload) dispatch(setFocusErrorLine(payload));
|
|
}
|
|
};
|
|
|
|
if (!errorContext) {
|
|
return <ErrorBanner errors={[{ title, message }]} onClose={onClose} />;
|
|
}
|
|
|
|
return (
|
|
<StyledWrapper>
|
|
<div className="script-error-card" data-testid="script-error-card">
|
|
<div className="script-error-header">
|
|
<div className="error-title" data-testid="script-error-title">{title}</div>
|
|
{onClose && (
|
|
<button className="close-button flex-shrink-0 cursor-pointer" data-testid="script-error-close" onClick={onClose} aria-label="Close error">
|
|
<IconX size={16} strokeWidth={1.5} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
{(sourceInfo || displayFilePath) && (
|
|
<div className="script-error-source-label" data-testid="script-error-source-label">
|
|
{sourceInfo && <span>{sourceInfo.label}</span>}
|
|
{displayFilePath && (
|
|
<span
|
|
className={`script-error-file-path${canNavigate ? ' navigable' : ''}`}
|
|
data-testid="script-error-file-path"
|
|
role={canNavigate ? 'button' : undefined}
|
|
tabIndex={canNavigate ? 0 : undefined}
|
|
onClick={handleNavigate}
|
|
onKeyDown={handleNavigateKeyDown}
|
|
title={canNavigate ? `Open ${displayFilePath}` : undefined}
|
|
>
|
|
<span>{displayFilePath}</span>
|
|
{canNavigate && <IconExternalLink size={12} className="flex-shrink-0" />}
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
<CodeSnippet lines={errorContext.lines} variant="error" />
|
|
<div className="script-error-message" data-testid="script-error-message">
|
|
{errorContext.errorType || 'Error'}: {message}
|
|
</div>
|
|
{errorContext.stack && (
|
|
<div>
|
|
<button
|
|
className="script-error-stack-toggle"
|
|
data-testid="script-error-stack-toggle"
|
|
onClick={() => setShowStack(!showStack)}
|
|
aria-expanded={showStack}
|
|
aria-label={`${showStack ? 'Hide' : 'Show'} stack trace`}
|
|
>
|
|
{showStack ? <IconChevronDown size={14} /> : <IconChevronRight size={14} />}
|
|
<span>{showStack ? 'Hide' : 'Show'} stack trace</span>
|
|
</button>
|
|
{showStack && (
|
|
<pre className="script-error-stack" data-testid="script-error-stack">{errorContext.stack}</pre>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</StyledWrapper>
|
|
);
|
|
};
|
|
|
|
const ScriptError = ({ item, collection, onClose }) => {
|
|
const preRequestError = item?.preRequestScriptErrorMessage;
|
|
const postResponseError = item?.postResponseScriptErrorMessage;
|
|
const testScriptError = item?.testScriptErrorMessage;
|
|
|
|
if (!preRequestError && !postResponseError && !testScriptError) return null;
|
|
|
|
const preRequestContext = item?.preRequestScriptErrorContext;
|
|
const postResponseContext = item?.postResponseScriptErrorContext;
|
|
const testContext = item?.testScriptErrorContext;
|
|
|
|
const hasAnyContext = preRequestContext || postResponseContext || testContext;
|
|
|
|
// If no error context available for any error, fall back to ErrorBanner
|
|
if (!hasAnyContext) {
|
|
const errors = [];
|
|
if (preRequestError) errors.push({ title: 'Pre-Request Script Error', message: preRequestError });
|
|
if (postResponseError) errors.push({ title: 'Post-Response Script Error', message: postResponseError });
|
|
if (testScriptError) errors.push({ title: 'Test Script Error', message: testScriptError });
|
|
return <ErrorBanner errors={errors} onClose={onClose} className="mb-2" />;
|
|
}
|
|
|
|
return (
|
|
<div className="mb-2 flex flex-col gap-2">
|
|
{preRequestError && (
|
|
<ScriptErrorCard
|
|
title="Pre-Request Script Error"
|
|
message={preRequestError}
|
|
errorContext={preRequestContext}
|
|
item={item}
|
|
collection={collection}
|
|
scriptPhase="pre-request"
|
|
onClose={onClose}
|
|
/>
|
|
)}
|
|
{postResponseError && (
|
|
<ScriptErrorCard
|
|
title="Post-Response Script Error"
|
|
message={postResponseError}
|
|
errorContext={postResponseContext}
|
|
item={item}
|
|
collection={collection}
|
|
scriptPhase="post-response"
|
|
onClose={onClose}
|
|
/>
|
|
)}
|
|
{testScriptError && (
|
|
<ScriptErrorCard
|
|
title="Test Script Error"
|
|
message={testScriptError}
|
|
errorContext={testContext}
|
|
item={item}
|
|
collection={collection}
|
|
scriptPhase="test"
|
|
onClose={onClose}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ScriptError;
|