Merge pull request #719 from rollbar/wj-react-example

Add React example, with test automation
rollbar · Apr 5, 2019 · ddc2807 · ddc2807
2 parents e9b7813 + e95ae03
commit ddc2807
Show file tree

Hide file tree

Showing 13 changed files with 505 additions and 9 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -2,6 +2,8 @@ language: node_js
 dist: trusty
 node_js:
   - 8
+addons:
+  chrome: stable
 sudo: false
 install: npm install
 script: npm run test_ci
diff --git a/examples/react/.babelrc b/examples/react/.babelrc
@@ -0,0 +1,3 @@
+{
+  "presets": ["env", "react"]
+}
diff --git a/examples/react/README.md b/examples/react/README.md
@@ -0,0 +1,41 @@
+# React Rollbar Integration
+
+This project demonstrates rollbar.js in a basic React app configuration.
+
+## Rollbar configuration
+
+To send live reports to Rollbar, replace `POST_CLIENT_ITEM_TOKEN` in index.js
+with your valid client token before building your webpack bundle.
+
+## Node modules
+
+Run `npm install` to install node modules.
+
+## Build
+
+Run `npm run build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+Run `npm run start` to launch index.html in a browser.
+
+## Preparing for rollbar.js tests
+
+(For rollbar.js maintainers)
+
+Rollbar.js test automation includes tests that load and exercise this example app.
+For those tests to work, main.js must be available and up to date in ./examples/webpack/dist/.
+If the example app has changed or changes to rollbar.js need to be pulled in,
+update and commit a new main.js.
+
+```
+# Build the rollbar.js dist if needed.
+npm run build
+
+# Prepare the example's npm bundle.
+cd examples/react && npm install
+
+# Build the output files.
+npm run build
+
+# The rollbar.js dist is no longer needed, and can be reverted.
+cd ../.. && git checkout dist
+```
diff --git a/examples/react/dist/index.html b/examples/react/dist/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>React Example</title>
+</head>
+<body>
+  <section id="index"></section>
+<script type="text/javascript" src="/examples/react/dist/main.js"></script></body>
+</html>
diff --git a/examples/react/dist/main.js b/examples/react/dist/main.js
diff --git a/examples/react/package.json b/examples/react/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "react-example",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "webpack --mode development --build",
+    "start": "webpack-dev-server --mode development --open"
+  },
+  "private": true,
+  "devDependencies": {
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-react": "^6.24.1",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.3.0",
+    "webpack-dev-server": "^3.2.1"
+  },
+  "dependencies": {
+    "babel-loader": "^7.1.5",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "rollbar": "file:../.."
+  }
+}
diff --git a/examples/react/src/index.html b/examples/react/src/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>React Example</title>
+</head>
+<body>
+  <section id="index"></section>
+</body>
+</html>
diff --git a/examples/react/src/index.js b/examples/react/src/index.js
@@ -0,0 +1,42 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import Rollbar from "rollbar";
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      rollbar: new Rollbar({
+        accessToken: 'POST_CLIENT_ITEM_TOKEN',
+        captureUncaught: true,
+        captureUnhandledRejections: true,
+      })
+    };
+
+    this.logInfo = this.logInfo.bind(this);
+    this.throwError = this.throwError.bind(this);
+  }
+
+  logInfo() {
+    // Example log event using the rollbar object.
+    this.state.rollbar.info('react test log');
+  }
+
+  throwError() {
+    // Example error, which will be reported to rollbar.
+    throw new Error('react test error');
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <h1>Rollbar Example for React</h1>
+        <button id='rollbar-info' onClick={ this.logInfo }>Log Info</button>
+        <button id='throw-error' onClick={ this.throwError }>ThrowError</button>
+      </React.Fragment>
+    );
+  }
+}
+
+ReactDOM.render(<App />, document.getElementById("index"));
diff --git a/examples/react/webpack.config.js b/examples/react/webpack.config.js
@@ -0,0 +1,26 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+const htmlPlugin = new HtmlWebPackPlugin({
+  template: "./src/index.html",
+  filename: "./index.html"
+});
+
+module.exports = (_env, argv) => ({
+  output: {
+    // rollbar.js tests require modified asset path.
+    // Detect whether running JIT or building the webpack bundle.
+    publicPath: (argv.build ? '/examples/react/dist/' : '')
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader"
+        }
+      }
+    ]
+  },
+  plugins: [htmlPlugin]
+});
diff --git a/karma.conf.js b/karma.conf.js
@@ -6,15 +6,22 @@ var browserStackBrowsers = require('./browserstack.browsers');
 var defaultsPlugin = new webpack.DefinePlugin(defaults);
 
 var allBrowsers = browserStackBrowsers.filter('bs_all');
-var allBrowsersByBrowser = {};
+var allBrowsersByBrowser = {
+  // Travis needs the --no-sandbox option,
+  // so add as a custom launcher to be used as the default browser.
+  ChromeNoSandbox: {
+    base: 'ChromeHeadless',
+    flags: ['--no-sandbox']
+  }
+};
 allBrowsers.forEach(function(browser) {
   allBrowsersByBrowser[browser._alias] = browser;
 });
 
 
 module.exports = function (config) {
   config.set({
-    browsers: ['PhantomJS'],
+    browsers: ['ChromeNoSandbox'],
 
     // The Travis environment has these specified.
     // To run BrowserStack tests locally, specify the environment variables:

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -60,7 +60,7 @@
     "karma": "^4.0.1",
     "karma-browserstack-launcher": "^0.1.5",
     "karma-chai": "^0.1.0",
-    "karma-chrome-launcher": "^0.2.0",
+    "karma-chrome-launcher": "^2.2.0",
     "karma-expect": "^1.1.0",
     "karma-firefox-launcher": "^0.1.6",
     "karma-html2js-preprocessor": "^1.1.0",

diff --git a/test/examples/react.test.js b/test/examples/react.test.js
@@ -0,0 +1,72 @@
+/* globals expect */
+/* globals describe */
+/* globals it */
+/* globals sinon */
+
+describe('react app', function() {
+  this.timeout(4000);
+
+  before(function (done) {
+    // Load the HTML page.
+    document.write(window.__html__['examples/react/dist/index.html']);
+
+    // Set a timer before stubbing the XHR server, else it will interfere with
+    // scripts loaded from the HTML page.
+    setTimeout(function() {
+      // Stub the xhr interface.
+      window.server = sinon.createFakeServer();
+
+      done();
+    }, 3000);
+  });
+
+  after(function () {
+    window.server.restore();
+  });
+
+  function stubResponse(server) {
+    server.respondWith('POST', 'api/1/item',
+      [
+        200,
+        { 'Content-Type': 'application/json' },
+        '{"err": 0, "result":{ "uuid": "d4c7acef55bf4c9ea95e4fe9428a8287"}}'
+      ]
+    );
+  }
+
+  it('should send a valid log event', function(done) {
+    var server = window.server;
+
+    stubResponse(server);
+    server.requests.length = 0;
+
+    var element = document.getElementById('rollbar-info');
+    element.click();
+    server.respond();
+
+    var body = JSON.parse(server.requests[0].requestBody);
+
+    expect(body.access_token).to.eql('POST_CLIENT_ITEM_TOKEN');
+    expect(body.data.body.message.body).to.eql('react test log');
+
+    done();
+  });
+
+  it('should report uncaught error', function(done) {
+    var server = window.server;
+
+    stubResponse(server)
+    server.requests.length = 0;
+
+    var element = document.getElementById('throw-error');
+    element.click();
+    server.respond();
+
+    var body = JSON.parse(server.requests[0].requestBody);
+
+    expect(body.access_token).to.eql('POST_CLIENT_ITEM_TOKEN');
+    expect(body.data.body.trace.exception.message).to.eql('react test error');
+
+    done();
+  });
+});