react-error-overlay fails to parse typescript errors

[kaykayehnn]

Is this a bug report?

yes

Which terms did you search for in User Guide?

react-error-overlay

Environment

Environment

System:
OS: macOS 10.14.5
CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz
Binaries:
Node: 12.2.0 - /usr/local/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Browsers:
Chrome: 74.0.3729.157
Firefox: 66.0.5
Safari: 12.1.1
npmPackages:
react: ^16.8.6 => 16.8.6
react-dom: ^16.8.6 => 16.8.6
react-scripts: 3.0.1 => 3.0.1
npmGlobalPackages:
create-react-app: 3.0.0

Steps to Reproduce

In a create-react-app typescript project:

1. Start the development server
2. Make a typescript error in any file (let a: string = 0 for example).
3. The error overlay displays the error, however clicking on the exception does not navigate to the file in the text editor as with other webpack errors.

Expected Behavior

Clicking on the error overlay navigates to the file in a text editor.

Actual Behavior

The error overlay isn't clickable.

Details

React-error-overlay tries parsing the exception by looking for a filepath in the error message. This is handled in parseCompileError.js, where the filepath regex matches only relative paths:

const filePathRegex = /^\.(\/[^/\n ]+)+\.[^/\n ]+$/;

whereas typescript errors use absolute paths. As discussed in #6502 (comment) making the paths relative has some drawbacks so it would be best to keep them absolute.
Also TS error locations are specified like (line,colon) so we would need to add that format to the lineNumberRegexes array.

I can submit a PR for this if that's okay.

[heyimalex]

Sounds good to me!

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[stale]

This issue has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.