06 February 2019 0 comments Web development, React, JavaScript
tl;dr; You can use error instanceof window.Response to distinguish between fetch exceptions and fetch responses.
When you do something like...
const response = await fetch(URL);
...two bad things can happen.
- The XHR request fails entirely. I.e. there's not even a response with a HTTP status code.
- The response "worked" but the HTTP status code was not to your liking.
Either way, your React app needs to deal with this. Ideally in a not-too-clunky way. So here is one take on this challenge/opportunity which I hope can inspire you to extend it the way you need it to go.
The trick is to "clump" exceptions with responses. Then you can do this:
function ShowServerError({ error }) {
if (!error) {
return null;
}
return (
<div className="alert">
<h3>Server Error</h3>
{error instanceof window.Response ? (
<p>
<b>{error.status}</b> on <b>{error.url}</b>
<br />
<small>{error.statusText}</small>
</p>
) : (
<p>
<code>{error.toString()}</code>
</p>
)}
</div>
);
}
The greatest trick the devil ever pulled was to use if (error instanceof window.Reponse) {. Then you know that error thing is the outcome of THIS = await fetch(URL) (or fetch(URL).then(THIS) if you prefer). Another good trick the devil pulled was to be aware that exceptions, when asked to render in React does not naturally call its .toString() so you have to do that yourself with {error.toString()}.
This codesandbox demonstrates it quite well. (Although, at the time of writing, codesandbox will spew warnings related to testing React components in the console log. Ignore that.)
If you can't open that codesandbox, here's the gist of it:
React.useEffect(() => {
url &&
(async () => {
let response;
try {
response = await fetch(url);
} catch (ex) {
return setServerError(ex);
}
if (!response.ok) {
return setServerError(response);
}
// do something here with `await response.json()`
})(url);
}, [url]);
By the way, another important trick is to be subtle with how you put the try { and } catch(ex) {.
// DON'T DO THIS
try {
const response = await fetch(url);
if (!response.ok) {
setServerError(response);
}
// do something here with `await response.json()`
} catch (ex) {
setServerError(ex);
}
Instead...
// DO THIS
let response;
try {
response = await fetch(url);
} catch (ex) {
return setServerError(ex);
}
if (!response.ok) {
return setServerError(response);
}
// do something here with `await response.json()`
If you don't do that you risk catching other exceptions that aren't exclusively the fetch() call. Also, notice the use of return inside the catch block which will exit the function early leaving you the rest of the code (de-dented 1 level) to deal with the happy-path response object.
Be aware that the test if (!response.ok) is simplistic. It's just a shorthand for checking if the "status in the range 200 to 299, inclusive". Realistically getting a response.status === 400 isn't an "error" really. It might just be a validation error hint from a server, and likely the await response.json() will work and contain useful information. No need to throw up a toast or a flash message that the communication with the server failed.
Conclusion
The details matter. You might want to deal with exceptions entirely differently from successful responses with bad HTTP status codes. It's nevertheless important to appreciate two things:
Handle complete fetch() failures and feed your UI or your retry mechanisms.
You can, in one component distinguish between a "successful" fetch() call and thrown JavaScript exceptions.
18 January 2019 1 comment React, JavaScript
When Immer first came out I was confused. I kinda understood what I was reading but I couldn't really see what was so great about it. As always, nothing beats actual code you type yourself to experience how something works.
Here is, I believe, a great example: https://codesandbox.io/s/y2m399pw31
If you're reading this on your mobile it might be hard to see what it does. Basically, it's a very simple React app that displays a "todo list like" thing. The state (aka. this.state.tasks) is a pure JavaScript array. The React components that display the data (e.g. <List tasks={this.state.tasks}/> and <ShowItem item={item} />) are pure (i.e. extends React.PureComponent
) meaning React natively protects from re-rendering a component when the props haven't changed. So no wasted render-cycles.
What Immer does is that it helps mutate an object in a smart way. I'm sure you've heard that you're never supposed to mutate state objects (arrays are a form of mutable objects too!) and instead do things like const stuff = Object.assign({}, this.state.stuff); or const things = this.state.things.slice(0);. However, those things are shallow copies meaning any mutable objects within (i.e. nested objects) don't get the clone treatment and can thus cause problems with not re-rendering when they should.
Here's the core gist:
import React from "react";
import produce from "immer";
class App extends React.Component {
state = {
tasks: [[false, { text: "Do something", date: new Date() }]]
};
onToggleDone = (i, done) => {
// Immer
// This is what the blog post is all about...
const tasks = produce(this.state.tasks, draft => {
draft[i][0] = done;
draft[i][1].date = new Date();
});
// Pure JS
// Don't do this!
// const tasks = this.state.tasks.slice(0);
// tasks[i][0] = done;
// tasks[i][1].date = new Date();
this.setState({ tasks });
};
render() {
// appreviated, but...
return <List tasks={this.state.tasks}/>
}
}
class List extends React.PureComponent {
...
It just works. Neat!
By the way, here's a code sandbox that accomplishes the same thing but with ImmutableJS which I think is uglier. I think it's uglier because now the rendering components need to be aware that it's rendering immutable.Map objects instead.
Caveats
The cost of doing what immer.produce isn't free. It's some smart work that needs to be done. But the alternative is to deep clone the object which is going to be much slower. Immer isn't the fastest kid on the block but unlike MobX and ImmutableJS once you've done this smart stuff you're back to plain JavaScript objects.
Careful with doing something like console.log(draft) since it will raise a
TypeError in your web console. Just be aware of that or use console.log(JSON.stringify(draft)) instead.
If you know with confidence that your mutable object does not, and will not, have nested mutable objects you can use object spread, Object.assign(), or .slice(0) and save yourself the trouble of another dependency.
02 November 2018 0 comments JavaScript, React
React Hooks isn't here yet but when it comes I'll be all over that, replacing many of my classes with functions.
However, as of React 16.6 there's this awesome new React.memo() thing which is such a neat solution. Why didn't I think of that, myself, sooner?!
Anyway, one of the subtle benefits of it is that writing functions minify a lot better than classes when Babel'ifying your ES6 code.
To test that, I took one of my project's classes, which needed to be "PureComponent":
class ShowAutocompleteSuggestionSong extends React.PureComponent {
render() {
const { song } = this.props;
return (
<div className="media autocomplete-suggestion-song">
<div className="media-left">
<img
className={
song.image && song.image.preview
? 'img-rounded lazyload preview'
: 'img-rounded lazyload'
}
src={
song.image && song.image.preview
? song.image.preview
: placeholderImage
}
data-src={
song.image ? absolutifyUrl(song.image.url) : placeholderImage
}
alt={song.name}
/>
</div>
<div className="media-body">
<h5 className="artist-name">
<b>{song.name}</b>
{' by '}
<span>{song.artist.name}</span>
</h5>
{song.fragments.map((fragment, i) => {
return <p key={i} dangerouslySetInnerHTML={{ __html: fragment }} />;
})}
</div>
</div>
);
}
}
Minified it weights 1,893 bytes and looks like this:
Minified PureComponent class
When re-written with React.memo it looks like this:
const ShowAutocompleteSuggestionSong = React.memo(({ song }) => {
return (
<div className="media autocomplete-suggestion-song">
<div className="media-left">
<img
className={
song.image && song.image.preview
? 'img-rounded lazyload preview'
: 'img-rounded lazyload'
}
src={
song.image && song.image.preview
? song.image.preview
: placeholderImage
}
data-src={
song.image ? absolutifyUrl(song.image.url) : placeholderImage
}
alt={song.name}
/>
</div>
<div className="media-body">
<h5 className="artist-name">
<b>{song.name}</b>
{' by '}
<span>{song.artist.name}</span>
</h5>
{song.fragments.map((fragment, i) => {
return <p key={i} dangerouslySetInnerHTML={{ __html: fragment }} />;
})}
</div>
</div>
);
});
Minified it weights 783 bytes and looks like this:
Minified React.memo function
Highly scientific measurement. Yeah, I know. (Joking)
Perhaps it's stating the obvious but part of the ES5 code that it generates, from classes can be reused for other classes.
Anyway, it's neat and worth considering to squeeze some bytes out. And the bonus is that it gets you prepared for Hooks in React 16.7.
26 October 2018 7 comments Web development, JavaScript, React
If you're reading this, you might have thought one of two thoughts about this blog post title (or both); "Cool buzzwords!" or "Yuck! So much hyped buzzwords!"
Either way, React v16.6 came out a couple of days ago and it brings with it React.lazy: Code-Splitting with Suspense.
React.lazy is React's built-in way of lazy loading components. With Suspense
you can make that lazy loading be smart and know to render a fallback component (or JSX element) whilst waiting for that slowly loading chunk for the lazy component.
The sample code in the announcement was deliciously simple but I was curious; how does that work with react-router-dom??
Without furher ado, here's a complete demo/example. The gist is an app that has two sub-components loaded with react-router-dom:
<Router>
<div className="App">
<Switch>
<Route path="/" exact component={Home} />
<Route path="/:id" component={Post} />
</Switch>
</div>
</Router>
The idea is that the Home component will list all the blog posts and the Post component will display the full details of that blog post. In my demo, the Post component never bothers to actually do the fetching of the full details to display. It just displays the passed in ID from the react-router-dom match prop. You get the idea.
That's standard React with react-router-dom stuff. Next up, lazy loading. Basically, instead of importing the Post component, you make it lazy:
-import Post from "./post";
+const Post = React.lazy(() => import("./post"));
And here comes the magic sauce. Instead of referencing component={Post} in the <Route/> you use this badboy:
function WaitingComponent(Component) {
return props => (
<Suspense fallback={<div>Loading...</div>}>
<Component {...props} />
</Suspense>
);
}
Complete prototype
The final thing looks like this:
import React, { lazy, Suspense } from "react";
import ReactDOM from "react-dom";
import { MemoryRouter as Router, Route, Switch } from "react-router-dom";
import Home from "./home";
const Post = lazy(() => import("./post"));
function App() {
return (
<Router>
<div className="App">
<Switch>
<Route path="/" exact component={Home} />
<Route path="/:id" component={WaitingComponent(Post)} />
</Switch>
</div>
</Router>
);
}
function WaitingComponent(Component) {
return props => (
<Suspense fallback={<div>Loading...</div>}>
<Component {...props} />
</Suspense>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
(sorry about the weird syntax highlighting with the red boxes.)
And it totally works! It's hard to show this with the demo but if you don't believe me, you can download the whole codesandbox as a .zip, run yarn && yarn run build && serve -s build and then you can see it doing its magic as if this was the complete foundation of a fully working client-side app.
1. Loading the "Home" page, then click one of the links
2. Lazy loading the Post component
3. Post component lazily loaded once and for all
Bonus
One thing that can happen is that you might load the app when the Wifi is honky dory but when you eventually make a click that causes a lazy loading to actually need to go out on the Internet and download that .js file it might fail. For example, because the file has been removed from the server or your network just fails for some reason. To deal with that, simply wrap the whole <Suspense> component in an error boundary component.
See this demo which is a fork of the main demo but with error boundaries added.
In conclusion
No surprise that it works. React is pretty awesome. I just wasn't sure how it would look like with react-router-dom.
A word of warning, from the v16.6 announcement: "This feature is not yet available for server-side rendering. Suspense support will be added in a later release."
I think lazy loading isn't actually that big of a deal. It's nice that it works but how likely is it really that you have a sub-tree of components that is so big and slow that you can't just pay for it up front as part of one big fat build. If you really care about a really great web performance for those people who reach your app rarely and sporadically, the true ticket to success is server-side rendering and shipping a gzipped HTML document with all the React client-side code non-blocking rendering
so that the user can download the HTML, start reading/consuming it immediately and then whilst the user is doing that you download the rest of the .js that is going to be needed once the user clicks around. Start there.
08 October 2018 0 comments Python, React
tl;dr; Use --runInBand when running jest in CI and use --maxWorkers=3 on your laptop.
We have a test suite that covers 236 tests across 68 suites and runs mainly a bunch of enzyme rendering of React component but also some plain old JavaScript function tests. We hit a problem where tests utterly failed in CircleCI due to running out of memory. Several individual tests, before it gave up or failed, reported to take up to 45 seconds.
Turns out, jest tried to use 36 workers because the Docker OS it was running was reporting 36 CPUs.
> circleci@9e4c489cf76b:~/repo$ node
> var os = require('os')
undefined
> os.cpus().length
36
After forcibly setting --maxWorkers=2 to the jest
command, the tests passed and it took 20 seconds. Yay!
But that got me thinking, what is the ideal number of workers when I'm running the suite here on my laptop? To find out, I wrote a Python script that would wrap the call CI=true yarn run test --maxWorkers=%(WORKERS) repeatedly and report which number is ideal for my laptop.
After leaving it running for a while it spits out this result:
SORTED BY BEST TIME:
3 8.47s
4 8.59s
6 9.12s
5 9.18s
2 9.51s
7 10.14s
8 10.59s
1 13.80s
The conclusion is vague. There is some benefit to using some small number greater than 1. If you attempt a bigger number it might backfire and take longer than necessary and if you do do that your laptop is likely to crawl and cough.
Notes and conclusions
05 October 2018 0 comments Web development, JavaScript, React
UPDATE (1)
My understanding of how to generate the CSP nonces was wrong. What I initially posted was a confusion between nonces and hashes. Sorry. The blog post has been updated to use hashing.
UPDATE (2)
Shortly after publishing this I changed my mind entirely. I decided I don't want any inline scripts no matter how small. Reasons are: 1) with HTTP2 it's cheap to send another file and thus that critical precious first HTML document becomes smaller and 2) when you load it as an external you have the power to load it async if it's applicable.
Check out this new script, it's hackish but works: uninline_scripts.js
UPDATE (Oct 18, 2018)
If you use INLINE_RUNTIME_CHUNK=false yarn run build no scripts, independent of size, are inlined. See this pull request for details.
END UPDATES
I have an app that is hosted on github-pages and because I can't control Content Security Policy HTTP headers I have to do it with a <meta http-equiv="Content-Security-Policy" content="${csp}"> tag in the HTML. That's working fine and the way I do it is that I have a script that looks like this:
#!/usr/bin/env node
const fs = require("fs");
const crypto = require("crypto");
const CSP_TEMPLATE = `
default-src 'none';
connect-src 'self' kinto.workon.app peterbecom.auth0.com;
frame-src peterbecom.auth0.com;
img-src 'self' avatars2.githubusercontent.com https://*.googleusercontent.com;
script-src 'self'%SCRIPT_HASHES%;
style-src 'self' 'unsafe-inline';
font-src 'self' data:;
manifest-src 'self'
`.trim();
const htmlFile = process.argv[2];
if (!htmlFile) throw new Error("missing file argument");
let html = fs.readFileSync(htmlFile, "utf8");
let hashes = "";
let csp = CSP_TEMPLATE;
const matches = html.match(/<script>.*<\/script>/g);
if (matches) {
matches.forEach(scriptTag => {
const hash = crypto.createHash("sha256");
hash.update(scriptTag.replace(/<script>/, "").replace("</script>", ""));
const digest = hash.digest("hex");
hashes += ` 'sha256-${digest.toString("base64")}'`;
});
}
csp = csp.replace(/%SCRIPT_HASHES%/, hashes);
const metatag = `
<meta http-equiv="Content-Security-Policy" content="${csp}">
`
.replace(/\n/g, "")
.trim();
if (html.search(metatag) > -1)
throw new Error("already has CSP metatag in HTML");
const anchor = '<meta charset="utf-8">';
const newHtml = html.replace(anchor, `${anchor}${metatag}`);
fs.writeFileSync(htmlFile, newHtml, "utf8");
Laugh all you like at my hurried node scripting but it works. It finds any <script>ANYTHING</script> tags (which means it disregards any <script src="... tags), calculates a sha256 hash string out of it and then puts that into the CSP block.
The output becomes something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta
http-equiv="Content-Security-Policy"
content="default-src 'none';script-src 'self' 'sha256-bb84aa7f904e73495b9e99f08531053f3a86f3c1b2e232e3abbac252bf723f1f';">
</head>
<body>
...
<script>....</script>
</body>
</html>
I don't know if I've done it right but at least what didn't use to work now works; the page loads in my browsers now.
