@geogirafe/lib-geoportal 0.6.0-1428599141 → 0.6.0-1428917543

package/package.json

@@ -5,7 +5,7 @@
     "name": "GeoGirafe PSC",
     "url": "https://doc.geomapfish.dev"
   },
-  "version": "0.6.0-1428599141",
+  "version": "0.6.0-1428917543",
   "type": "module",
   "engines": {
     "node": ">=20.0.0"
@@ -35,10 +35,12 @@
   "dependencies": {
     "buffer": "6.0.3",
     "d3": "7.9.0",
+    "error-stack-parser": "2.1.4",
     "file-saver": "2.0.5",
     "gridjs": "6.2.0",
     "lz-string": "1.5.0",
     "on-change": "5.0.1",
+    "source-map-js": "1.2.0",
     "tippy.js": "6.3.7",
     "uhtml": "4.5.9",
     "uuid": "10.0.0",
@@ -58,8 +60,8 @@
     "@geoblocks/print": "0.7.8",
     "@types/babel__generator": "7.6.8",
     "@types/d3": "7.4.3",
-    "@types/geojson": "7946.0.14",
     "@types/file-saver": "2.0.7",
+    "@types/geojson": "7946.0.14",
     "@types/proj4": "2.5.5",
     "@types/uuid": "10.0.0",
     "@typescript-eslint/eslint-plugin": "7.15.0",

package/public/about.json

@@ -1 +1 @@
-{"version":"0.6.0-1428599141", "build":"1428599141", "date":"27/08/2024"}
+{"version":"0.6.0-1428917543", "build":"1428917543", "date":"27/08/2024"}

package/tools/error/errormanager.d.ts

@@ -4,8 +4,16 @@ import StateManager from '../state/statemanager';
 declare class ErrorManager extends GirafeSingleton {
     configManager: ConfigManager;
     stateManager: StateManager;
+    private sourceMaps;
     constructor(type: string);
     private getErrorMessage;
     private listenToAllErrors;
+    private getStackTrace;
+    private pushMessage;
+    private getContextUrl;
+    private getOriginalStackTrace;
+    private loadAllSourceMaps;
+    private loadSourceMap;
+    private getNormalizedPath;
 }
 export default ErrorManager;

package/tools/error/errormanager.js

@@ -2,6 +2,9 @@ import { v4 as uuidv4 } from 'uuid';
 import GirafeSingleton from '../../base/GirafeSingleton';
 import ConfigManager from '../configuration/configmanager';
 import StateManager from '../state/statemanager';
+import ErrorStackParser from 'error-stack-parser';
+import { SourceMapConsumer } from 'source-map-js';
+import ShareManager from '../share/sharemanager';
 class ErrorManager extends GirafeSingleton {
     constructor(type) {
         super(type);
@@ -17,13 +20,25 @@ class ErrorManager extends GirafeSingleton {
             writable: true,
             value: void 0
         });
+        Object.defineProperty(this, "sourceMaps", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: {}
+        });
         this.configManager = ConfigManager.getInstance();
         this.stateManager = StateManager.getInstance();
         this.listenToAllErrors();
     }
-    getErrorMessage(title, stack) {
+    getErrorMessage(title, stack, contextUrl) {
         const description = `
-## Callstack
+## Debug Infos
+
+### Context
+
+${contextUrl}
+
+### Callstack
 
 \`\`\`
 ${stack}
@@ -36,33 +51,127 @@ ${stack}
     }
     listenToAllErrors() {
         // Listen to all uncatched errors
-        window.onerror = (_message, file, line, col, error) => {
+        window.onerror = async (_message, file, line, col, error) => {
             const title = error?.message ?? `Unknown error in ${file} at line ${line} and column ${col}.`;
-            const stack = error?.stack ?? `Unknown error in ${file} at line ${line} and column ${col}.`;
-            this.stateManager.state.infobox.elements.push({
-                id: uuidv4(),
-                text: this.getErrorMessage(title, stack),
-                type: 'error'
-            });
+            const stack = await this.getStackTrace(error);
+            this.pushMessage(title, stack);
             return false;
         };
         // Listen to all unhandled HTTPRequest rejections
-        window.addEventListener('unhandledrejection', (error) => {
-            const title = `Unhandled rejection: ${error.reason?.message}`;
-            const stack = error.reason?.stack;
-            // suppresses multiple errormessage with the same Text
-            const pending_msgs = [];
-            for (const ele of this.stateManager.state.infobox.elements) {
-                pending_msgs.push(ele.text);
+        window.addEventListener('unhandledrejection', async (event) => {
+            const error = event.reason ?? new Error('Unknown reason');
+            const title = `Unhandled rejection: ${error.message}`;
+            const stack = await this.getStackTrace(error);
+            this.pushMessage(title, stack);
+            return false;
+        });
+    }
+    async getStackTrace(error) {
+        let stack = 'Unknown stack';
+        if (error?.stack) {
+            try {
+                // NOTE REG: Specific to Vite: When running in debug mode, we do not need to calculate the original stacktrace
+                stack = import.meta.env.DEV ? error.stack : await this.getOriginalStackTrace(error);
+            }
+            catch (e) {
+                // If an error accurs during the calculation of the stacktrace, we just ignore it
+                // and return the original stacktrace. Otherwise it could lead to an infinite exception loop.
+                console.warn(e);
+                stack = error.stack;
             }
-            if (!pending_msgs.includes(this.getErrorMessage(title, stack)))
-                this.stateManager.state.infobox.elements.push({
-                    id: uuidv4(),
-                    text: this.getErrorMessage(title, stack),
-                    type: 'error'
+        }
+        return stack;
+    }
+    pushMessage(title, stack) {
+        // Add new errormessage only if not already present
+        const pendingMessages = this.stateManager.state.infobox.elements.map((ele) => ele.text);
+        const contextUrl = this.getContextUrl();
+        const errorMessage = this.getErrorMessage(title, stack, contextUrl);
+        if (!pendingMessages.includes(errorMessage)) {
+            this.stateManager.state.infobox.elements.push({
+                id: uuidv4(),
+                text: errorMessage,
+                type: 'error'
+            });
+        }
+    }
+    getContextUrl() {
+        const base = window.location.href.split('#')[0];
+        const hash = ShareManager.getInstance().getStateToShare();
+        return `${base}#${hash}`;
+    }
+    async getOriginalStackTrace(error) {
+        if (Object.keys(this.sourceMaps).length === 0) {
+            await this.loadAllSourceMaps();
+        }
+        // Map the minified stacktrace with the original one
+        const stackFrames = ErrorStackParser.parse(error);
+        const originalStackFrames = stackFrames.map((frame) => {
+            const sourceMap = this.sourceMaps[this.getNormalizedPath(frame.fileName)];
+            if (sourceMap) {
+                const originalPosition = sourceMap.originalPositionFor({
+                    line: frame.lineNumber,
+                    column: frame.columnNumber
                 });
-            return false;
+                if (originalPosition.source) {
+                    return {
+                        fileName: originalPosition.source,
+                        lineNumber: originalPosition.line,
+                        columnNumber: originalPosition.column,
+                        functionName: frame.functionName
+                    };
+                }
+            }
+            // Default : return the original frame
+            return frame;
         });
+        return originalStackFrames
+            .map((frame) => {
+            return `${frame.functionName || 'anonymous'} (${frame.fileName}:${frame.lineNumber}:${frame.columnNumber})`;
+        })
+            .join('\n');
+    }
+    async loadAllSourceMaps() {
+        const scripts = document.getElementsByTagName('script');
+        for (const script of scripts) {
+            await this.loadSourceMap(this.getNormalizedPath(script.src));
+        }
+    }
+    async loadSourceMap(jsFilename) {
+        const response = await fetch(jsFilename);
+        const content = await response.text();
+        // Load sourcemap of this specific file
+        let regex = /\/\/# sourceMappingURL=([^\s]+)/;
+        let match = RegExp(regex).exec(content);
+        if (match) {
+            const sourceMapUrl = this.getNormalizedPath(jsFilename, match[1]);
+            if (!(jsFilename in this.sourceMaps)) {
+                const sourceMapResponse = await fetch(sourceMapUrl);
+                const sourceMapContent = await sourceMapResponse.json();
+                const sourceMap = new SourceMapConsumer(sourceMapContent);
+                this.sourceMaps[jsFilename] = sourceMap;
+            }
+        }
+        else {
+            console.info('No Sourcemap found');
+        }
+        // Load sourcemaps of all other dependent bundles
+        regex = /from *"([^\s]+)"/g;
+        const matches = content.matchAll(regex);
+        for (match of matches) {
+            for (let i = 1; i < match.length; ++i) {
+                const sourceMapUrl = this.getNormalizedPath(jsFilename, match[1]);
+                await this.loadSourceMap(sourceMapUrl);
+            }
+        }
+    }
+    getNormalizedPath(initialUrl, newFilename) {
+        if (!initialUrl) {
+            throw new Error('No path to normalize');
+        }
+        const path = newFilename ? initialUrl.substring(0, initialUrl.lastIndexOf('/') + 1) + newFilename : initialUrl;
+        const url = new URL(path);
+        return url.origin + url.pathname;
     }
 }
 export default ErrorManager;

package/tools/error/errormanager.spec.js

@@ -14,11 +14,11 @@ describe('ErrorManager', () => {
     afterAll(() => {
         MockHelper.stopMocking();
     });
-    it('should listen to all uncaught errors and add error message to infobox', () => {
+    it('should listen to all uncaught errors and add error message to infobox', async () => {
         const error = new Error('Test error');
         const stack = 'Error stack trace';
         error.stack = stack;
-        window.onerror(error.message, 'testfile.js', 10, 20, error);
+        await window.onerror(error.message, 'testfile.js', 10, 20, error);
         expect(StateManager.getInstance().state.infobox.elements.length).toEqual(1);
         const element = StateManager.getInstance().state.infobox.elements[0];
         expect(element.id).toEqual('mock-uuid');
@@ -26,13 +26,13 @@ describe('ErrorManager', () => {
         expect(element.text).toContain(encodeURIComponent('Error stack trace'));
         expect(element.text).toContain(encodeURIComponent('Test error'));
     });
-    it('should listen to all unhandledrejection and add error message to infobox', () => {
+    it('should listen to all unhandledrejection and add error message to infobox', async () => {
         const reason = new Error('Unhandled rejection');
         const stack = 'Rejection stack trace';
         reason.stack = stack;
         const event = new CustomEvent('unhandledrejection', { detail: { reason } });
         Object.assign(event, { reason });
-        window.dispatchEvent(event);
+        await window.dispatchEvent(event);
         expect(StateManager.getInstance().state.infobox.elements.length).toEqual(1);
         const element = StateManager.getInstance().state.infobox.elements[0];
         expect(element.id).toEqual('mock-uuid');
@@ -40,24 +40,32 @@ describe('ErrorManager', () => {
         expect(element.text).toContain(encodeURIComponent('Rejection stack trace'));
         expect(element.text).toContain(encodeURIComponent('Unhandled rejection'));
     });
-    it('should handle unknown rejection without reason and stack', () => {
+    it('should handle unknown rejection without reason and stack', async () => {
         const event = new CustomEvent('unhandledrejection', { detail: {} });
         Object.assign(event, {});
-        window.dispatchEvent(event);
+        await window.dispatchEvent(event);
         expect(StateManager.getInstance().state.infobox.elements.length).toEqual(1);
         const element = StateManager.getInstance().state.infobox.elements[0];
         expect(element.id).toEqual('mock-uuid');
         expect(element.type).toEqual('error');
     });
-    it('should add all errors to infobox', () => {
+    it('should add all errors to infobox', async () => {
         const error = new Error('Test error');
-        window.onerror(error.message, 'testfile.js', 10, 20, error);
+        await window.onerror(error.message, 'testfile.js', 10, 20, error);
         expect(StateManager.getInstance().state.infobox.elements.length).toEqual(1);
-        window.onerror(error.message, 'testfile.js', 10, 20, error);
+        const error2 = new Error('Test error 2');
+        await window.onerror(error.message, 'testfile2.js', 10, 20, error2);
         expect(StateManager.getInstance().state.infobox.elements.length).toEqual(2);
         const event = new CustomEvent('unhandledrejection', { detail: {} });
-        Object.assign(event, {});
-        window.dispatchEvent(event);
+        Object.assign(event, { error });
+        await window.dispatchEvent(event);
         expect(StateManager.getInstance().state.infobox.elements.length).toEqual(3);
     });
+    it('should not add dupplicated errors to infobox', async () => {
+        const error = new Error('Test error');
+        await window.onerror(error.message, 'testfile.js', 10, 20, error);
+        expect(StateManager.getInstance().state.infobox.elements.length).toEqual(1);
+        await window.onerror(error.message, 'testfile.js', 10, 20, error);
+        expect(StateManager.getInstance().state.infobox.elements.length).toEqual(1);
+    });
 });