diff --git a/README.md b/README.md index cd668056..08c4fa57 100644 --- a/README.md +++ b/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: diff --git a/package.json b/package.json index d79862fb..cce84800 100644 --- a/package.json +++ b/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": [ diff --git a/src/index.jsx b/src/index.jsx index 64480a06..844e4294 100644 --- a/src/index.jsx +++ b/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()