Tips on better stack traces with the official/preview React package?

help
1

What techniques are people using to debug React? I’m using the official react preview and I frequently get opaque error traces like:

1540×556 168 KB

It turns out in this case that I was passing undefined to a function that was expecting a string. I have check on that function but still the error wasn’t descriptive.

If I wrap the code where I think the error is in a try...catch then I can log a proper error e.g.

try {
  let url = new URLParser(this.props.alert.url);
} catch (e) {
  console.log(e)
}

Which logs something like:

M…r.m…e.errorClass {message: "Match error: Expected string, got undefined", path: "", sanitizedError: M…r.m…e.errorClass, errorType: "Match.Error"}

It’s not always obvious where to wrap though. Any tips?!

2

From what package is the browser-source-map-support.js?

3

Looks like Velocity:

704×324 85.7 KB
or

FWIW I’m running the meteor server with VELOCITY=0 but I still have it installed.

4

And if I remove velocity…

ReferenceError: fdsfA is not defined
    at AlertForm.render (AlertForm.jsx:51)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (react.browserify.js?345ed1d2c9fb8e823a80b4ddddc390a5a28d2b87:7365)
    at ReactCompositeComponentMixin._renderValidatedComponent (react.browserify.js?345ed1d2c9fb8e823a80b4ddddc390a5a28d2b87:7392)
    <snip>
5

Do you have any idea where the <snip> is coming from?

6

Nevermind. I think the source-map-support requests the source map that doesn’t exist and Meteor then return HTML.

7

Ah, sorry. That’s just me truncating the stack trace. It’s not in the console.

8

I cannot reproduce it.

I cloned https://github.com/meteor/simple-todos-react and added sanjo:jasmine with meteor add sanjo:jasmine. Then I added adas.fdsfA() to the render function in App.jsx. The error shows correctly in the browser (latest Chrome).

It would be great if you could give the steps to reproduce the problem. Then I will fix it.

9

Sure, thanks for the input. I’ll try to make a minimalist example and throw it on Github.