chore(service-worker): Scaffolding for calling postMessage with the service-worker

rspack.config.ts

@@ -606,7 +606,40 @@ const workerConfig: Configuration = {
   context: staticPrefix,
   experiments: appConfig.experiments,
   lazyCompilation: appConfig.lazyCompilation,
-  module: appConfig.module,
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        // core-js: Avoids recompiling core-js based on usage imports
+        // compiled via swc.
+        exclude: /node_modules[\\/](core-js)/,
+        loader: 'builtin:swc-loader',
+        options: {
+          env: {
+            mode: 'usage',
+            // https://rspack.rs/guide/features/builtin-swc-loader#polyfill-injection
+            coreJs: '3.45.0',
+            targets: packageJson.browserslist.production,
+            shippedProposals: true,
+          },
+          jsc: {
+            parser: {
+              syntax: 'typescript',
+              tsx: true,
+            },
+            transform: {
+              react: {
+                runtime: 'automatic',
+                development: DEV_MODE,
+                refresh: false,
+              },
+            },
+          },
+          isModule: 'unknown',
+        },
+      },
+    ],
+  },
   plugins: [
     /**
      * Without this, webpack will chunk the locales but attempt to load them all
@@ -626,7 +659,7 @@ const workerConfig: Configuration = {
   resolve: appConfig.resolve,
   // Don't clean: app's compiler owns cleaning `dist` (see its `clean.keep`).
   output: {...appConfig.output, clean: false},
-  optimization: appConfig.optimization,
+  optimization: {...appConfig.optimization, runtimeChunk: false},
   devtool: appConfig.devtool,
 };
 

static/app/bootstrap/initializeApp.tsx

@@ -1,7 +1,6 @@
 import './legacyTwitterBootstrap';
 import './exportGlobals';
 
-import {registerWorker} from 'sentry/serviceWorker/client/register';
 import type {Config} from 'sentry/types/system';
 import {metric} from 'sentry/utils/analytics';
 
@@ -21,5 +20,4 @@ export function initializeApp(config: Config) {
   metric.mark({name: 'sentry-app-init'});
   renderOnDomReady(renderMain);
   processInitQueue();
-  registerWorker();
 }

static/app/main.tsx

@@ -18,6 +18,7 @@ import {SENTRY_RELEASE_VERSION} from 'sentry/constants/sdk';
 import {preload} from 'sentry/router/preload';
 import {RouteConfigProvider} from 'sentry/router/routeConfigContext';
 import {routes} from 'sentry/router/routes';
+import {ServiceWorkerProvider} from 'sentry/serviceWorker/client/serviceWorkerContext';
 import {createReactRouter3Navigate} from 'sentry/utils/useNavigate';
 
 function buildRouter() {
@@ -39,28 +40,30 @@ export function Main() {
     <AppQueryClientProvider>
       <DocumentTitleManager>
         <FrontendVersionProvider releaseVersion={SENTRY_RELEASE_VERSION ?? null}>
-          <ThemeAndStyleProvider>
-            <NuqsAdapter defaultOptions={{shallow: false}}>
-              <CommandPaletteProvider>
-                <RouteConfigProvider value={router.routes}>
-                  <RouterProvider router={router} />
-                </RouteConfigProvider>
-              </CommandPaletteProvider>
-            </NuqsAdapter>
-            {USE_TANSTACK_DEVTOOL && (
-              <TanStackDevtools
-                config={{position: 'bottom-right'}}
-                plugins={[
-                  {
-                    name: 'TanStack Query',
-                    render: <ReactQueryDevtoolsPanel />,
-                  },
-                  formDevtoolsPlugin(),
-                  pacerDevtoolsPlugin(),
-                ]}
-              />
-            )}
-          </ThemeAndStyleProvider>
+          <ServiceWorkerProvider>
+            <ThemeAndStyleProvider>
+              <NuqsAdapter defaultOptions={{shallow: false}}>
+                <CommandPaletteProvider>
+                  <RouteConfigProvider value={router.routes}>
+                    <RouterProvider router={router} />
+                  </RouteConfigProvider>
+                </CommandPaletteProvider>
+              </NuqsAdapter>
+              {USE_TANSTACK_DEVTOOL && (
+                <TanStackDevtools
+                  config={{position: 'bottom-right'}}
+                  plugins={[
+                    {
+                      name: 'TanStack Query',
+                      render: <ReactQueryDevtoolsPanel />,
+                    },
+                    formDevtoolsPlugin(),
+                    pacerDevtoolsPlugin(),
+                  ]}
+                />
+              )}
+            </ThemeAndStyleProvider>
+          </ServiceWorkerProvider>
         </FrontendVersionProvider>
       </DocumentTitleManager>
     </AppQueryClientProvider>

static/app/serviceWorker/client/serviceWorker.stories.tsx

@@ -0,0 +1,23 @@
+import {Button} from '@sentry/scraps/button';
+import {Flex, Stack} from '@sentry/scraps/layout';
+import {Text} from '@sentry/scraps/text';
+
+import {useServiceWorker} from 'sentry/serviceWorker/client/serviceWorkerContext';
+import * as Storybook from 'sentry/stories';
+
+export default Storybook.story('ServiceWorker', story => {
+  story('Basic Events', () => {
+    const {controller} = useServiceWorker();
+
+    return (
+      <Stack gap="md">
+        <Flex>
+          <Button onClick={() => controller.postMessage({name: 'ping', type: 'event'})}>
+            Send Ping event
+          </Button>
+        </Flex>
+        <Text>Look in the console for the ping event.</Text>
+      </Stack>
+    );
+  });
+});

static/app/serviceWorker/client/serviceWorkerContext.tsx

@@ -0,0 +1,136 @@
+import {createContext, useContext, useEffect} from 'react';
+import * as Sentry from '@sentry/react';
+
+import {useFrontendVersion} from 'sentry/components/frontendVersionContext';
+import {ServiceWorkerController} from 'sentry/serviceWorker/client/serviceWorkerInterface';
+
+const DEBUG_LOGGING = false;
+
+function log(message: string, options?: Sentry.metrics.MetricOptions) {
+  Sentry.metrics.count(`service-worker.register.${message}`, 1, options);
+  if (DEBUG_LOGGING) {
+    // eslint-disable-next-line no-console
+    console.log(`service-worker.register.${message}`);
+  }
+}
+
+function getWorkerUrl(): string {
+  return window.__SENTRY_DEV_UI ? '/entrypoints/service-worker.js' : '/service-worker.js';
+}
+
+const Context = createContext({
+  controller: new ServiceWorkerController(),
+});
+
+export function ServiceWorkerProvider({children}: {children: React.ReactNode}) {
+  const context = useContext(Context);
+
+  useRegisterServiceWorker();
+  useServiceWorkerUpdateCheck();
+  useLogControllerChangeEvent();
+
+  return <Context.Provider value={context}>{children}</Context.Provider>;
+}
+
+/**
+ * @public
+ * @returns The service worker context.
+ * @example
+ * const {controller} = useServiceWorker();
+ * controller.postMessage({name: 'ping', type: 'event'});
+ */
+export function useServiceWorker() {
+  return useContext(Context);
+}
+
+/**
+ * Register a service worker and send event `worker.init` to the newest worker
+ * available.
+ */
+function useRegisterServiceWorker() {
+  useEffect(() => {
+    if (!('serviceWorker' in navigator)) {
+      log('not-supported');
+      return;
+    }
+
+    navigator.serviceWorker
+      // https://rspack.rs/guide/features/web-workers
+      .register(getWorkerUrl(), {scope: '/'})
+      .then(registration => {
+        log('registered', {
+          attributes: {
+            // An old version could be active while the new instance is incoming
+            active: registration.active ? 'true' : 'false',
+            // The new instance should be `installing` to start, and should skip
+            // `waiting` to become `active` soon.
+            installing: registration.installing ? 'true' : 'false',
+            waiting: registration.waiting ? 'true' : 'false',
+          },
+        });
+
+        const worker = registration.installing;
+        worker?.addEventListener('statechange', () => {
+          log('statechange', {
+            attributes: {
+              state: worker.state,
+            },
+          });
+        });
+      })
+      .catch(error => {
+        log('error');
+        Sentry.captureException(error);
+      });
+  }, []);
+}
+
+function useServiceWorkerUpdateCheck() {
+  const {state} = useFrontendVersion();
+
+  useEffect(() => {
+    if (!('serviceWorker' in navigator) || state === 'current') {
+      return;
+    }
+
+    // A long-lived tab only learns about a new worker on the browser's
+    // infrequent periodic update check. Re-check whenever the tab becomes
+    // visible so a fresh deploy is picked up (trigger: install -> activate ->
+    // clients.claim -> controllerchange) as soon as the user returns to it.
+    const checkForUpdate = () => {
+      if (document.visibilityState !== 'visible') {
+        return;
+      }
+      log('update-check');
+      navigator.serviceWorker.ready
+        .then(registration => registration.update())
+        .catch(error => {
+          Sentry.captureException(error);
+        });
+    };
+
+    document.addEventListener('visibilitychange', checkForUpdate);
+    return () => {
+      document.removeEventListener('visibilitychange', checkForUpdate);
+    };
+  }, [state]);
+}
+
+function useLogControllerChangeEvent() {
+  useEffect(() => {
+    if (!('serviceWorker' in navigator)) {
+      return;
+    }
+
+    // Log whenever controllerchange happens, which means we have a new worker
+    // ready to listen to handle fetch and push requests.
+    // This event means that users have multiple tabs open at the same time, and
+    // the new workers are taking control of the pages.
+    const handler = () => log('controllerchange');
+
+    navigator.serviceWorker.addEventListener('controllerchange', handler);
+    return () => {
+      navigator.serviceWorker.removeEventListener('controllerchange', handler);
+    };
+  }, []);
+}

static/app/serviceWorker/client/serviceWorkerInterface.ts

@@ -0,0 +1,47 @@
+import * as Sentry from '@sentry/react';
+
+import type {EventMessage} from 'sentry/serviceWorker/types';
+
+/**
+ * Sends messages from the page to the service worker.
+ *
+ * Every message must be an `EventMessage` (see `sentry/serviceWorker/types`).
+ * Use to notify the worker that something has happened on the page.
+ */
+export class ServiceWorkerController {
+  /**
+   * Find the service worker that this page should send messages to.
+   *
+   * Since we only need to post messages & not intercept network requests,
+   * we use `navigator.serviceWorker.ready` to get the active worker.
+   * We don't need to wait for the page to be controlled by the worker.
+   */
+  private async getWorker(): Promise<ServiceWorker | null> {
+    if (!('serviceWorker' in navigator)) {
+      return null;
+    }
+    // For more read: https://web.dev/articles/service-worker-lifecycle
+    const registration = await navigator.serviceWorker.ready;
+    return registration.installing ?? registration.waiting ?? registration.active;
+  }
+
+  public postMessage(message: EventMessage): Promise<unknown> {
+    return Sentry.startSpan(
+      {
+        name: 'service-worker.controller',
+        op: 'sw.postMessage',
+        attributes: {type: message.type, name: message.name},
+      },
+      async () => {
+        const worker = await this.getWorker();
+        if (!worker) {
+          return;
+        }
+        if (message.type === 'event') {
+          worker.postMessage(message);
+          return;
+        }
+      }
+    );
+  }
+}

static/app/serviceWorker/types.ts

@@ -0,0 +1,4 @@
+export type EventMessage = {
+  name: 'ping';
+  type: 'event';
+};