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,