The document discusses best practices for deploying React applications in production, focusing on issues such as browser caching, runtime errors, and managing dependencies. It emphasizes the importance of cache busting and using tools like Webpack for effective bundling and version management. Additionally, it highlights the necessity of error handling and logging mechanisms, including the use of source maps for debugging.

1. REACT IN PRODUCTION
MICHAEL HABERMAN
INDEPENDENT CONSULTANT

2. Your code is Awesome
Your code has deployed
What happen when users consume it?

3. Production issues
A lot of browsers and operation systems
User don’t follow the QA’a scenarios
Extensions in browsers

4. Today’s Task
Bundling your code (webpack)
Runtime errors
Deploying your code
Review pitfalls and manage them

5. First nightmare
/index.html (get 200)
Backend Deploy new version
/index.html (get 304)

6. Requesting web app
HTTP GET requests are cached by the browser
Caching is the worst nightmare
could have no solution but time

7. Browser caching

8. Browser caching

9. Cache busting
E-tag & max-age could result inconsistent deployment
Lets assume index.html isn't cached
Cache busting:
<script src=“bundle.js?version=47/>
<script src=“bundle.fi2u3ry.js>

10. WebPack
Adding cache busting
output: {
path: __dirname + '/dist',
filename: 'bundle-[hash].js'
}

11. Cache busting
Our bundle file has hashed name
How index.html will get the right name?
assets-webpack-plugin
Inject to HTML

13. First nightmare
/index.html (get 200)
Backend Deploy new version
/index.html (get 200)

14. Webpack in production
Tip with webpack
Disable dev-tools - improve performance
Reduce size

15. Webpack in production
Specify environment
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production')
}
})

16. Webpack in production
Check if you on production mode:

17. Webpack in production
Reduce even more
Dynamic reduce (runtime)
You serving server could do that
Zip in build time (with webpack)
use compression-webpack-plugin

18. Today’s Task
Bundling the app (webpack)
Runtime errors
Deploying your app

19. Our second nightmare
You got the app with the correct version
Now it is running
But wait….

21. Handling error
Console is local
Getting reports on error
Use some tool (sentry, rollbar)

23. Our second nightmare
Sentry will provide your callstack.
What will happen to the callstack once minified?

24. Our second nightmare
Source Maps
debug: false,
devtool: 'source-map',

25. Our second nightmare
You have major bug, source map are useless
How do you reproduce?
Log user action
Store logging

26. Our second nightmare
Most React apps work with some store
You could log its changes
LogRocket

27. Today’s Task
Bundling the app (webpack)
Runtime errors
Deploying your app

28. Our third nightmare
You deployed a version to QA
QA said you are a “bug-less” developer
The code shipped to prod
And boom…. so close :-(

29. Our third nightmare
Package.json specify dependencies
It also specify versions
“package_name”:”*”
“package_name”:”^1.6.3”
“package_name”:”~1.6.3”
“package_name”:”1.6.x”
X.Y.Z
Breaking change New feature Bug fix

30. Our third nightmare
Don’t reinstall - use the same artifact / image
Harden your package.json versions

31. Today’s Task
Bundling the app (webpack)
Runtime errors
Deploying your app

32. Thank you!
michael@haberman.io
@hab_mic