Improve error handling

studio/components/interfaces/Home/ProjectList/ProjectList.tsx

@@ -66,8 +66,16 @@ const OrganizationProjects = ({
   const isEmpty = !projects || projects.length === 0
   const canReadProjects = useCheckPermissions(PermissionAction.READ, 'projects', undefined, id)
 
-  const { isLoading: isLoadingProjects, isError: isErrorProjects } = useProjectsQuery()
-  const { isLoading: _isLoadingPermissions } = usePermissionsQuery()
+  const {
+    isLoading: isLoadingProjects,
+    isError: isErrorProjects,
+    error: projectsError,
+  } = useProjectsQuery()
+  const {
+    isLoading: _isLoadingPermissions,
+    isError: isErrorPermissions,
+    error: permissionsError,
+  } = usePermissionsQuery()
   const isLoadingPermissions = IS_PLATFORM ? _isLoadingPermissions : false
 
   return (
@@ -96,9 +104,19 @@ const OrganizationProjects = ({
         </ul>
       ) : (
         <ul className="mx-auto grid grid-cols-1 gap-4 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3">
-          {isErrorProjects ? (
+          {isErrorPermissions ? (
             <div className="col-span-3">
-              <AlertError subject={`Unable to retrieve projects under ${name}`} />
+              <AlertError
+                subject="Unable to retrieve permissions for your account"
+                error={permissionsError}
+              />
+            </div>
+          ) : isErrorProjects ? (
+            <div className="col-span-3">
+              <AlertError
+                subject={`Unable to retrieve projects under ${name}`}
+                error={projectsError}
+              />
             </div>
           ) : !canReadProjects ? (
             <div className="col-span-4 space-y-4 rounded-lg border-2 border-dashed border-gray-300 py-8 px-6 text-center">

studio/components/ui/AlertError.tsx

@@ -1,19 +1,22 @@
 import Link from 'next/link'
+import { ResponseError } from 'types'
 import { Alert, Button } from 'ui'
 
 export interface AlertErrorProps {
   ref?: string
   subject?: string
+  error?: ResponseError
 }
 
 // [Joshen] To standardize the language for all error UIs
 
-const AlertError = ({ ref, subject }: AlertErrorProps) => {
+const AlertError = ({ ref, subject, error }: AlertErrorProps) => {
   const subjectString = subject?.replace(/ /g, '%20')
   let href = `/support/new?category=dashboard_bug`
 
   if (ref) href += `&ref=${ref}`
   if (subjectString) href += `&subject=${subjectString}`
+  if (error) href += `&message=Error:%20${error.message}`
 
   return (
     <Alert
@@ -30,7 +33,10 @@ const AlertError = ({ ref, subject }: AlertErrorProps) => {
         </Link>,
       ]}
     >
-      Try refreshing your browser, but if the issue persists, please reach out to us via support.
+      {error && <p className="mb-1">Error: {error.message}</p>}
+      <p>
+        Try refreshing your browser, but if the issue persists, please reach out to us via support.
+      </p>
     </Alert>
   )
 }

studio/data/permissions/permissions-query.ts

@@ -2,7 +2,7 @@ import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query
 import { get } from 'lib/common/fetch'
 import { API_URL, IS_PLATFORM } from 'lib/constants'
 import { useCallback } from 'react'
-import { Permission } from 'types'
+import { Permission, ResponseError } from 'types'
 import { permissionKeys } from './keys'
 
 export type PermissionsResponse = Permission[]
@@ -11,15 +11,13 @@ export async function getPermissions(signal?: AbortSignal) {
   const response = await get(`${API_URL}/profile/permissions`, {
     signal,
   })
-  if (response.error) {
-    throw response.error
-  }
+  if (response.error) throw response.error
 
   return response as PermissionsResponse
 }
 
 export type PermissionsData = Awaited<ReturnType<typeof getPermissions>>
-export type PermissionsError = unknown
+export type PermissionsError = ResponseError
 
 export const usePermissionsQuery = <TData = PermissionsData>(
   options: UseQueryOptions<PermissionsData, PermissionsError, TData> = {}
@@ -27,7 +25,10 @@ export const usePermissionsQuery = <TData = PermissionsData>(
   useQuery<PermissionsData, PermissionsError, TData>(
     permissionKeys.list(),
     ({ signal }) => getPermissions(signal),
-    { ...options, enabled: IS_PLATFORM && options.enabled }
+    {
+      ...options,
+      enabled: IS_PLATFORM && options.enabled,
+    }
   )
 
 export const usePermissionsPrefetch = () => {

studio/data/projects/projects-query.ts

@@ -3,7 +3,7 @@ import { useCallback, useRef } from 'react'
 
 import { get } from 'lib/common/fetch'
 import { API_URL } from 'lib/constants'
-import { Project } from 'types'
+import { Project, ResponseError } from 'types'
 import { projectKeys } from './keys'
 
 export type ProjectsVariables = {
@@ -17,7 +17,7 @@ export async function getProjects(signal?: AbortSignal) {
 }
 
 export type ProjectsData = Awaited<ReturnType<typeof getProjects>>
-export type ProjectsError = unknown
+export type ProjectsError = ResponseError
 
 export const useProjectsQuery = <TData = ProjectsData>({
   enabled = true,

studio/pages/org/[slug]/apps.tsx

@@ -1,30 +1,30 @@
-import { useRouter } from 'next/router'
 import { observer } from 'mobx-react-lite'
+import { useRouter } from 'next/router'
 import { Tabs } from 'ui'
 
-import { NextPageWithLayout } from 'types'
-import { useStore } from 'hooks'
 import { useParams } from 'common/hooks'
-import Loading from 'components/ui/Loading'
-import { OrganizationLayout } from 'components/layouts'
 import { OAuthApps } from 'components/interfaces/Organization'
+import { OrganizationLayout } from 'components/layouts'
+import Loading from 'components/ui/Loading'
+import { usePermissionsQuery } from 'data/permissions/permissions-query'
+import { useSelectedOrganization } from 'hooks'
+import { NextPageWithLayout } from 'types'
 
 const OrgOAuthApps: NextPageWithLayout = () => {
-  const { ui } = useStore()
   const { slug } = useParams()
   const router = useRouter()
+  const selectedOrganization = useSelectedOrganization()
+  const { isLoading: isLoadingPermissions } = usePermissionsQuery()
 
   return (
     <>
-      {ui.selectedOrganization === undefined && (ui?.permissions ?? []).length === 0 ? (
+      {selectedOrganization === undefined && isLoadingPermissions ? (
         <Loading />
       ) : (
         <div className="p-4 pt-0">
           <div className="space-y-3">
             <section className="mt-4">
-              <h1 className="text-3xl">
-                {ui.selectedOrganization?.name ?? 'Organization'} settings
-              </h1>
+              <h1 className="text-3xl">{selectedOrganization?.name ?? 'Organization'} settings</h1>
             </section>
             <nav>
               <Tabs

studio/types/base.ts

@@ -79,10 +79,6 @@ export interface Permission {
   resources: string[]
 }
 
-export interface ResponseError {
-  message: string
-}
-
 export interface ResponseFailure {
   error: ResponseError
 }