Optimize Bundles

packages/web/fullstack/sentry.ts

@@ -1,18 +1,13 @@
-import * as Sentry from '@sentry/node'
 import getConfig from 'next/config'
-export function initSentry() {
+
+export default function sentryConfig() {
   const { publicRuntimeConfig } = getConfig()
   const config = publicRuntimeConfig.SENTRY
-  if (publicRuntimeConfig.ENV === 'development') {
-    return
-  }
-  Sentry.init({
+  return {
     dsn: `https://${config.KEY}@sentry.io/${config.PROJECT}`,
     environment: publicRuntimeConfig.ENV,
     ignoreErrors: [
       "The fetching process for the media resource was aborted by the user agent at the user's request.",
     ],
-  })
+  }
 }
-
-export default Sentry

packages/web/next.config.js

@@ -1,6 +1,5 @@
 const withSass = require('@zeit/next-sass')
 const withImages = require('next-images')
-const webpack = require('webpack')
 const envConfig = require('./env-config')
 const serverEnvConfig = require('./server-env-config')
 
@@ -11,8 +10,12 @@ module.exports = withImages(
       localIdentName: '[local]___[hash:base64:5]',
     },
     cssModules: true,
+    experimental: {
+      granularChunks: true,
+    },
     publicRuntimeConfig: envConfig,
     serverRuntimeConfig: serverEnvConfig,
+
     // options: {buildId, dev, isServer, defaultLoaders, webpack}   https://nextjs.org/docs#customizing-webpack-config
     webpack: (config, { dev, isServer }) => {
       config.node = {
@@ -22,6 +25,7 @@ module.exports = withImages(
         ...config.resolve.alias,
         'react-native$': 'react-native-web',
       }
+
       if (!isServer) {
         config.resolve.alias['@sentry/node'] = '@sentry/browser'
       }

packages/web/pages/_app.tsx

@@ -9,15 +9,12 @@ import Header from 'src/header/Header.3'
 import { ScreenSizeProvider } from 'src/layout/ScreenSize'
 import Footer from 'src/shared/Footer.3'
 import { HEADER_HEIGHT } from 'src/shared/Styles'
-import Sentry, { initSentry } from '../fullstack/sentry'
+import { getSentry, initSentry } from 'src/utils/sentry'
 import { appWithTranslation } from '../src/i18n'
 
 config({ ssrReveal: true })
 class MyApp extends App {
-  componentDidMount() {
-    if (canTrack()) {
-      initSentry()
-    }
+  async componentDidMount() {
     if (window.location.hash) {
       hashScroller(window.location.hash)
     }
@@ -27,6 +24,9 @@ class MyApp extends App {
     if (getConfig().publicRuntimeConfig.FLAGS.ENV === 'development') {
       checkH1Count()
     }
+    if (await canTrack()) {
+      await initSentry()
+    }
   }
 
   // there are a few pages we dont want the header on
@@ -39,8 +39,9 @@ class MyApp extends App {
     return this.props.router.asPath.startsWith('/experience')
   }
 
-  componentDidCatch = (error: Error, info: object) => {
-    Sentry.withScope((scope: Sentry.Scope) => {
+  componentDidCatch = async (error: Error, info: object) => {
+    const Sentry = await getSentry()
+    Sentry.withScope((scope) => {
       scope.setExtras(info)
       Sentry.captureException(error)
     })

packages/web/pages/_document.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { AppRegistry, I18nManager } from 'react-native-web'
 import analytics from 'src/analytics/analytics'
 import { setDimensionsForScreen } from 'src/layout/ScreenSize'
-import Sentry from '../fullstack/sentry'
+import { getSentry } from 'src/utils/sentry'
 import { isLocaleRTL } from '../server/i18nSetup'
 // @ts-ignore
 const a = analytics
@@ -40,6 +40,7 @@ export default class MyDocument extends Document<Props> {
     ])
 
     if (context.err) {
+      const Sentry = await getSentry()
       Sentry.captureException(context.err)
     }
 

packages/web/server/Announcement.ts

@@ -1,5 +1,5 @@
 import getConfig from 'next/config'
-import Sentry from '../fullstack/sentry'
+import Sentry from '../server/sentry'
 import airtableInit from '../server/airtable'
 
 interface Fields {

packages/web/server/EventHelpers.ts

@@ -1,7 +1,7 @@
 import getConfig from 'next/config'
 import { EventProps } from '../fullstack/EventProps'
-import Sentry from '../fullstack/sentry'
 import airtableInit from '../server/airtable'
+import Sentry from '../server/sentry'
 import { abort } from '../src/utils/abortableFetch'
 const TABLE_NAME = 'Community Calendar'
 // Intermediate step Event With all String Values

packages/web/server/FirebaseServerSide.ts

@@ -2,7 +2,7 @@ import * as firebase from 'firebase/app'
 import 'firebase/auth'
 import 'firebase/database'
 import getConfig from 'next/config'
-import Sentry from '../fullstack/sentry'
+import Sentry from '../server/sentry'
 import {
   Address,
   E164Number,

packages/web/server/addToCRM.ts

@@ -1,6 +1,6 @@
 import fetch from 'cross-fetch'
 import getConfig from 'next/config'
-import Sentry from '../fullstack/sentry'
+import Sentry from '../server/sentry'
 interface ActiveCampaignNewContact {
   email: string
   firstName: string

packages/web/server/index.ts

@@ -7,7 +7,7 @@ import helmet from 'helmet'
 import next from 'next'
 import nextI18NextMiddleware from 'next-i18next/middleware'
 import { Tables } from '../fullstack/EcoFundFields'
-import Sentry, { initSentry } from '../fullstack/sentry'
+import Sentry, { initSentryServer } from '../server/sentry'
 import addToCRM from '../server/addToCRM'
 import ecoFundSubmission from '../server/EcoFundApp'
 import { RequestType } from '../src/fauceting/FaucetInterfaces'
@@ -194,7 +194,7 @@ function wwwRedirect(req, res, nextAction) {
     return handle(req, res)
   })
 
-  initSentry()
+  await initSentryServer()
   await server.listen(port)
 
   // tslint:disable-next-line

packages/web/server/mediumAPI.ts

@@ -1,7 +1,7 @@
 import { parse, validate } from 'fast-xml-parser'
 import { Articles } from 'fullstack/ArticleProps'
 import * as htmlToFormattedText from 'html-to-formatted-text'
-import Sentry from '../fullstack/sentry'
+import Sentry from '../server/sentry'
 import abortableFetch from '../src/utils/abortableFetch'
 interface JSONRSS {
   rss: {

packages/web/server/sentry.ts

@@ -0,0 +1,15 @@
+import * as Sentry from '@sentry/node'
+import getConfig from 'next/config'
+import sentryConfig from '../fullstack/sentry'
+
+export async function initSentryServer() {
+  const { publicRuntimeConfig } = getConfig()
+  if (publicRuntimeConfig.ENV === 'development') {
+    return
+  }
+  Sentry.init(sentryConfig())
+
+  return Sentry
+}
+
+export default Sentry

packages/web/src/analytics/analytics.ts

@@ -1,6 +1,5 @@
 import Cookies from 'js-cookie'
 import getConfig from 'next/config'
-const isInEU = require('@segment/in-eu')
 
 let analytics: {
   track: (key: string, properties?: object, options?: object) => void
@@ -10,17 +9,24 @@ const RESPONDED_TO_CONSENT = '__responded_to_consent__'
 
 declare var process: any
 
-export function canTrack(): boolean {
-  return !!Cookies.get(ALLOW_ANALYTICS_COOKIE_NAME) || !isInEU()
+export async function canTrack() {
+  return !!Cookies.get(ALLOW_ANALYTICS_COOKIE_NAME) || !(await isInEU())
 }
 
-export function showVisitorCookieConsent(): boolean {
-  return isInEU() && !Cookies.get(RESPONDED_TO_CONSENT)
+export async function showVisitorCookieConsent() {
+  if (!Cookies.get(RESPONDED_TO_CONSENT)) {
+    return isInEU()
+  }
+  return false
 }
 
-const initializeAnalytics = () => {
-  if (process.browser && canTrack()) {
-    const Segment = require('load-segment')
+async function isInEU() {
+  const inEU = await import('@segment/in-eu').then((mod) => mod.default)
+  return inEU()
+}
+async function initializeAnalytics() {
+  if (process.browser && (await canTrack())) {
+    const Segment = await import('load-segment').then((mod) => mod.default)
     const { publicRuntimeConfig } = getConfig()
     analytics = Segment({ key: publicRuntimeConfig.__SEGMENT_KEY__ })
   } else {
@@ -32,10 +38,10 @@ const initializeAnalytics = () => {
 
 initializeAnalytics()
 
-export const agree = () => {
+export async function agree() {
   Cookies.set(ALLOW_ANALYTICS_COOKIE_NAME, true, { expires: OPTIN_EXPIRE_DAYS })
   Cookies.set(RESPONDED_TO_CONSENT, true, { expires: OPTIN_EXPIRE_DAYS })
-  initializeAnalytics()
+  await initializeAnalytics()
 }
 
 export const disagree = () => {

packages/web/src/fonts/Fonts.tsx

@@ -113,7 +113,7 @@ interface TextChildren {
 
 export function Ul(props: ViewProps & ViewChildren) {
   return (
-    <View style={[styles.ul, props.style]} accessibilityRole={'list'}>
+    <View style={StyleSheet.flatten([styles.ul, props.style])} accessibilityRole={'list'}>
       {props.children}
     </View>
   )

packages/web/src/forms/FormComponents.tsx

@@ -13,7 +13,6 @@ import {
 } from 'react-native'
 import Fade from 'react-reveal/Fade'
 import { Cell, Spans } from 'src/layout/GridRow'
-
 import { colors, fonts, standardStyles, textStyles } from 'src/styles'
 
 export function ErrorMessage({ allErrors, field, t }) {
@@ -158,7 +157,7 @@ export class TextInput extends React.Component<TextInputProps & TextInputAuxProp
 
   render() {
     const { style, focusStyle, ...props } = this.props
-    const currentStyle = this.state.focused ? [style, focusStyle] : style
+    const currentStyle = this.state.focused ? StyleSheet.flatten([style, focusStyle]) : style
     return (
       <RNTextInput {...props} onFocus={this.onFocus} onBlur={this.onBlur} style={currentStyle} />
     )

packages/web/src/header/BlueBanner.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 import Chevron from 'src/icons/chevron'
 import { colors, fonts, textStyles } from 'src/styles'
-import Sentry from '../../fullstack/sentry'
+import { getSentry } from 'src/utils/sentry'
 
 interface Props {
   link: string
@@ -111,6 +111,7 @@ export default class Announcement extends React.Component<AnnouncementProps, Sta
 
       this.props.onVisibilityChange(visible)
     } catch (e) {
+      const Sentry = await getSentry()
       Sentry.captureException(e)
     }
   }

packages/web/src/header/CookieConsent.tsx

@@ -5,7 +5,7 @@ import Link from 'src/shared/Link'
 import Responsive from 'src/shared/Responsive'
 import { CONSENT_HEIGHT } from 'src/shared/Styles'
 import { colors, fonts } from 'src/styles'
-import { initSentry } from '../../fullstack/sentry'
+import { initSentry } from 'src/utils/sentry'
 import { agree, disagree, showVisitorCookieConsent } from '../analytics/analytics'
 
 interface State {
@@ -17,18 +17,18 @@ export class CookieConsent extends React.PureComponent<I18nProps, State> {
     showConsent: false,
   }
 
-  componentDidMount() {
+  async componentDidMount() {
     this.setState({
-      showConsent: showVisitorCookieConsent(),
+      showConsent: await showVisitorCookieConsent(),
     })
   }
 
-  onAgree = () => {
-    agree()
+  onAgree = async () => {
+    await agree()
     this.setState({
       showConsent: false,
     })
-    initSentry()
+    await initSentry()
   }
 
   onDisagree = () => {