studiokit-scaffolding-js 4.12.0 → 4.12.1-alpha.2

package/lib/components/ErrorBoundary.d.ts

@@ -1,11 +1,8 @@
-import { ErrorInfo, PureComponent } from 'react';
-interface ErrorBoundaryState {
-    error?: Error;
-    errorInfo?: ErrorInfo;
+import * as Sentry from '@sentry/react';
+import { FunctionComponent } from 'react';
+export interface ShowReportDialogButtonProps {
+    eventId: string;
+    className?: string;
 }
-export default class ErrorBoundary extends PureComponent<{}, ErrorBoundaryState> {
-    constructor(props: {});
-    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
-    render(): {} | null | undefined;
-}
-export {};
+export declare const ShowReportDialogButton: FunctionComponent<ShowReportDialogButtonProps>;
+export declare const ErrorBoundary: FunctionComponent<Sentry.ErrorBoundaryProps>;

package/lib/components/ErrorBoundary.js

@@ -1,17 +1,15 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-})();
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -31,44 +29,73 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = exports.ShowReportDialogButton = void 0;
+var Button_1 = __importDefault(require("@material-ui/core/Button"));
+var BugReport_1 = __importDefault(require("@material-ui/icons/BugReport"));
+var Refresh_1 = __importDefault(require("@material-ui/icons/Refresh"));
 var Sentry = __importStar(require("@sentry/react"));
 var react_1 = __importStar(require("react"));
 var react_bootstrap_1 = require("react-bootstrap");
-var ErrorBoundary = /** @class */ (function (_super) {
-    __extends(ErrorBoundary, _super);
-    function ErrorBoundary(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = { error: undefined, errorInfo: undefined };
-        return _this;
-    }
-    ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
-        // Catch errors in any components below and re-render with error message
-        this.setState({
-            error: error,
-            errorInfo: errorInfo
+var react_redux_1 = require("react-redux");
+var user_1 = require("../utils/user");
+var ShowReportDialogButton = function (_a) {
+    var className = _a.className, eventId = _a.eventId;
+    var userInfo = react_redux_1.useSelector(function (state) {
+        var _a;
+        return (_a = state.models.user) === null || _a === void 0 ? void 0 : _a.userInfo;
+    });
+    var showDialog = react_1.useCallback(function () {
+        var user = userInfo
+            ? { name: user_1.displayName(userInfo) || undefined, email: userInfo.email || undefined }
+            : undefined;
+        Sentry.showReportDialog({
+            eventId: eventId,
+            user: user
         });
-        // You can also log error messages to an error reporting service here
-        Sentry.captureException(new Error(error.toString()));
-    };
-    ErrorBoundary.prototype.render = function () {
-        if (!!this.state.error && !!this.state.errorInfo) {
-            return (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(react_bootstrap_1.Container, { className: "mt3" },
-                    react_1.default.createElement(react_bootstrap_1.Row, null,
-                        react_1.default.createElement(react_bootstrap_1.Col, { md: 8 },
-                            react_1.default.createElement("h2", null, "Oops! Something went wrong while processing your request."),
-                            react_1.default.createElement("p", null,
-                                "Please refresh the page and try again. If you have any questions or concerns please contact us at ",
-                                react_1.default.createElement("a", { href: "mailto:tlt@purdue.edu" }, "tlt@purdue.edu")),
-                            react_1.default.createElement("details", { className: "pre-wrap" },
-                                this.state.error.toString(),
-                                react_1.default.createElement("br", null),
-                                this.state.errorInfo.componentStack))))));
-        }
-        // Normally, just render children
-        return this.props.children;
-    };
-    return ErrorBoundary;
-}(react_1.PureComponent));
-exports.default = ErrorBoundary;
+    }, [eventId, userInfo]);
+    return (react_1.default.createElement(Button_1.default, { className: className, "aria-label": "Send Crash Report", onClick: showDialog },
+        react_1.default.createElement(BugReport_1.default, null),
+        " Send Crash Report"));
+};
+exports.ShowReportDialogButton = ShowReportDialogButton;
+var ErrorBoundary = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (react_1.default.createElement(Sentry.ErrorBoundary
+    // set default props
+    , __assign({ 
+        // set default props
+        fallback: function (_a) {
+            var eventId = _a.eventId, resetError = _a.resetError;
+            return (react_1.default.createElement(react_bootstrap_1.Container, { className: "mt3" },
+                react_1.default.createElement(react_bootstrap_1.Row, null,
+                    react_1.default.createElement(react_bootstrap_1.Col, { md: 8 },
+                        react_1.default.createElement("h2", null, "Oops! Something went wrong while processing your request."),
+                        react_1.default.createElement("p", { className: "mb2" }, "Please try reloading or refresh the page to try again."),
+                        react_1.default.createElement("p", { className: "mb0" },
+                            react_1.default.createElement(exports.ShowReportDialogButton, { className: "btn-primary", eventId: eventId }),
+                            react_1.default.createElement(Button_1.default, { className: "ml2 btn-primary", "aria-label": "Reload", onClick: resetError },
+                                react_1.default.createElement(Refresh_1.default, null),
+                                " Reload")),
+                        react_1.default.createElement("p", null,
+                            "If the problem persists please contact us at",
+                            ' ',
+                            react_1.default.createElement("a", { href: "mailto:tlt@purdue.edu" }, "tlt@purdue.edu"),
+                            ".")))));
+        } }, props), children));
+};
+exports.ErrorBoundary = ErrorBoundary;

