React: Error line number in Error Boundary

Created on 7 Oct 2018 · 4Comments · Source: facebook/react

Hi,

Maybe this is a question not feature req, but I found nothing about that.

Do you want to request a feature or report a bug?
feature

What is the current behavior?
Error Boundary shows error message and stack trace.

What is the expected behavior?
Error Boundary should show error line number (same as browser console, using source map)

__Edit__: I reopened this issue (https://github.com/facebook/react/issues/13938), please upvote and follow that instead. thank you.

Source

dehghani-mehdi

👍2

Most helpful comment

@aweary it doesn't help sadly (or I could not find any way to work with plugin, I did as plugin description says but nothing changes), I already see that info in browser console, what I'm looking for is having that info via error/errorInfo params:

componentDidCatch(error, errorInfo) {}

For example I like to see XXX is not defined myCom.jsx:10:8 instead of XXX is not defined (_10: line number, 8: col number_)

dehghani-mehdi on 10 Oct 2018

👍4

All 4 comments

@dehghani-mehdi this is already possible, check out https://reactjs.org/docs/error-boundaries.html#component-stack-traces

The transform-react-jsx-source Babel plugin will give you this information in your stack traces.

Hope that helps!

aweary on 9 Oct 2018

👎1

componentDidCatch(error, errorInfo) {}

For example I like to see XXX is not defined myCom.jsx:10:8 instead of XXX is not defined (_10: line number, 8: col number_)

dehghani-mehdi on 10 Oct 2018

👍4

@dehghani-mehdi The error with complete stack trace (including line numbers) should be in the error object itself

const MyFallbackComponent = ({ componentStack, error }) => {
    const { message, stack } = error; // <- this is the stack you want
    return <div>stack</div>
};

The component stack is just to see where the component lays in the hierarchy