feat(cli): show a meaninfull error for Penpot API error responses

packages/penpot-css-export/src/lib/api/penpot.ts

@@ -11,8 +11,23 @@ import type {
   PenpotSettings,
   FetcherOptions,
   PenpotGetPageOptions,
+  PenpotApiErrorResponse,
 } from './types'
 
+class PenpotApiError extends Error {
+  constructor(parsedError: PenpotApiErrorResponse) {
+    super(
+      `Penpot API call failed: error type "${parsedError.type}" with code "${parsedError.code}".`,
+    )
+  }
+}
+
+class PenpotApiUnknownError extends Error {
+  constructor() {
+    super('Unknown Penpot API error.')
+  }
+}
+
 export class Penpot {
   private accessToken: string
 
@@ -38,6 +53,17 @@ export class Penpot {
       `https://design.penpot.app/api/rpc/command/${command}`,
       config,
     )
+
+    if (!response.ok) {
+      const error = await response
+        .clone()
+        .json()
+        .then((parsedError) => new PenpotApiError(parsedError))
+        .catch(() => new PenpotApiUnknownError())
+
+      throw error
+    }
+
     const json = await response.json()
 
     return json as ResultType

packages/penpot-css-export/src/lib/api/types.ts

@@ -26,4 +26,9 @@ export interface PenpotPage {
   objects: Record<string, PenpotObject>
 }
 
+export interface PenpotApiErrorResponse {
+  type: string
+  code: string
+}
+
 export type PenpotComponent = PenpotObject & { objects: PenpotObject[] }