0

React APP TypeScript, running on local host.

I have written a try...catch block and trying to show the error source (file name, method, line, etc) on the Form to be displayed whenever any child component throws an error.

In the code, the stack gives me info like below, My Custom Error Thrown at Object.execute (./static/js/bundle.js:6072:13) at onChangeHandler (./static/js/bundle.js: 1869:105) ...

when I console.log the error in chrome I get below, My Custom Error Thrown at Object.execute (ReactComp1.tsx:40:1) at onChangeHandler (ReactComp2.tsx: 38:1) ...

  1. Why am I not getting the actual file name and line# same as Chrome's Developer Console ? 1.1) notice the bundle.js instead of actual file name.
  2. Is this an issue with how the react ts app is running locally ?
  3. where to change to get the actual name and line # ?
3
  • Are you using only minified versions by any chance? Commented Jul 4, 2023 at 4:34
  • I am new to this, how to ensure its minified ? When I debug in Dev. Console then the same code is displayed as written. Commented Jul 4, 2023 at 4:40
  • since you are debugging locally shouldn't be any issue. minified will be when you package it and deploy. Commented Jul 4, 2023 at 5:42

1 Answer 1

0
  1. This is probably because typescript is transpiled to javascript when run.
  2. Most likely, no
  3. check out this post's answer
Sign up to request clarification or add additional context in comments.

2 Comments

I will explore this.. Queries related for adding this, 1) Will it impact the Production build ? any slowness ?
I don't have webpack so I am configuring in the ts.config. there were multiple articles on how to do it, and following them still does not work for me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.