All files / client/src index.tsx

69.69% Statements 23/33
43.75% Branches 7/16
75% Functions 6/8
68.75% Lines 22/32

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132                                          531x 531x 531x           531x     531x   531x   531x                     531x             531x 531x           531x               531x         531x 5841x                                           1x         531x 525x   525x         525x   525x                               531x 525x    
import { init } from "@sentry/react";
// eslint-disable-next-line @typescript-eslint/no-restricted-imports
import React, { Suspense } from "react";
import ReactDOM from "react-dom";
import { createRoot } from "react-dom/client";
import { Provider } from "react-redux";
import { StyleSheetManager, ThemeProvider } from "styled-components";
import { config } from "shared/config";
import { ApiEndpoint } from "shared/constants/apiEndpoints";
import { setLocale } from "shared/utils/setLocale";
import loaderImage from "assets/loading.gif";
import { GlobalStyle } from "client/globalStyle";
import { theme } from "client/theme";
import { getLocalStorageLocale } from "client/utils/localStorage";
import { store } from "client/utils/store";
// Initialized i18next instance
import "client/utils/i18n";
import { initializeDayjs } from "shared/utils/initializeDayjs";
import { lazyWithRetry } from "client/utils/lazyWithRetry";
import { resetStaleEventStorage } from "client/utils/resetStaleEventStorage";
 
resetStaleEventStorage();
initializeDayjs();
setLocale(getLocalStorageLocale());
 
// The app manages scroll itself on navigation (views reset to the top on
// mount, the program list restores its own saved position), so disable the
// browser's history scroll restoration — WebKit applies it asynchronously on
// back navigation and overrides the app's restore with a stale offset
history.scrollRestoration = "manual";
 
// Root component
const App = lazyWithRetry(async () => await import("client/app/App"));
 
const { enableAxe, enableWhyDidYouRender } = config.client();
 
Iif (enableWhyDidYouRender && process.env.NODE_ENV === "development") {
  void (async () => {
    const { default: whyDidYouRender } =
      await import("@welldone-software/why-did-you-render");
    whyDidYouRender(React, {
      include: [/(.*?)/],
      exclude: [/^FontAwesomeIcon$/, /^Link$/, /^Button$/],
    });
  })();
}
 
Iif (enableAxe && process.env.NODE_ENV === "development") {
  void (async () => {
    const { default: axe } = await import("@axe-core/react");
    await axe(React, ReactDOM, 1000);
  })();
}
 
const getDsn = (): string | undefined => {
  switch (process.env.SETTINGS) {
    case "production":
      return "https://5b75f3722ea14d6d9307f4c736b3b58a@o1321706.ingest.sentry.io/6579203";
    case "staging":
      return "https://446b1c1e5b3048c4bb00b19b74aa55e6@o1321706.ingest.sentry.io/6578391";
    case "development":
      return config.sentry().enableSentryInDev
        ? "https://1fb97a74de6a44e3b16e8d29aeec3363@o1321706.ingest.sentry.io/6579491"
        : undefined;
    default:
      return undefined;
  }
};
 
init({
  dsn: getDsn(),
  // Drop the default session tracking and client reports
  // Tunnel traffic is error events only
  integrations: (defaultIntegrations) =>
    defaultIntegrations.filter(
      (integration) => integration.name !== "BrowserSession",
    ),
  sendClientReports: false,
  normalizeDepth: 10,
  environment: process.env.SETTINGS,
  tunnel: ApiEndpoint.SENTRY_TUNNEL,
  ignoreErrors: [
    // Error when Outlook scans a link
    // https://github.com/getsentry/sentry-javascript/issues/3440
    "Non-Error promise rejection captured with value: Object Not Found Matching Id:",
    // Error from the script the Instagram iOS in-app browser injects into every page
    "evaluating 'window.webkit.messageHandlers'",
  ],
  denyUrls: [
    // Errors from scripts the Facebook in-app browser injects into every page
    /^iabjs:\/\//,
  ],
  maxValueLength: config.sentry().maxValueLength,
});
 
// Suspend fallback element
const loader = (
  <div style={{ textAlign: "center" }}>
    <img alt="Loading..." src={loaderImage} width="40" />
  </div>
);
 
const render = (): void => {
  const container = document.querySelector("#main");
 
  Iif (!container) {
    // eslint-disable-next-line no-restricted-syntax -- We want to throw here
    throw new Error("Unable to find React root element 'main'");
  }
 
  const root = createRoot(container);
 
  root.render(
    // <React.StrictMode>
    <Provider store={store}>
      <StyleSheetManager enableVendorPrefixes={true}>
        <ThemeProvider theme={theme}>
          <Suspense fallback={loader}>
            <GlobalStyle />
            <App />
          </Suspense>
        </ThemeProvider>
      </StyleSheetManager>
    </Provider>,
    // </React.StrictMode>
  );
};
 
addEventListener("load", () => {
  render();
});