backtrace-labs · adamcronin42 · Jul 20, 2023 · Jul 10, 2023 · Jul 10, 2023 · Jul 18, 2023
diff --git a/examples/sdk/react/.gitignore b/examples/sdk/react/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/examples/sdk/react/README.md b/examples/sdk/react/README.md
@@ -0,0 +1,31 @@
+## Running the Example
+
+1. Add your universe and token to the SUBMISSION_URL in src/consts.ts
+2. `npm install`
+3. `npm run serve` (this will create and serve a production build as you can't see the fallback component in
+   development)
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm run serve`
+
+Creates a production build and serves the demo app for testing purposes. The ErrorBoundary will not display the fallback
+component in development mode and that's why this command is useful.
+
+### `npm start`
+
+Runs the app in the development mode. Warning: won't be able to trigger the Fallback component for the Error Boundary
+and some toasts will display twice. \
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
diff --git a/examples/sdk/react/package-lock.json b/examples/sdk/react/package-lock.json
diff --git a/examples/sdk/react/package.json b/examples/sdk/react/package.json
@@ -0,0 +1,37 @@
+{
+    "name": "@backtrace/react-example",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@types/react": "^16.14.0",
+        "@types/react-dom": "^18.2.6",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "react-scripts": "5.0.1",
+        "react-toastify": "^9.1.3",
+        "typescript": "^4.9.5",
+        "web-vitals": "^2.1.4"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "format": "prettier --write '**/*.ts'",
+        "lint": "eslint . --ext .ts",
+        "serve": "npm run build && serve -s build"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "serve": "^14.2.0"
+    }
+}
diff --git a/examples/sdk/react/public/index.html b/examples/sdk/react/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/sdk/react/src/App.css b/examples/sdk/react/src/App.css
@@ -0,0 +1,84 @@
+.App {
+    text-align: center;
+    background-color: #d8f8e9;
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.App-header {
+    background-color: white;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-size: calc(10px + 2vmin);
+    color: black;
+    padding: 40px;
+    background-color: white;
+    width: 50%;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.action-button {
+    cursor: pointer;
+    background-color: #3ddc91;
+    padding: 12px 35px;
+    border-radius: 50px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+    width: 40%;
+    text-align: center;
+}
+
+.action-button-text {
+    color: #132322;
+    font-family: 'DM Sans', Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    font-style: normal;
+    line-height: 20px;
+    text-decoration: none;
+    display: block;
+}
+
+.card-header {
+    font-family: 'DM Sans', Arial, sans-serif;
+    font-size: 22px;
+    color: #2d2d2d;
+    text-align: center;
+    line-height: 120%;
+    margin-bottom: 24px;
+}
+
+.card-text {
+    font-family: 'DM Sans', Arial, sans-serif;
+    font-size: 18px;
+    color: #2d2d2d;
+    text-align: center;
+    line-height: 120%;
+    margin-bottom: 24px;
+}
+
+.footer {
+    width: 30%;
+    padding: 40px;
+    text-align: center;
+}
+
+.center {
+    display: block;
+    margin: 0 auto;
+}
+
+.extra-padding-bottom {
+    padding-bottom: 50px;
+}
+
+.extra-padding {
+    padding: 12px;
+}
diff --git a/examples/sdk/react/src/App.tsx b/examples/sdk/react/src/App.tsx
@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import './App.css';
+import { BacktraceClient } from '@backtrace/react';
+import { ToastContainer, toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { SUBMISSION_URL } from './consts';
+
+function App() {
+    const [clicked, setClicked] = useState(false);
+    const client = BacktraceClient.instance;
+
+    async function sendError() {
+        await client.send(new Error('Manual Test Error'));
+        toast('Error sent! Check your Backtrace console to see the error.');
+    }
+
+    async function sendMessage() {
+        await client.send('Manual Test Message');
+        toast('Message sent! Check your Backtrace console to see the message.');
+    }
+
+    async function sendMetrics() {
+        if (!client.metrics) {
+            toast.error('Metrics are unavailable');
+            return;
+        }
+        client.metrics.send();
+        toast('Metrics sent! Check your Backtrace console to see the metrics.');
+    }
+
+    if (clicked) {
+        throw new Error('Test throw to demonstrate the Backtrace Error Boundary');
+    }
+    if (SUBMISSION_URL.includes('your-universe')) {
+        toast.error('Don\'t forget to update your submission url in "./src/consts.ts" with your universe and token!');
+    }
+
+    return (
+        <div className="App">
+            <ToastContainer />
+            <div className="App-header center">
+                <img
+                    src="https://info.saucelabs.com/rs/468-XBT-687/images/SL%20logo%20horizontal%20color%2Bdark%402x.png"
+                    width={250}
+                    alt="Sauce Labs"
+                />
+                <h1 className="card-header">Welcome to the Backtrace React SDK demo!</h1>
+                <p className="card-header extra-padding-bottom">
+                    Click the button below to throw an error and demo the Error Boundary
+                </p>
+                <div className="column">
+                    <button className="action-button" onClick={() => setClicked(true)}>
+                        <span className="action-button-text">Trigger ErrorBoundary</span>
+                    </button>
+                    <button className="action-button" onClick={() => sendError()}>
+                        <span className="action-button-text">Send an error</span>
+                    </button>
+                    <button className="action-button" onClick={() => sendMessage()}>
+                        <span className="action-button-text">Send a message</span>
+                    </button>
+                    <button className="action-button" onClick={() => sendMetrics()}>
+                        <span className="action-button-text">Send metrics</span>
+                    </button>
+                </div>
+            </div>
+            <div className="footer center">
+                <div className="center">
+                    <a href="https://www.facebook.com/saucelabs">
+                        <img
+                            src="https://info.saucelabs.com/rs/468-XBT-687/images/facebook.png"
+                            height="30px"
+                            width="30"
+                            alt=""
+                        />
+                    </a>
+                    <a href="https://www.linkedin.com/company/sauce-labs/" className="extra-padding">
+                        <img
+                            src="https://info.saucelabs.com/rs/468-XBT-687/images/Linkedin.png"
+                            height="30px"
+                            width="30"
+                            alt=""
+                        />
+                    </a>
+                    <a href="http://www.twitter.com/saucelabs/">
+                        <img
+                            src="https://info.saucelabs.com/rs/468-XBT-687/images/twitter.png"
+                            height="30px"
+                            width="30"
+                            alt=""
+                        />
+                    </a>
+                </div>
+                <div>
+                    <h5>Sauce Labs</h5>
+                    <p>450 Sansome Street, 9th Floor, San Francisco, CA 94111</p>
+                    <p>Copyright © 2023 Sauce Labs. All rights reserved.</p>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default App;
diff --git a/examples/sdk/react/src/Fallback.tsx b/examples/sdk/react/src/Fallback.tsx
@@ -0,0 +1,19 @@
+import './App.css';
+
+export function Fallback() {
+    return (
+        <div className="App">
+            <div className="App-header center">
+                <img
+                    src="https://info.saucelabs.com/rs/468-XBT-687/images/SL%20logo%20horizontal%20color%2Bdark%402x.png"
+                    width={250}
+                    alt="Sauce Labs"
+                />
+                <h1 className="card-header">
+                    This is the fallback component that gets rendered after a rendering error!
+                </h1>
+                <p className="card-text">Check your Backtrace console to see the Error and Component stacks!</p>
+            </div>
+        </div>
+    );
+}
diff --git a/examples/sdk/react/src/consts.ts b/examples/sdk/react/src/consts.ts
@@ -0,0 +1,2 @@
+export const SUBMISSION_URL =
+    'https://submit.backtrace.io/your-universe/0000000000000000000000000000000000000000000000000000000000000000/json';
diff --git a/examples/sdk/react/src/index.tsx b/examples/sdk/react/src/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import { ErrorBoundary, BacktraceClient } from '@backtrace/react';
+import { Fallback } from './Fallback';
+import { SUBMISSION_URL } from './consts';
+
+BacktraceClient.initialize({
+    url: SUBMISSION_URL,
+    name: '@backtrace/react-example',
+    version: '0.0.1',
+    userAttributes: {
+        'custom-attribute': 'test',
+        'custom-annotation': {
+            prop1: true,
+            prop2: 123,
+        },
+    },
+});
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+    <React.StrictMode>
+        <ErrorBoundary fallback={<Fallback />}>
+            <App />
+        </ErrorBoundary>
+    </React.StrictMode>,
+);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export const SUBMISSION_URL =
		'https://submit.backtrace.io/your-universe/0000000000000000000000000000000000000000000000000000000000000000/json';