@akc42/app-utils 3.2.0 → 3.3.0

package/config-promise.js

@@ -20,12 +20,12 @@
 
 let configPromise;
 
-export function mockConfig(promise) {
-  configPromise = promise;
+export function setConfig(promise) {
+  configPromise = promise; //set to undefined to allow config call to request from server again.
 }
 
 async function config() {
-  if (configPromise === undefined) {
+  if (typeof configPromise === 'undefined') {
     let resolved = false;
     let resolver;
     configPromise = new Promise(accept => resolver = accept);

package/debug.js

@@ -21,7 +21,7 @@
 /*
   The purpose of this module is to provide a debugable capability which can be
   dynamically switched on and off browser by setting a key in the config
-  returned by the server. It will post request to '/api/log' url with
+  returned by the server. It will post request to '/api/debuglog' url with
   application/json body part containing message, topic and gap, where message is
   the concatenation of the debug parameters separated by space, topic is the
   topic of this debug message and gap is the number of milliseconds since the
@@ -41,31 +41,89 @@
 
   debug(..messages) //messages will be concatenated by space
 
-  the debug function will only log the message if config.debug (see
-  config-promise) is set to a string which is a comma separated list of topics
+  the debug function will only log the message on the server if config.debug (see
+  config-promise) is set to a string which is a colon separated list of topics
   and that list has the topic for this debug call in it.
 
   NOTE: It is normally expected for the server to provide a mechanism to update
-  the config before it is returned and for the client to be restarted to enable
-  the appropriate debug topics, an alternative could be for client side function
-  to use the `mockConfig` call to replace the promise with one which contained a
-  different list of topics. debug checks the list of topics on every call so
-  would dynamically pick up the changes
+  the config before it is returned,  However an alternative approach would be to 
+  specifically overwrite sessionStorage 'debug' item with a new list of topics when you want
+  debug to switch on and off dynamically.
+
+  regardless of whether the message is logged on the server, it is also added to the performance.mark buffer
+  so that it can be sent to the server on a crash.
+
+  Although Debug is the default export this module also provides the following named exports
+  
+  initialiseDebug - this function is used to manage tracing of debug messages regardless of whether the topic is set
+    It also adds an event handler to handle resource buffer full events.  NOTE if the buffer fills up priority is given
+  
+  unloadDebug - this function tidies up and reverses the initialiseDebug
+
+  debugDump - perform a dump to the server (and and a clearing out of the buffered info) of the debug calls made to date
 
 */
 import config from './config-promise.js';
 
+const BUFFER_SIZE = 50;
+const KEY_TOPIC = 'key'; //topic name which will get kept from a full resource buffer when we empty it.
+let buffer = []; //buffer of up to 50 topic/message pairs to allow us to hold some if resource buffer becomes full;
+
 const topicMap = new Map();
 
+let initialised = false;
+
+function bufferFull() {
+  const entries = performance.getEntriesByType('mark');
+  performance.clearMarks();
+  if (entries.length > BUFFER_SIZE) {
+    let i = 0;
+    buffer = entries.filter((entry) => {
+      if (entry.name !== KEY_TOPIC) i++; //don't count critical topics in our 
+      return i <= BUFFER_SIZE || entry.name === KEY_TOPIC;
+    }).map(entry => ({ topic: entry.name, message: entry.detail, time: Math.round(entry.startTime) }));
+  } else {
+    const len = buffer.length;
+    if ((len + entries.length) > BUFFER_SIZE) {
+      buffer.splice(0, len + entries.length - BUFFER_SIZE); //get rid of the head entries that would cause overflow
+    }
+    buffer = buffer.concat(entries.map(entry => ({ topic: entry.name, message: entry.detail, time: Math.round(entry.startTime) })))
+  }
+
+}
+
+function initialiseDebug() {
+  initialised = true;
+  buffer = [];
+  performance.setResourceTimingBufferSize(150)
+  window.addEventListener('resourcetimingbufferfull', bufferFull)
+}
+
+function unloadDebug() {
+  window.removeEventListener('resourcetimingbufferfull', bufferFull);
+}
+function debugDump() {
+  bufferFull();  //this clears out the marks and gives us a buffer to now send to
+  buffer.reverse();
+  for (let i = 0; i < buffer.length; i++) {
+    const blob = new Blob([JSON.stringify({
+      message: buffer[i].message,
+      gap: i < buffer.length - 1 ? buffer[i].time - buffer[i + 1].time : 0
+    })], { type: 'application/json' });
+    navigator.sendBeacon(`/api/debuglog/${buffer[i].topic}`, blob);
+  }
+  buffer = []; //we will start our buffer from scratch again
+
+}
 
 
-function Debug (t) {
+function Debug(t) {
   if (typeof t !== 'string' || t.length === 0 || !/^[a-zA-Z]+$/.test(t)) {
     console.error('Debug requires topic which is a non zero length string of only letters', t, 'Received');
     throw new Error('Invalid Debug Topic');
   }
-  const tl = t.toLowerCase(); 
-  if (topicMap.has(tl) ) {
+  const tl = t.toLowerCase();
+  if (topicMap.has(tl)) {
     const topic = topicMap.get(tl);
     return topic.debug;
   }
@@ -74,30 +132,30 @@ function Debug (t) {
     topic: tl,
     timestamp: new Date().getTime(),
     defined: false, //has the config been defined yet
-    enabled: false, //is this topic enabled
     debug: async function (...args) {
       //do time calc before potential delay to see if we are enabled
       const now = new Date().getTime();
       const gap = now - this.timestamp;
       this.timestamp = now;
+      const message = args.reduce((cum, arg) => {
+        return `${cum} ${arg}`.trim();
+      }, '');
+      if (initialised) performance.mark(this.topic, { detail: message });  //save our message locally regardless of if enabled
       if (!this.defined) {
-        await config(); 
+        await config();
         this.defined = true;
-        const debugConf = sessionStorage.getItem('debug');
-        if (debugConf) {
-          const topics = debugConf.split(':');
-          if (topics.includes(this.topic)) this.enabled = true;
-        }
       }
-      if (this.enabled) {
-        const message = args.reduce((cum, arg) => {
-          return `${cum} ${arg}`.trim();
-        }, '');
-        console.log(`+${gap}ms`, this.topic, message);
+      let enabled = false;
+      const debugConf = sessionStorage.getItem('debug');
+      if (debugConf) {
+        const topics = debugConf.split(':');
+        if (topics.includes(this.topic)) enabled = true;
+      }
+      if (enabled) {
         const blob = new Blob([JSON.stringify({
           message: message,
           gap: gap
-        })], { type: 'application/json' })
+        })], { type: 'application/json' });
 
         navigator.sendBeacon(`/api/debuglog/${this.topic}`, blob);
       }
@@ -108,4 +166,4 @@ function Debug (t) {
   return topicHandler.debug
 }
 
-export default Debug;
+export { Debug as default, initialiseDebug, unloadDebug, debugDump };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akc42/app-utils",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "General Utilities for SPAs",
   "exports": {
     ".": "./*.js"

package/post-api.js

@@ -47,8 +47,10 @@ export default async function api(url, params, blob, signal) {
       return {};
     }
   } catch (err) {
-    if (err.type === 'api-error') throw err; //just throw whatever error we had
-    //we failed to parse the json - the actual code should be in the text near the end;
-    throw new CustomEvent('api-error', { composed: true, bubbles: true, detail: parseInt((text?? '---502---').substr(-6, 3), 10) });
+    if (!options.signal || !options.signal.aborted) {
+      if (err.type === 'api-error') throw err; //just throw whatever error we had
+      //we failed to parse the json - the actual code should be in the text near the end;
+      throw new CustomEvent('api-error', { composed: true, bubbles: true, detail: parseInt((text?? '---502---').slice(-6, -3), 10) });
+    }
   }
 }