package/lib/components/HOC/AsyncComponent.js

@@ -83,7 +83,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importStar(require("react"));
-var ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
+var ErrorBoundary_1 = require("../ErrorBoundary");
 var Loading_1 = __importDefault(require("../Loading"));
 function asyncComponent(importComponent, showLoader) {
     if (showLoader === void 0) { showLoader = true; }
@@ -127,7 +127,7 @@ function asyncComponent(importComponent, showLoader) {
             if (!ImportedComponent) {
                 return showLoader ? react_1.default.createElement(Loading_1.default, null) : null;
             }
-            return (react_1.default.createElement(ErrorBoundary_1.default, null,
+            return (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, null,
                 react_1.default.createElement(ImportedComponent, __assign({}, this.props))));
         };
         return AsyncComponent;

package/lib/css/components/_modals.css

@@ -39,3 +39,8 @@
 		text-align: right;
 	}
 }
+
+/* Always display sentry feedback dialog on top of everything else. */
+.sentry-error-embed-wrapper {
+	z-index: 9999 !important;
+}

package/lib/startup.js

@@ -25,7 +25,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.startup = void 0;
 var applicationinsights_web_1 = require("@microsoft/applicationinsights-web");
 var Sentry = __importStar(require("@sentry/react"));
-var tracing_1 = require("@sentry/tracing");
 var history_1 = require("history");
 var react_ga4_1 = __importDefault(require("react-ga4"));
 var configuration_1 = require("./constants/configuration");
@@ -86,7 +85,7 @@ var startup = function (appConfig, endpointMappings) {
             },
             // enable performance tracing and session replays
             integrations: [
-                new tracing_1.Integrations.BrowserTracing({
+                new Sentry.BrowserTracing({
                     routingInstrumentation: Sentry.reactRouterV5Instrumentation(history)
                 }),
                 new Sentry.Replay()

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "studiokit-scaffolding-js",
-	"version": "4.12.0",
+	"version": "4.12.1-alpha.2",
 	"description": "Common scaffolding for Studio apps at Purdue",
 	"repository": "https://gitlab.com/purdue-informatics/studiokit/studiokit-scaffolding-js",
 	"license": "MIT",
@@ -85,7 +85,7 @@
 		]
 	},
 	"resolutions": {
-		"@sentry/browser": "^7.38.0",
+		"@sentry/browser": "^7.77.0",
 		"@types/react": "^17.0.0",
 		"@types/react-router": "^5.1.11",
 		"kind-of": "^6.0.3",
@@ -100,8 +100,7 @@
 		"@material-ui/lab": "^4.0.0-alpha.57",
 		"@microsoft/applicationinsights-web": "^2.5.11",
 		"@redux-saga/types": "^1.1.0",
-		"@sentry/react": "^7.38.0",
-		"@sentry/tracing": "^7.38.0",
+		"@sentry/react": "^7.77.0",
 		"@types/history": "^4.7.8",
 		"@types/lodash": "^4.14.168",
 		"@types/pluralize": "^0.0.29",