Merge pull request #30 from piyook/feat/add-logging

Feat(): add api request logging functionality

Author: piyook

.dockerignore

@@ -1,6 +1,5 @@
 **/.classpath
 **/.dockerignore
-**/.env
 **/.git
 **/.gitignore
 **/.project

.env

@@ -1,3 +1,5 @@
 PROJECT_NAME=mock-api-framework
 SERVER_PORT=8000
-USE_API_URL_PREFIX=api
+USE_API_URL_PREFIX=api
+LOG_REQUESTS=ON
+DELETE_LOGS_ON_SERVER_RESTART=ON

.gitignore

@@ -1,4 +1,4 @@
 node_modules
 *.log
 screenshots/
-videos/
+videos/

README.md

@@ -23,6 +23,7 @@ The framework is written in TypeScript and can :
 - Serve persisted mock data to the database
 - Perform CRUD operations on the local database via a REST endpoint
 - Mock API error codes/messages for testing frontend error handling logic
+- Log and store API requests in JSON format and display information on the localhost:8000/logs route
 
 ## Set-up
 
@@ -64,7 +65,7 @@ A list of all endpoints can be viewed on http://localhost:8000/.
 
 The project has been set-up with demo endpoints that can be removed or modified as needed.
 
-![alt text](image.png)
+![main server page](image.png)
 
 ### Useful Commands
 
@@ -297,6 +298,48 @@ this will return a 500 error code and the JSON response below:
 
 ```
 
+## Logging
+
+API request information and sent data can be logged and stored as JSON in the /src/logs/ folder.
+
+Logs can be viewed at **localhost:8000/logs**.
+
+![logging](logs.png)
+
+### Set-up
+
+To enable logging set the environment variables below in the .env
+
+```js
+LOG_REQUESTS = ON;
+DELETE_LOGS_ON_SERVER_RESTART = ON;
+```
+
+You can choose to refresh the logfile every time the server restarts or persist the data by setting the DELETE_LOGS_ON_SERVER_RESTART variable.
+
+To set up logging for a route, add the following to the api.ts file in the relevant handler, adjusting the request type (GET/POST/PUT/DELETE) and passing data to be logged as required:
+
+```js
+import logger from '../../utilities/logger';
+
+function handler(pathName: string) {
+    return [
+         http.get(`/${pathName}`, ({ request }) => {
+
+            ...
+                    logger({
+                            data: { <- extracted request body or query params data here -> },
+                            pathName,
+                            type: 'GET',
+                            });
+            ...
+         }),
+    ]
+}
+```
+
+**See the src/api/bikes api.ts file for an example of logging set up.**
+
 ## Customisation
 
 ### Changing api url prefix

cypress/e2e/log-page-spec.cy.ts

@@ -0,0 +1,41 @@
+describe('logging works expected information', () => {
+    it('log page works', () => {
+        cy.visit('/logs');
+        cy.get('h2').contains('API Requests Made');
+
+        cy.get('h3').contains(
+            'File can be viewed in /src/logs folder in container or local machine',
+        );
+        cy.get('h5').contains(
+            "LOG_REQUESTS env var must be set to 'ON' to log requests",
+        );
+    });
+
+    it('logging GET request works', () => {
+        cy.request('/api/bikes?type=ducati');
+        cy.visit('/logs');
+        cy.get('.json-container').should('exist');
+        cy.get('.json-container').contains('api/bikes');
+        cy.get('.json-container').contains('ducati');
+        cy.get('.json-container').contains('GET');
+    });
+
+    it('logging POST request works', () => {
+        cy.request('POST', '/api/bikes', {
+            name: 'kawasaki ninja',
+            type: 'kawasaki',
+            year: 2023,
+            color: 'red',
+            price: 20000,
+        });
+        cy.visit('/logs');
+        cy.get('.json-container').should('exist');
+        cy.get('.json-container').contains('api/bikes');
+        cy.get('.json-container').contains('kawasaki ninja');
+        cy.get('.json-container').contains('kawasaki');
+        cy.get('.json-container').contains('2023');
+        cy.get('.json-container').contains('red');
+        cy.get('.json-container').contains('20000');
+        cy.get('.json-container').contains('POST');
+    });
+});

logs.png

@@ -29,6 +29,7 @@
         "highlight.js": "^11.11.1",
         "markdown-it": "^14.1.0",
         "msw": "^2.7.4",
+        "pretty-print-json": "^3.0.4",
         "tsx": "^4.19.3",
         "typescript": "^5.8.3",
         "zod": "^3.24.2"

package-lock.json

@@ -1,4 +1,5 @@
 import { http, HttpResponse } from 'msw';
+import logger from '../../utilities/logger';
 
 // Add any http handler here (get, push , delete etc., and middleware as needed)
 
@@ -9,13 +10,29 @@ function handler(pathName: string) {
             const type = url.searchParams.get('type');
             console.log(`starting ${pathName}`);
             console.log('Item Type is', type);
+
+            // Log the request passing the request data, pathName and request type to the logger function
+            logger({
+                data: { type },
+                pathName,
+                type: 'GET',
+            });
+
             return HttpResponse.json({
                 response: `this is a GET test response from ${pathName} for bike type: ${type ?? 'none'}`,
             });
         }),
         http.post(`/${pathName}`, async ({ request }) => {
             // Get Body Data using json(), text() or formData() depending on what is sent
             const bodyData = await request.json();
+
+            // Log the request passing the request data, pathName and extra information to the logger function
+            logger({
+                data: bodyData,
+                type: 'POST',
+                pathName,
+            });
+
             return HttpResponse.json({
                 response: `this is a POST test response from ${pathName} with bodyData ${JSON.stringify(bodyData)}`,
             });