Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrong stack trace in case of error in the router component #4250

Closed
slenz opened this issue Feb 20, 2024 · 0 comments
Closed

Wrong stack trace in case of error in the router component #4250

slenz opened this issue Feb 20, 2024 · 0 comments

Comments

@slenz
Copy link

slenz commented Feb 20, 2024

  • Framework7 version: 8.3.1
  • Platform and Target: all

Describe the bug

When error happens in the custom router component during the loading of the component (for example Type Error happens), then stack information of the original error is lost.
I attached the "unhandledrejection" handler to "window" and expect to get correct stack trace but stack trace started at the "component-loader.js" itself.
I have proposition how to make a workaround for this problem, please look at the patch below in the "Proposition" section.

To Reproduce

  1. Make some typing error in the some page (i call not existed function "ttt()" in the example below).
  2. Attach ("unhandledrejection" event handler to window.
window.addEventListener("unhandledrejection", function (e) {
  console.log("window.unhandledrejection", e);
};
  1. Navigate to that page.
  2. See the console log, it will show something like this. No stack of original error.
window.unhandledrejection: Error: ReferenceError: ttt is not defined
    at component-loader.js:121:17

Expected behavior

Stack with correct error location.

window.unhandledrejection: ReferenceError: ttt is not defined
    at Component.renderFunction (home.jsx:17:21)
    at Component.render (component-class.js:361:17)
    at component-class.js:173:27

Actual Behavior

Stack with incorrect error location.

window.unhandledrejection: Error: ReferenceError: ttt is not defined
    at component-loader.js:121:17

Proposition

This happens because stack is lost when error re-thrown in the modules/router/component-loader.js.
I propose to add the original error object to the new Error thrown (for example as "cause" object).
This will allow us to check for the "cause" object in the Error and get the correct stack frame in the "unhandledrejection" handler.
I propose to make small patch in the modules/router/async-component.js and modules/router/component-loader.js:

--- async-component.js.old	2024-02-05 13:28:24.000000000 +0300
+++ async-component.js	2024-02-16 12:49:17.980356045 +0300
@@ -7,7 +7,7 @@
       })
       .catch((err) => {
         reject();
-        throw new Error(err);
+        throw new Error(err, {cause: err});
       });
   }
   if (component instanceof Promise) {

--- component-loader.js.old     2024-02-05 13:28:24.000000000 +0300
+++ component-loader.js 2024-02-16 12:47:39.380287616 +0300
@@ -117,7 +117,7 @@
           })
           .catch((err) => {
             reject(err);
-            throw new Error(err);
+            throw new Error(err, {cause: err});
           });
       }
       let cachedComponent;

Then in the "unhandledrejection" handler we can check for the "cause" and it will contain the original error's stack.

window.addEventListener("unhandledrejection", function (e) {
    if (e.reason.cause) {
        console.log("window.unhandledrejection:", e.reason.cause);
    } else {
        console.log("window.unhandledrejection:", e.reason);
    }
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant