Friday, March 29

Author: Ryan Goldman

Web Tricks

How to use Error Boundaries in React 16

Have you seen these in your console? Cannot read property ‘getHostNode’ of null ? TypeError: Cannot read property ‘_currentElement’ of null ? If you maintain a React application, you know that this class of error messages can be among the most frustrating and difficult to resolve. Typical symptoms include stack traces that thread through dark regions of the React internals, devoid of hope or references to even a single line of your own code: TypeError: Cannot read property 'getHostNode' of null ? at getHostNode(~/react/lib/ReactReconciler.js:64:0) at getHostNode(~/react/lib/ReactCompositeComponent.js:383:0) ? at getHostNode(~/react/lib/ReactReconciler.js:64:0) at getHostNode(~/react/lib/ReactChildReconciler.js:114:0)? at updateChildren(~/react/lib/ReactMultiChild.js:215:0) at _...
Web Tricks

What the heck is "Script error?"

If you’ve done any work with the JavaScript onerror event before, you’ve probably come across the following: "Script error." “Script error” is what browsers send to the onerror callback when an error originates from a JavaScript file served from a different origin (different domain, port, or protocol). It’s painful because, even though there’s an error occurring, you don’t know what the error is, nor from which code it’s originating. And that’s the whole purpose of window.onerror — getting insight into uncaught errors in your application. The cause: cross-origin scripts To better understand what’s going on, consider the following example HTML document, hypothetically served from http://example.com/test: <!doctype html> <html> <head> <title>example.com/test</tit...
Web Tricks

Debug JavaScript in Production with Source Maps

  These days, the code you use to write your application isn’t usually the same code that’s deployed in production and interpreted by browsers. Perhaps you’re writing your source code in a language that “compiles” to JavaScript, like CoffeeScript, TypeScript, or the latest standards-body approved version of JavaScript, ECMAScript 2015 (ES6). Or, even more likely, you’re minifying your source code in order to reduce the file size of your deployed scripts. You’re probably using a tool like UglifyJS or Google Closure Compiler. Such transformation tools are often referred to as transpilers — tools that transform source code from one language into either the same language or another similar high-level language. Their output is transpiled code that, while functional in the target enviro...