Alex Pogiba Senior Frontend Developer

Mobx-state-tree and React-native

I’ve been working with MST & React-Native for quite a while. Not that long I was, stumbled with a particular bug that prevents me from going forward. I would like to tell my own experiences and findings. Hope it helps someone!

Let’s start

Use Pause on caught exceptions

It was a feature I guilty not using before. With React-native this little checkbox is a must if you want to find and fix your bug.

I don’t have an images on that blog, but you can’t easily find this option with little Google. Make sure it is always turned on.

Skip through obscure errors

I caught myself in two-day loop while I was trying to fix a problem that was not actually a reason on app crashing. How that can be? Turns out Raven-js makes synch calls and even have a dedicated comment section that (how sweet)

// Special case for handling JavaScript loaded into a blob. // We use a synchronous AJAX request here as a blob is already in // memory - it’s not making a network request. This will generate a warning // in the browser console, but there has already been an error so that’s not // that much of an issue.

  var xhr = new XMLHttpRequest();
  xhr.open('GET', element.url, false);
  xhr.send(null);

I was looking in a wrong direction, trying to fix this. But, after a help of my teammate, actual bug was found - it was Mobx transformation error. Which, of course is much easier to fix, then fix entire library.

Actually, there is a null check for models

Some API giving me strange results, which doesn’t coincide with a current model. I was struggling to find a real reason, until I’ve dig into a error message.

Value is not string Value is not boolean Value is not undefined Value is not number

const UserSetting = _.model('UserSetting', {
    widget: _.enumeration('SettingWidgetType', ['select', 'checkbox', 'string']),
    code: _.string,
    name: _.string,
    type: _.number,
    value: _.maybe(_.union(_.boolean, _.string, _.number)),
    choices: _.maybeNull(_.array(UserSettingChoice)),
});

If value is not all those things, then that value is? It was null! Solved by editing this line:

value: _.maybe(_.union(_.boolean, _.string, _.number)),

That’s it for today!

If you have any questions or inquiries feel free to contact me at (contact at alexpogiba.com)