Add bugsnag config to DS and handle toast arg error

.gitignore

@@ -21,6 +21,7 @@ lib
 .env.test.local
 .env.production.local
 .npmrc
+.env
 
 # Ignore Jetbrains IDE settings
 /.idea

jest.config.js

@@ -80,6 +80,7 @@ module.exports = {
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|mdx)$": "<rootDir>/spec/__mocks__/fileMock.js",
     '\\.(?:(?!variables).)+.(css|less|scss)$': '<rootDir>/spec/__mocks__/styleMock.js',
     '^src/([^\\.]*)$': "<rootDir>/src/$1",
+    '@bugsnag/js': '@bugsnag/browser',
   },
 
   // An array of regexp pattern strings, matched against all module paths before considered 'visible' to the module loader

package.json

@@ -2,6 +2,9 @@
   "name": "@user-interviews/ui-design-system",
   "version": "1.40.0",
   "dependencies": {
+    "@bugsnag/js": "^6.0.0",
+    "@bugsnag/plugin-react": "^6.0.0",
+    "dotenv": "^16.0.3",
     "react-bootstrap": "^2.5.0",
     "react-loading-skeleton": "^3.1.0",
     "react-router-dom": "^5.2.0",

src/Toast/useToast.js

@@ -1,5 +1,6 @@
 import { useCallback, useReducer } from 'react';
 import { v4 as generateUUID } from 'uuid';
+import { bugsnagClient } from '../bugsnag';
 
 const createMessage = (
   type,
@@ -48,18 +49,24 @@ const useToast = (initialMessages = []) => {
     dispatch({ type: ACTIONS.CLEAR_MESSAGES });
   }, []);
 
-  const setMessage = useCallback(({
-    action,
-    type,
-    message,
-    title,
-  }) => {
-    dispatch({
- type: ACTIONS.SET_MESSAGE,
-payload: {
- action, type, message, title,
-},
-});
+  const setMessage = useCallback((options) => {
+    if ((options && typeof options === 'string')) {
+      bugsnagClient.notify(new Error('Toast component argument error, expecting single formatted object'));
+    } else {
+      const {
+        action,
+        type,
+        message,
+        title,
+      } = options;
+
+      dispatch({
+        type: ACTIONS.SET_MESSAGE,
+        payload: {
+        action, type, message, title,
+        },
+      });
+    }
   }, []);
 
   const dismissMessage = useCallback((messageId) => {

src/bugsnag.js

@@ -0,0 +1,15 @@
+import bugsnag from '@bugsnag/js';
+import bugsnagReact from '@bugsnag/plugin-react';
+import react from 'react';
+
+import * as dotenv from 'dotenv';
+
+dotenv.config();
+
+const bugsnagClient = bugsnag({
+  apiKey: process.env.BUGSNAG_API_KEY_JS,
+});
+
+bugsnagClient.use(bugsnagReact, react);
+
+export { bugsnagClient };

src/index.js

@@ -82,6 +82,7 @@ import {
 } from 'src/Toast';
 import { ToggleInput } from 'src/ToggleInput';
 import Tooltip from 'src/Tooltip';
+import { bugsnagClient } from './bugsnag';
 
 export {
   Accordion,
@@ -92,6 +93,7 @@ export {
   Avatar,
   AsyncSelect,
   AsyncCreatableSelect,
+  bugsnagClient,
   Button,
   BUTTON_GROUP_ORIENTATIONS,
   Card,