add stack and redirect to error page (#6171)

* add stack and redirect

* fix format

* fix formdata parsing

* remove console log

.eslintrc.js

@@ -123,7 +123,7 @@ module.exports = {
     'react/jsx-indent-props': [ERROR, 2],
     'react/prop-types': OFF(UNKNOWN),
     'react/function-component-definition': [ERROR, {
-      'namedComponents':  'arrow-function',
+      'namedComponents': 'arrow-function',
       'unnamedComponents': 'arrow-function',
     }],
     'react/jsx-closing-bracket-location': [ERROR, 'line-aligned'],

.vscode/settings.json

@@ -14,6 +14,6 @@
   },
   "files.insertFinalNewline": true,
   "editor.formatOnSave": true,
-  "editor.formatOnSaveMode": "file",
-  "editor.defaultFormatter": "vscode.typescript-language-features",
+  "editor.formatOnSaveMode": "modifications",
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
 }

packages/insomnia/src/ui/components/modals/workspace-environments-edit-modal.tsx

@@ -231,7 +231,7 @@ export interface WorkspaceEnvironmentsEditModalHandle {
   hide: () => void;
 }
 export const WorkspaceEnvironmentsEditModal = forwardRef<WorkspaceEnvironmentsEditModalHandle, ModalProps>((props, ref) => {
-  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string}>();
+  const { organizationId, projectId, workspaceId } = useParams<{ organizationId: string; projectId: string; workspaceId: string }>();
   const routeData = useRouteLoaderData(
     ':workspaceId'
   ) as WorkspaceLoaderData;
@@ -284,7 +284,6 @@ export const WorkspaceEnvironmentsEditModal = forwardRef<WorkspaceEnvironmentsEd
       environmentId,
     },
     {
-      encType: 'application/json',
       method: 'post',
       action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/delete`,
     });
@@ -493,7 +492,6 @@ export const WorkspaceEnvironmentsEditModal = forwardRef<WorkspaceEnvironmentsEd
                       duplicateEnvironmentFetcher.submit({
                         environmentId: activeEnvironment._id,
                       }, {
-                        encType: 'application/json',
                         method: 'post',
                         action: `/organization/${organizationId}/project/${projectId}/workspace/${workspaceId}/environment/duplicate`,
                       });

packages/insomnia/src/ui/routes/actions.tsx

@@ -839,7 +839,9 @@ export const duplicateEnvironmentAction: ActionFunction = async ({
   const { workspaceId } = params;
   invariant(typeof workspaceId === 'string', 'Workspace ID is required');
 
-  const { environmentId } = await request.json();
+  const formData = await request.formData();
+
+  const environmentId = formData.get('environmentId');
 
   invariant(typeof environmentId === 'string', 'Environment ID is required');
 
@@ -861,15 +863,12 @@ export const setActiveEnvironmentAction: ActionFunction = async ({
 
   const environmentId = formData.get('environmentId');
 
-  console.log('environmentId', environmentId);
-
   invariant(typeof environmentId === 'string', 'Environment ID is required');
 
   const workspaceMeta = await models.workspaceMeta.getOrCreateByParentId(workspaceId);
 
   invariant(workspaceMeta, 'Workspace meta not found');
 
-  // @TODO - Null vs undefined vs empty string
   await models.workspaceMeta.update(workspaceMeta, { activeEnvironmentId: environmentId || null });
 
   return null;

packages/insomnia/src/ui/routes/error.tsx

@@ -8,8 +8,8 @@ import {
 } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { isDevelopment } from '../../common/constants';
 import { DEFAULT_ORGANIZATION_ID } from '../../models/organization';
-import { DEFAULT_PROJECT_ID } from '../../models/project';
 import { Button } from '../components/themed-button';
 
 const Container = styled.div({
@@ -35,10 +35,15 @@ export const ErrorRoute: FC = () => {
 
     return err?.message || 'Unknown error';
   };
+  const getErrorStack = (err: any) => {
+    if (isRouteErrorResponse(err)) {
+      return err.error?.stack;
+    }
+    return err?.stack;
+  };
 
   const navigate = useNavigate();
   const navigation = useNavigation();
-
   const errorMessage = getErrorMessage(error);
 
   return (
@@ -50,10 +55,13 @@ export const ErrorRoute: FC = () => {
       <span style={{ color: 'var(--color-font)' }}>
         <code className="selectable" style={{ wordBreak: 'break-word', margin: 'var(--padding-sm)' }}>{errorMessage}</code>
       </span>
-      <Button onClick={() => navigate(`/organization/${DEFAULT_ORGANIZATION_ID}/project/${DEFAULT_PROJECT_ID}`)}>
+      <Button onClick={() => navigate(`/organization/${DEFAULT_ORGANIZATION_ID}`)}>
         Try to reload the app{' '}
         <span>{navigation.state === 'loading' ? <Spinner /> : null}</span>
       </Button>
+      {isDevelopment() && (
+        <code className="selectable" style={{ wordBreak: 'break-word', margin: 'var(--padding-sm)' }}>{getErrorStack(error)}</code>
+      )}
     </Container>
   );
 };