Merge pull request #2054 from bugsnag/gatsby-example

add gatsby example

examples/js/gatsby/.dockerignore

@@ -0,0 +1,3 @@
+node_modules
+.cache
+public

examples/js/gatsby/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+.cache/
+public
+src/gatsby-types.d.ts

examples/js/gatsby/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18
+ARG GATSBY_BUGSNAG_API_KEY
+
+WORKDIR /usr/src/app
+
+COPY package* /usr/src/app/
+RUN npm install
+
+COPY . /usr/src/app/
+RUN npm run build
+
+CMD npm run serve -- --host 0.0.0.0

examples/js/gatsby/README.md

@@ -0,0 +1,40 @@
+# Gatsby
+
+This is an example project showing how to use `@bugsnag/js` with a Gatsby application.
+
+In this example the Bugsnag notifier is only initialized in the browser using the `onClientEntry` hook. Uploading of source maps is also demonstrated using the `onCreateWebpackConfig` hook.
+
+## Usage
+
+Clone the repo and `cd` into the directory of this example:
+
+```
+git clone git@github.com:bugsnag/bugsnag-js.git --recursive
+cd bugsnag-js/examples/js/gatsby
+```
+
+Use the instructions below to run the application.
+
+Once started, it will serve a page at http://localhost:9000 with buttons that cause the app to send various errors.
+
+### With docker
+
+The project includes a `Dockerfile`. If you're familiar with docker, this is the easiest way to start the example. Otherwise, skip ahead to the [without docker](#without-docker) section.
+
+```
+docker build --build-arg GATSBY_BUGSNAG_API_KEY=YOUR_API_KEY -t bugsnag-js-example-gatsby .
+docker run -p 9000:9000 -it bugsnag-js-example-gatsby
+```
+
+__Note__: remember to replace `YOUR_API_KEY` in the command with your own!
+
+### Without docker
+
+Ensure you have a version of Node.js >=14 on your machine.
+
+```
+npm install
+GATSBY_BUGSNAG_API_KEY=YOUR_API_KEY npm start
+```
+
+__Note__: remember to replace `YOUR_API_KEY` in the command with your own!

examples/js/gatsby/gatsby-browser.js

@@ -0,0 +1,43 @@
+import Bugsnag from "@bugsnag/js"
+import React from "react"
+import BugsnagPluginReact from '@bugsnag/plugin-react'
+
+const bugsnagConfig = {
+    // env vars prefixed with `GATSBY_` are made available to the browser
+    apiKey: process.env.GATSBY_BUGSNAG_API_KEY,
+    plugins: [new BugsnagPluginReact()],
+    appVersion: '1.2.3',
+}
+
+export const onClientEntry = () => {
+    /**
+     * With `gatsby develop` wrapRootElement is called before onClientEntry and then again afterwards.
+     * However, `gatsby serve` onClientEntry is called, followed by wrapRootElement. So we need this 
+     * extra state to deal with the difference in behavior.
+     */
+    if (Bugsnag.isStarted()) {
+        return
+    }
+
+    Bugsnag.start(bugsnagConfig)
+}
+
+export const wrapRootElement = ({ element }) => {
+    if (!Bugsnag.isStarted()) {
+        Bugsnag.start(bugsnagConfig)
+    }
+
+    const ErrorBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React)
+    return (
+        <ErrorBoundary FallbackComponent={FallbackComponent}>
+            {element}
+        </ErrorBoundary>
+    )
+}
+
+const FallbackComponent = ({ clearError }) =>
+  <div>
+    <p>Inform users of an error in the component tree.
+    Use clearError to reset ErrorBoundary state and re-render child tree.</p>
+    <button onClick={clearError}>Reset</button>
+  </div>

examples/js/gatsby/gatsby-config.ts

@@ -0,0 +1,14 @@
+import type { GatsbyConfig } from "gatsby"
+
+const config: GatsbyConfig = {
+  siteMetadata: {
+    title: `Gatsby Example`,
+    siteUrl: `https://www.yourdomain.tld`,
+  },
+  // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
+  // If you use VSCode you can also use the GraphQL plugin
+  // Learn more at: https://gatsby.dev/graphql-typegen
+  graphqlTypegen: true,
+}
+
+export default config

examples/js/gatsby/gatsby-node.js

@@ -0,0 +1,19 @@
+const { BugsnagSourceMapUploaderPlugin } = require("webpack-bugsnag-plugins")
+
+exports.onCreateWebpackConfig = ({ actions }) => {
+  // Upload source maps by adding BugsnagSourceMapUploaderPlugin to the webpack configuration
+  // on production builds only
+  if (process.env.NODE_ENV === 'production') {
+    actions.setWebpackConfig({
+      plugins: [
+        new BugsnagSourceMapUploaderPlugin({
+          apiKey: process.env.GATSBY_BUGSNAG_API_KEY,
+          appVersion: '1.2.3',
+          overwrite: true,
+          // publicPath must match where the site is being served from
+          publicPath: 'http://localhost:9000/'
+        })
+      ]
+    })
+  }
+}