different-ai/openwork · error

Failed to load the dashboard (${response.status}).

Error message

Failed to load the dashboard (${response.status}).

What it means

useManagedDashboard fetches a single dashboard from GET /v1/dashboards/:id and throws this error when the response is non-ok and the payload has no richer error message. The status code is interpolated so the developer can distinguish auth vs server failures.

Source

Thrown at ee/apps/den-web/app/(den)/dashboard/_components/org-dashboards-data.tsx:204

      return items.map(parseDashboard).filter((item): item is ManagedDashboard => item !== null);
    },
  });
}

export function useManagedDashboard(dashboardId: string) {
  const { orgContext } = useOrgDashboard();
  const organizationId = orgContext?.organization.id ?? "";
  return useQuery({
    enabled: Boolean(organizationId && dashboardId),
    queryKey: orgDashboardsQueryKeys.detail(organizationId, dashboardId),
    queryFn: async (): Promise<ManagedDashboard> => {
      const { response, payload } = await requestJson(
        `/v1/dashboards/${encodeURIComponent(dashboardId)}`,
        { method: "GET" },
        15000,
      );
      if (!response.ok) {
        throw new Error(getErrorMessage(payload, `Failed to load the dashboard (${response.status}).`));
      }
      const item = isRecord(payload) ? parseDashboard(payload.item) : null;
      if (!item) throw new Error("The dashboard response was invalid.");
      return item;
    },
  });
}

export function useCreateDashboard() {
  const queryClient = useQueryClient();
  const { orgContext, runReauthableAction } = useOrgDashboard();
  const organizationId = orgContext?.organization.id ?? "";
  return useMutation({
    mutationFn: async (input: { name: string }): Promise<ManagedDashboard> => {
      let created: ManagedDashboard | null = null;
      await runReauthableAction("create-dashboard", async () => {
        const { response, payload } = await requestJson(
          "/v1/dashboards",

View on GitHub (pinned to 2b7df46e8a)

Solutions

  1. Check the interpolated status: 404 → confirm the dashboard id still exists, 401 → re-sign-in, 403 → request access, 5xx → server-side investigation
  2. Refetch the dashboard list and navigate from it instead of a stale deep link
  3. Verify the dashboardId passed to useManagedDashboard is not undefined/empty after encodeURIComponent
  4. Check den-api logs if the status is 5xx
Defensive patterns

Strategy: try-catch

Validate before calling

if (!dashboardId) {
  // avoid a doomed request like /v1/dashboards/undefined
  return;
}

Try / catch

const { error } = useManagedDashboard(dashboardId);
if (error instanceof Error && error.message.includes('(404)')) {
  showNotFoundAndNavigateBack();
} else if (error) {
  showRetry(() => dashboardQuery.refetch());
}

Prevention

When it happens

Trigger: Non-2xx from GET /v1/dashboards/{id}: 401 expired session, 403 no access to that dashboard, 404 dashboard deleted or id mistyped, 5xx server error.

Common situations: Opening a bookmarked URL for a dashboard that was deleted by an admin; stale list cache pointing at a removed dashboard; insufficient org role; transient Den API outage.

Understand the failure class

Background: "API error: {status}" and "HTTP 401/403/404/429/5xx" errors: non-2xx HTTP responses explained — this error's family across 27 libraries.

Related errors


AI-assisted analysis of different-ai/openwork@2b7df46e8a (2026-09-01). Data as JSON: /api/errors/a732e5fabb91cd62. Report an issue: GitHub.