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 # ?
IHaveAQuestion
  • 15
  • 3

1 Answers1

0
  1. This is probably because typescript is transpiled to javascript when run.
  2. Most likely, no
  3. check out this post's answer
Jayden Ja
  • 16
  • 1
  • I will explore this.. Queries related for adding this, 1) Will it impact the Production build ? any slowness ? – IHaveAQuestion Jul 04 '23 at 04:58
  • 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. – IHaveAQuestion Jul 04 '23 at 06:04