Tree shake unused code for Sentry (#2359)

Author: jpreynat

next.config.js

@@ -9,7 +9,7 @@ module.exports = withSentryConfig(
             GITBOOK_ASSETS_PREFIX: process.env.GITBOOK_ASSETS_PREFIX,
         },
 
-        webpack(config) {
+        webpack(config, { dev, webpack }) {
             config.resolve.fallback = {
                 ...config.resolve.fallback,
 
@@ -19,6 +19,21 @@ module.exports = withSentryConfig(
                 http: false,
             };
 
+            // Tree shake debug code for Sentry
+            // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-with-nextjs
+            if (!dev) {
+                config.plugins.push(
+                    new webpack.DefinePlugin({
+                        __SENTRY_DEBUG__: false,
+                        // We always init Sentry with enableTracing: false for now, so this is useless
+                        __SENTRY_TRACING__: false,
+                        __RRWEB_EXCLUDE_IFRAME__: true,
+                        __RRWEB_EXCLUDE_SHADOW_DOM__: true,
+                        __SENTRY_EXCLUDE_REPLAY_WORKER__: true,
+                    }),
+                );
+            }
+
             return config;
         },
 
@@ -45,9 +60,9 @@ module.exports = withSentryConfig(
                 {
                     protocol: 'https',
                     hostname: '*.gitbook.io',
-                }
-            ]
-        }
+                },
+            ],
+        },
     },
     {
         silent: true,

sentry.client.config.ts

@@ -1,8 +1,15 @@
-import * as Sentry from '@sentry/nextjs';
+import {
+    BrowserClient,
+    makeFetchTransport,
+    defaultStackParser,
+    getCurrentScope,
+} from '@sentry/nextjs';
 
 const dsn = process.env.SENTRY_DSN;
 if (dsn) {
-    Sentry.init({
+    // To tree shake default integrations that we don't use
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/tree-shaking/#tree-shaking-default-integrations
+    const client = new BrowserClient({
         debug: false,
         dsn,
         integrations: [],
@@ -11,5 +18,10 @@ if (dsn) {
         beforeSendTransaction: () => {
             return null;
         },
+        transport: makeFetchTransport,
+        stackParser: defaultStackParser,
     });
+
+    getCurrentScope().setClient(client);
+    client.init();
 }

sentry.edge.config.ts

@@ -1,8 +1,8 @@
-import * as Sentry from '@sentry/nextjs';
+import { init } from '@sentry/nextjs';
 
 const dsn = process.env.SENTRY_DSN;
 if (dsn) {
-    Sentry.init({
+    init({
         debug: false,
         dsn,
 

sentry.server.config.ts

@@ -1,8 +1,8 @@
-import * as Sentry from '@sentry/nextjs';
+import { init } from '@sentry/nextjs';
 
 const dsn = process.env.SENTRY_DSN;
 if (dsn) {
-    Sentry.init({
+    init({
         debug: false,
         dsn,
 

src/app/(space)/error.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import * as Sentry from '@sentry/nextjs';
+import { captureException } from '@sentry/nextjs';
 import React from 'react';
 
 import { Button } from '@/components/primitives/Button';
@@ -15,7 +15,7 @@ export default function ErrorPage(props: {
     const language = useLanguage();
 
     React.useEffect(() => {
-        Sentry.captureException(error);
+        captureException(error);
     }, [error]);
 
     return (

src/app/global-error.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import * as Sentry from '@sentry/nextjs';
+import { captureException } from '@sentry/nextjs';
 import Error from 'next/error';
 import { useEffect } from 'react';
 
 export default function GlobalError({ error }: { error: Error }) {
     useEffect(() => {
-        Sentry.captureException(error);
+        captureException(error);
     }, [error]);
 
     return (

src/lib/tracing.ts

@@ -1,4 +1,4 @@
-import * as Sentry from '@sentry/nextjs';
+import { startSpan } from '@sentry/nextjs';
 
 export interface TraceSpan {
     setAttribute: (label: string, value: boolean | string | number) => void;
@@ -22,7 +22,7 @@ export async function trace<T>(
         typeof name === 'string' ? { operation: name, name: undefined } : name;
     const completeName = executionName ? `${operation}(${executionName})` : operation;
 
-    return await Sentry.startSpan(
+    return await startSpan(
         {
             name: completeName,
             op: operation,

src/middleware.ts

@@ -1,5 +1,5 @@
 import { GitBookAPI } from '@gitbook/api';
-import * as Sentry from '@sentry/nextjs';
+import { setTag, setContext } from '@sentry/nextjs';
 import assertNever from 'assert-never';
 import jwt from 'jsonwebtoken';
 import type { ResponseCookie } from 'next/dist/compiled/@edge-runtime/cookies';
@@ -94,8 +94,8 @@ interface ContentAPITokenPayload {
 export async function middleware(request: NextRequest) {
     const { url, mode } = getInputURL(request);
 
-    Sentry.setTag('url', url.toString());
-    Sentry.setContext('request', {
+    setTag('url', url.toString());
+    setContext('request', {
         method: request.method,
         url: url.toString(),
         rawRequestURL: request.url,
@@ -145,8 +145,8 @@ export async function middleware(request: NextRequest) {
         return writeCookies(NextResponse.redirect(normalizedVA.toString()), resolved.cookies);
     }
 
-    Sentry.setTag('space', resolved.space);
-    Sentry.setContext('content', {
+    setTag('space', resolved.space);
+    setContext('content', {
         space: resolved.space,
         changeRequest: resolved.changeRequest,
         revision: resolved.revision,