Fixing Object.assign Errors

Posted by Tyler

We use Object.assign throughout Limbo’s JavaScript. At the beginning of this post we had 28 uses of it. We use it similar to how React components work. Components have default properties and accept an object of properties to override the defaults. Most of those 28 uses look something like:

const settings = Object.assign({}, defaultProps, props);

Nothing fancy, pretty standard usage.

We compile our JS with Babel. But we don’t use the Babel polyfill. That means when we write Object.assign that code is delivered to users’ browsers as is. I did that knowing not all browsers support Object.assign. I was curious how many folks we’d see visit Limbo on unsupported browsers.

There haven’t been many. We see a Sentry error for Object doesn't support property or method 'assign' every couple days. But, this morning I decided it was bothering me enough that I’d fix it.

Options

As with most code things, there were a few different ways to avoid errors from Object.assign

1. Use the Babel polyfill. We could include the polyfill in our compiled JS and continue using Object.assign. Pros include having a polyfill for assign and other newer JS built-ins like Promise and Array.from. Cons include having even more lines of JS delivered to every Limbo user and having to set the thing up in our build process. I decided against this option.

2. Include our own polyfill for Object.assign. The MDN docs for assign provide a short ~25 line polyfill for the method for browsers without support. We could deliver that to all users and continue using Object.assign. Pros include it being targeted. It’s a polyfill for the exact issue we’re seeing and nothing more. I don’t know if there are any cons to this. It’s a good option, but not the one I went with.

3. Use jQuery’s $.extend instead. We already use jQuery on Limbo. We could switch the 28 uses of Object.assign to $.extend and get the same results. Pros include not adding anymore JS and having access to extend‘s deep option when we need it.

I decided option #3 was the way to go. We don’t lose anything by using $.extend instead of Object.assign and all that’s needed to make the change is a single find and replace.

Browsers

An interesting thing about this work was which browsers saw the issue. Over the last month we’ve seen undefined Object.assign on:

  • Chrome Mobile 44 on Android 6.0.1
  • Chrome 60 on Windows 7
  • Yandex Browser 17.9.0 on Windows 7
  • IE 7 on Windows 7

Out of those I was most surprised by the IE 7 and Yandex. IE 7 because it’s been years since I’ve looked at it and Yandex because I’d never heard of it.

Tyler Gaw

Tyler is the Co-Founder of Limbo. He works on the Product Design and designs and builds the front-end.

See all Tyler’s posts