Better error reporting, for coding peace of mind

September 29, 2016

There’s nothing quite as frustrating as getting vague errors when you’re neck deep in code. To help catch them early, we’ve introduced Inline Error Reporting — a smart feature that helps you find, correct and understand code errors.

When programming, it’s easy to forget that you’re essentially giving instructions to a machine, and an unforgiving one at that. While most code editors recognize that new layer is not the same as new Layer, they don’t explicitly show you which part of this is wrong or how to fix it. This is understandably frustrating — both beginners and expert programmers often lose hours searching for a mistake that ends up being nothing more than a mere typo.

Improved error reporting

From prior experience and in-person workshops, we know that typos are some of the most typical errors triggered. Our in-app tracking data backs this up — next to whitespaces, about 30% off all errors made are “ReferenceErrors”, meaning a variable was mistyped. Armed with all this information, we set out to build a solution.

Last September we shipped Smart Autocomplete. This feature works off a simple but dynamic logic — it understands your code as you write it and suggests the next part in context. These suggestions are provided as a helpful dropdown list and perform the added function of decreasing the probability of errors. If you’re new to coding, Autocomplete is also a powerful way to help accelerate your programming skills, even as you are building a prototype in Framer.

Today’s release takes this one step further, eliminating the need to dig for errors by highlighting the exact piece of code that is triggering it.

What’s more, if you click the error message in the bottom of the panel (or press ESC when the cursor is on the word), we display a window with a list of suitable alternatives. This looks a lot like Autocomplete and includes words that are similar to the highlighted word. You can also right-click the underlined word to get the suggestions in the context menu. This new inline error reporting, prominently displayed with red underlining and text highlighting, is designed to help you easily catch errors and fix them as you code.

Inline reporting is a step in the right direction, though we’re far from done with it. By keeping track of how you use this new feature, we’ll be able to continually add logic for catching much more advanced errors. If you have a particularly pesky error you think we should include, please let us know by emailing or posting in the community.

Also included in this release are the new iPhone 7, iPhone 7+ and Apple Watch Series 2, made by the amazing design team at Facebook. Update to find them in the dropdown of your Device toolbar in Framer.