エラーメッセージをわかりやすくする (#41)

* response.okがfalseの時にPromise.rejectするように変更

* コメントを追加

* テストケースを追加

Author: dc7290

src/createClient.ts

@@ -69,7 +69,23 @@ export const createClient = ({
       });
 
       if (!response.ok) {
-        throw new Error(`fetch API response status: ${response.status}`);
+        const message = await (async () => {
+          // Enclose `response.json()` in a try since it may throw an error
+          // Only return the `message` if there is a `message`
+          try {
+            const { message } = await response.json();
+            return message ?? null;
+          } catch (_) {
+            return null;
+          }
+        })();
+        return Promise.reject(
+          new Error(
+            `fetch API response status: ${response.status}${
+              message ? `\n  message is \`${message}\`` : ''
+            }`
+          )
+        );
       }
 
       if (method === 'DELETE') return;
@@ -84,9 +100,7 @@ export const createClient = ({
         throw error.response.data;
       }
 
-      return Promise.reject(
-        new Error(`serviceDomain or endpoint may be wrong.\n Details: ${error}`)
-      );
+      return Promise.reject(new Error(`Network Error.\n  Details: ${error}`));
     }
   };
 

tests/createClient.test.ts

@@ -1,4 +1,7 @@
+import { rest } from 'msw';
 import { createClient } from '../src/createClient';
+import { testBaseUrl } from './mocks/handlers';
+import { server } from './mocks/server';
 
 describe('createClient', () => {
   test('Functions is generated to request the API', () => {
@@ -41,4 +44,60 @@ describe('createClient', () => {
       createClient({ serviceDomain: 'foo', apiKey: 10 })
     ).toThrowError(new Error('parameter is not string'));
   });
+
+  describe('Throws an error when response.ok is false', () => {
+    test('If there is a message', () => {
+      server.use(
+        rest.get(`${testBaseUrl}/list-type`, async (_, res, ctx) => {
+          return res(
+            ctx.status(401),
+            ctx.json({ message: 'X-MICROCMS-KEY header is invalid.' })
+          );
+        })
+      );
+      const client = createClient({
+        serviceDomain: 'serviceDomain',
+        apiKey: 'apiKey',
+      });
+
+      expect(client.get({ endpoint: 'list-type' })).rejects.toThrowError(
+        new Error(
+          'fetch API response status: 401\n  message is `X-MICROCMS-KEY header is invalid.`'
+        )
+      );
+    });
+    test('If there is no message', () => {
+      server.use(
+        rest.get(`${testBaseUrl}/list-type`, async (_, res, ctx) => {
+          return res(ctx.status(404));
+        })
+      );
+      const client = createClient({
+        serviceDomain: 'serviceDomain',
+        apiKey: 'apiKey',
+      });
+
+      expect(client.get({ endpoint: 'list-type' })).rejects.toThrowError(
+        new Error('fetch API response status: 404')
+      );
+    });
+  });
+
+  test('Throws an error in the event of a network error.', () => {
+    server.use(
+      rest.get(`${testBaseUrl}/list-type`, async (_, res) => {
+        return res.networkError('Failed to fetch');
+      })
+    );
+    const client = createClient({
+      serviceDomain: 'serviceDomain',
+      apiKey: 'apiKey',
+    });
+
+    expect(client.get({ endpoint: 'list-type' })).rejects.toThrowError(
+      new Error(
+        'Network Error.\n  Details: FetchError: request to https://servicedomain.microcms.io/api/v1/list-type failed, reason: Failed to fetch'
+      )
+    );
+  });
 });

tests/get.test.ts

@@ -68,7 +68,7 @@ describe('get', () => {
 
     expect(client.get({ endpoint: 'list-type' })).rejects.toThrow(
       new Error(
-        'serviceDomain or endpoint may be wrong.\n Details: Error: fetch API response status: 500'
+        'fetch API response status: 500\n  message is `Internal Server Error`'
       )
     );
   });