fix build via npm run build without configured sourcemap upload (#101)

* backtrace: remove yolo URL from initialize

* backtrace: move backtrace-js run to separate command

* update README with Backtrace integration docs

---------

Co-authored-by: Sebastian Alex <[email protected]>

README.md

@@ -27,6 +27,25 @@ we recommend installing [NVM](https://github.com/creationix/nvm) to assist manag
 
         npm install
 
+### Error reporting with Backtrace
+To set up error reporting with your Backtrace instance:
+
+1. Open `src/index.jsx` file and find the `BacktraceClient.initialize` function call:
+    ```tsx
+    BacktraceClient.initialize({
+        name: 'Swag Store',
+        version: '3.0.0',
+        url: 'https://submit.backtrace.io/UNIVERSE/TOKEN/json',
+        userAttributes: () => ({
+            user: currentUser(),
+            shoppingCart: ShoppingCart.getCartContents()
+        })
+    })
+    ```
+1. Replace `UNIVERSE` and `TOKEN` in `url` with your universe and token. 
+
+For more details, [see the docs about React integration with Backtrace](https://docs.saucelabs.com/error-reporting/language-integrations/react/).
+
 ### Build
 1. Build the application with
 
@@ -36,6 +55,26 @@ we recommend installing [NVM](https://github.com/creationix/nvm) to assist manag
 
 1. Click around - this is the app!
 
+### Sourcemaps in error reporting with Backtrace
+To enable additional insight in Backtrace, you can send built sourcemaps and sources to Backtrace:
+1. Open `.backtracejsrc` file
+1. Replace `UNIVERSE` and `TOKEN` in `upload.url` with your universe and token.
+1. Build the application with
+
+        npm run build
+
+1. Run `backtrace-js`
+
+        npm run backtrace.sourcemaps
+
+1. Host the app using e.g. `http-server` (sourcemaps integration won't work with `npm run start`)
+
+        npx http-server -p 3000 ./build
+
+1. New uploaded errors should display with sourcemaps attached!
+
+For more details, [see the docs about sourcemap integration with Backtrace](https://docs.saucelabs.com/error-reporting/platform-integrations/source-map/).
+
 ### Storybook
 This website uses components which can be tested with Storybook. To run Storybook execute the following command:
 

package.json

@@ -54,7 +54,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "build": "react-scripts build && backtrace-js run",
+    "build": "react-scripts build",
     "test": "react-scripts test",
     "test.coverage": "react-scripts test --coverage --watchAll=false",
     "test.coverage.watch": "react-scripts test --coverage --watchAll",
@@ -68,7 +68,8 @@
     "test.storybook.mobile": "screener-storybook --conf test/visual/storybook/mobile.config.js",
     "storybook": "start-storybook -p 6006 -s public",
     "build.storybook": "build-storybook -s public",
-    "postbuild.storybook": "cd scripts && ./postbuild.sh"
+    "postbuild.storybook": "cd scripts && ./postbuild.sh",
+    "backtrace.sourcemaps": "backtrace-js run"
   },
   "browserslist": {
     "production": [

src/index.jsx

@@ -25,7 +25,7 @@ import { ShoppingCart } from './utils/shopping-cart';
 BacktraceClient.initialize({
   name: 'Swag Store',
   version: '3.0.0',
-  url: 'https://submit.backtrace.io/yolo/ebc14541a963ceeabccbe5ef6b8b01d12c788a7a71832e19f6f6ffe30087299c/json',
+  url: 'https://submit.backtrace.io/UNIVERSE/TOKEN/json',
   userAttributes: () => ({
     user: currentUser(),
     shoppingCart: ShoppingCart.getCartContents()