okta · denysoblohin-okta · May 29, 2023 · May 30, 2023 · May 30, 2023 · Jun 30, 2023
@@ -48,6 +48,10 @@
  "default": "./target/js/okta-sign-in.oie.js"
  },
  "./polyfill": "./target/js/okta-sign-in.polyfill.js",
+ "./sentry": {
+ "types": "./types/src/plugins/OktaPluginSentry.d.ts",
+ "default": "./target/js/okta-sign-in.sentry.js"
+ },
  "./css/": "./target/css/"
  },
  "scripts": {
@@ -125,6 +129,7 @@
  "@rollup/plugin-node-resolve": "^13.2.1",
  "@rollup/plugin-replace": "^4.0.0",
  "@rollup/plugin-strip": "^2.1.0",
+ "@sentry/webpack-plugin": "^2.0.0",
  "@testcafe-community/axe": "^3.5.0",
  "@testing-library/testcafe": "^4.4.1",
  "@typescript-eslint/eslint-plugin": "^4.16.1",
@@ -145,8 +150,11 @@
  "core-js": "^3.9.1",
  "css-loader": "^6.7.3",
  "cssnano": "^6.0.0",
+ "dom4": "^2.1.6",
  "dotenv": "^8.0.0",
  "dyson": "^4.1.0",
+ "element-closest-polyfill": "^1.0.6",
+ "element-matches-polyfill": "^1.0.0",
  "eslint": "^7.23.0",
  "eslint-import-resolver-typescript": "^3.5.0",
  "eslint-import-resolver-webpack": "^0.13.2",
@@ -171,6 +179,7 @@
  "grunt-contrib-watch": "^1.1.0",
  "grunt-exec": "^3.0.0",
  "grunt-properties-to-json": "^0.6.0",
+ "indexeddb-getall-shim": "^1.3.6",
  "isomorphic-fetch": "^3.0.0",
  "jasmine": "^4.0.1",
  "jasmine-ajax": "^4.0.0",
@@ -199,6 +208,7 @@
  "npm-run-all": "^4.1.5",
  "postcss": "^8.4.21",
  "postcss-loader": "^7.2.1",
+ "proxy-polyfill": "^0.3.2",
  "regenerator-runtime": "^0.13.7",
  "replace-in-file": "^6.2.0",
  "retire": "^2.0.3",
@@ -230,6 +240,7 @@
  },
  "dependencies": {
  "@okta/okta-auth-js": "~7.0.0",
+ "@sentry/browser": "^7.68.0",
  "@sindresorhus/to-milliseconds": "^1.0.0",
  "@types/backbone": "^1.4.15",
  "@types/eslint-scope": "^3.7.3",

@@ -10,6 +10,9 @@
 
  <body>
  <div id="okta-login-container"></div>
+
+ <!--script src="/js/okta-sign-in.polyfill.js"></script-->
+ <!--script src="/js/okta-sign-in.sentry.js"></script-->
  <script src="/js/okta-sign-in.js"></script>
  <script src="/js/okta-plugin-a11y.js"></script>
  <script src="/playground.bundle.js"></script>

@@ -11,6 +11,7 @@ import {
  RenderResultSuccessNonOIDCSession,
 } from '../src/types';
 import { assertNoEnglishLeaks } from '../playground/LocaleUtils';
+import type { OktaPluginSentry } from '../src/plugins/OktaPluginSentry';
 
 declare global {
  const OMIT_MSWJS: boolean;
@@ -23,6 +24,9 @@ declare global {
 
  // from <script src="/js/okta-plugin-a11y.js">
  OktaPluginA11y: { init: (widget: OktaSignInAPI) => void };
+
+ // from <script src="/js/okta-plugin-sentry.js">
+ OktaPluginSentry: OktaPluginSentry;
 
  // added in this file
  getWidgetInstance: () => OktaSignInAPI;
@@ -65,6 +69,12 @@ const renderPlaygroundWidget = (options = {}) => {
  window.OktaPluginA11y.init(signIn);
  }
 
+ if (window.OktaPluginSentry) {
+ window.OktaPluginSentry.initSentry(signIn, {
+ sendReportOnStart: true
+ });
+ }
+
  signIn.renderEl(
  { el: '#okta-login-container' },
 
@@ -106,6 +116,10 @@ const renderPlaygroundWidget = (options = {}) => {
 
  function error(err) {
  console.error('global error handler: ', err);
+
+ if (window.OktaPluginSentry) {
+ window.OktaPluginSentry.captureWidgetError(err);
+ }
  }
  ).catch(() => { /* we are using global error handler */});
 
@@ -151,6 +165,11 @@ const renderPlaygroundWidget = (options = {}) => {
  console.log('===== playground widget afterError event received =====');
  console.log(JSON.stringify(context));
  console.log(JSON.stringify(error));
+
+ //todo: move to OktaPluginSentry after OKTA-594740
+ if (window.OktaPluginSentry && error.error) {
+ window.OktaPluginSentry.captureWidgetError(error.error);
+ }
  });
 
 };

@@ -1,3 +1,5 @@
+const signinWidgetOptions = require('../../../.widgetrc.js');
+
 const path = require('path');
 const responseConfig = require('./responseConfig');
 const supportedApi = [
@@ -75,7 +77,9 @@ const configMock = (option) => {
  // move cursor to next response only after mock has been generated.
  updateIndex();
 
- return require(mockFile);
+ const json = require(mockFile);
+ const str = JSON.stringify(json).replace(/http\:\/\/localhost\:3000/g, signinWidgetOptions.baseUrl);
+ return JSON.parse(str);
  }
 
  }

@@ -26,3 +26,21 @@ require('core-js/web/url');
 // crypto is needed for PKCE
 require('fast-text-encoding'); // TextEncoder
 require('webcrypto-shim'); // crypto.subtle
+
+// Gen3
+require('core-js/features/symbol');
+require('core-js/features/array/fill');
+require('create-html-document-polyfill');
+require('core-js/features/global-this'); // msw
+
+// Sentry
+require('proxy-polyfill');
+require('indexeddb-getall-shim');
+require("dom4");
+// require("element-closest-polyfill");
+// require('element-matches-polyfill');
+require('core-js/features/object/get-own-property-descriptor');
+require('core-js/features/string/repeat');
+require('core-js/features/number');
+require('core-js/features/array/values');
+require('core-js/stable/map');
@@ -9,3 +9,8 @@ require('core-js/stable');
 require('fast-text-encoding'); // TextEncoder
 require('webcrypto-shim'); // crypto.subtle
 require('create-html-document-polyfill');
+
+// Sentry
+require('proxy-polyfill');
+require('indexeddb-getall-shim');
+require("dom4");
@@ -1,8 +1,10 @@
-const { DefinePlugin, IgnorePlugin } = require('webpack');
+const { DefinePlugin, IgnorePlugin, ProvidePlugin } = require('webpack');
 const fs = require('fs-extra');
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const EventHooksPlugin = require('event-hooks-webpack-plugin');
+const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
+require('@okta/env').config();
 
 const FailOnBuildFailPlugin = require('./FailOnBuildFailPlugin');
 
@@ -26,13 +28,15 @@ function emptyModule() {
 
 function prodMode() {
  return new DefinePlugin({
- DEBUG: false
+ DEBUG: false,
+ SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
  });
 }
 
 function devMode() {
  return new DefinePlugin({
- DEBUG: true
+ DEBUG: true,
+ SENTRY_DSN: JSON.stringify(process.env.SENTRY_DSN),
  });
 }
 
@@ -54,7 +58,7 @@ function plugins(options = {}) {
  emptyModule(),
  devMode(),
  ];
- 
+
  if (copyAssets) {
  list.push(new EventHooksPlugin({
  beforeRun: () => {
@@ -74,6 +78,14 @@ function plugins(options = {}) {
  list.push(webpackBundleAnalyzer(options.analyzerFile));
  }
 
+ if (process.env.SENTRY_AUTH_TOKEN) {
+ list.push(sentryWebpackPlugin({
+ org: process.env.SENTRY_ORG,
+ project: process.env.SENTRY_PROJECT,
+ authToken: process.env.SENTRY_AUTH_TOKEN,
+ }));
+ }
+
  return list;
 }
 

@@ -78,9 +78,11 @@ export const init = (widget: OktaSignInAPI): void => {
  const isVisible = input.type !== 'password';
  button.type = 'button';
  if (isVisible) {
+ // @ts-ignore
  button.ariaLabel = 'Hide password';
  button.className = 'eyeicon visibility-off-16';
  } else {
+ // @ts-ignore
  button.ariaLabel = 'Show password';
  button.className = 'eyeicon visibility-16';
  }