Utilizing Next.js on Vercel with Sentry and opting out of source maps in the production environment

Currently setting up a Next.js application on Vercel with Sentry configuration thanks to the @sentry/next.js module. You can find an example repo here - https://github.com/voronianski/test-next-sentry-app

This setup is based on the official example from Next.js, available at https://github.com/vercel/next.js/tree/canary/examples/with-sentry.

The integration with Sentry is working smoothly. However, I have observed something that concerns me. The source maps for each file are accessible publicly.

You can access the app here - , and here is the map file for _app.js

This exposes the entire project structure and source code in the browser's developer tools - https://i.sstatic.net/PC4MN.png

I attempted to use a .vercelignore file, but it did not resolve the issue - https://github.com/voronianski/test-next-sentry-app/blob/main/.vercelignore

Is there a way to prevent the deployment of source map files to the public domain on Vercel? Thank you!

javascriptnext.jssentrysource-mapsvercel

Answer №1

Vercel support recommended using the rewrites option in the next.config.js file to achieve this solution:

const nextConfig = {
  // ...
  rewrites: async () => {
    // Prevent source-maps from leaking in Vercel production deployments
    // Include them in Vercel preview deployments with generated URLs for improved development experience
    const isVercelProdDeploy = process.env.VERCEL_ENV === 'production';

    if (isVercelProdDeploy) {
      return {
        beforeFiles: [
          {
            source: '/:path*.map',
            destination: '/404'
          }
        ]
      };
    }

    return [];
  },
  // ...
};

module.exports = nextConfig;

Visit here for more information on using rewrites in Next.js

Answer №2

Why not consider routing your application through a content delivery network (CDN) instead of using the vercel.app domain?

Check out this article for more information on using Cloudflare with Vercel

You can utilize Cloudflare for free up to a certain extent for IP-based access (excluding public users) with their teams plan. Additionally, you have the option to add IP Access rules to specify the IP range for that specific path.

Learn more about configuring self-hosted apps with Cloudflare here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Updating Angular JS views in real-time using database changes

I am currently in the process of building a social networking application using AngularJS. I have come across an issue regarding data binding. In my app, there is a timeline div where all the recent posts are displayed, along with a status updater at the t ...

javascriptajaxangularjs

What is causing the lack of updated data on the components when navigating to a different page? (Vue.JS 2)

I am working with 2 components The first component looks like this : http://pastebin.com/M8Q3au0B Due to the long code, I have used pastebin for it The first component calls the second component The second component is as follows: <template> ...

javascriptvue.jsvuejs2vue-componentvue-resource

Angularjs scope throws TypeError when attempting to add an array

As someone diving into the world of Angular and JavaScript, I am tackling the challenge of creating a directive that requires adding an array to the directive's scope. Here's a snippet of the code for my directive: .directive("startupSections", ...

javascriptangularjs

Sending data through AJAX

I am currently working on a calendar project. I want to include a description box next to the calendar, where additional information about an event will be displayed when a user clicks on a specific date. Here is what I have so far in terms of HTML/PHP: ...

javascriptphphtmlajaxvariables

Error in Vue component when setting the background image URL

Here is my code snippet that sets the background image for a component: style() { return { "background-image": `url(${require(`../../../assets/images/${this .last_result}.png`)})` }; }, The expected URL should be ../../../assets/images/ ...

javascriptvue.js

Guide to transmitting and managing a JSON document utilizing JavaScript

When working on the server side, I receive a simple JSON file via REST that contains various IDs. Here is an example: [ { "_id": "5825a49dasdasdasd8417c1b6d5", } "_id": "dfsdfsdf4960932218417c1b6d5", } "_id": "23434344960932218417c1b6d5", },] To handle t ...

javascriptjsonmongodb

A step-by-step guide on converting JSON data from JavaScript to C# variables

Hey there! I have a JavaScript snippet where I am sending an array to my C# file in JSON format. var r=['maths','computer','physics'] $.post("Global.aspx", { opt: "postpost", post: w.val(),tags:JSON.stringify(r) }, function ...

c#javascriptjson

Deleting the main node in a JSON file containing multiple values

I am working with a JSON data stored in a variable. Here is the JSON Data: var employees = {"emp":{{"firstName":"John"},{"secondName":"John"}}}; My goal is to remove the emp node from the above JSON Data and have it as follows: {{"firstName":"John"},{" ...

javascriptjson

What is the best way to extract the value associated with the "first_name" key in the given object?

What is the best way to extract the value associated with the first_name key from the object below? { "first_name": "D", "last_name": "N", "phone_number": 1233414234 } ...

javascriptobject

Chrome and Internet Explorer are not prompting to save passwords after the input type has been altered by a script

I've encountered an issue with a form that includes: <input type="password" id="password" /> I want to display some readable text temporarily, so I used the following code: $('#password').prop('type', 'text'); ...

javascriptjquerygoogle-chromeinternet-explorerpasswords

Implementing CodeIgniter's HMVC structure to dynamically update data using AJAX functionality

Recently, I came across an AJAX function in an open-source code that caught my attention. function edit_person(id) { save_method = 'update'; $('#form')[0].reset(); // reset form on modals //Ajax Load data from ajax $.ajax({ ...

javascriptphpjqueryajaxcodeigniter

Switching between click and mouseenter in Angular 2+ is made easy with

I am currently working on developing a component for my application's menu. One of the requirements is that the sub-menus should open on mouseenter when the menu is in compact mode, and on click when it is in wide mode (both of these are defined as cs ...

javascriptangularangular-cli-v7

When Vuejs removes an element from an array, it may not completely erase it from the

Trying to execute the code below, I encountered an issue where removing one item from the array did not completely remove it (other checkboxes in each row remained). I attempted using :key="index" but that did not solve the problem. However, changing :key= ...

javascriptvue.js

The use of HTML5 required attribute is ineffective when submitting forms via AJAX

Seeking advice on implementing basic validation for a newsletter form that only requires an email address. The current page layout doesn't allow space for jQuery error messages, so I attempted to use the HTML 5 required attribute. However, the form st ...

javascriptjqueryajaxhtmlforms

Looping through required fields in jQuery based on a CSS class

Is there a way to loop through required fields marked with <input class="required">? Currently, only the first input in the loop is being evaluated. How can I traverse the DOM using a loop to check all input boxes? Thank you for your help. While I ...

javascriptjquerycssloops

Creating a unique card component with React and custom Tailwind CSS styling

I am working on creating a project component using React: Despite my efforts, I have not been able to find the correct documentation for assistance. Additionally, I am facing challenges in utilizing next/image to ensure that it is the correct size. This ...

cssreactjsnext.jstailwind-css

Passing data from child components to parent components in NextJs using Typescript

I have created a new component <ConnectWallet setConnected={(t: boolean) => console.log(t)}> <>test</> </ConnectWallet> The component is initialized as follows import { useState, useEffect } from ' ...

typescriptnext.js

Creating a shared singleton instance in Typescript that can be accessed by multiple modules

Within my typescript application, there is a Database class set up as a singleton to ensure only one instance exists: export default class Database { private static instance: Database; //Actual class logic removed public static getInstance() ...

javascriptnode.jstypescriptsingleton

Troubleshooting Bootstrap 4 Modal in JavaScript and Vue: Uncaught ReferenceError: $ is not defined

I'm struggling to figure out how to trigger a Bootstrap 4 modal from my Vue 3 app using JavaScript. Whenever I try to launch the modal, I keep encountering this error message: $ is not defined at eval When looking for solutions, I noticed that most a ...

javascriptvue.jsbootstrap-4

Is it possible to attach an onclick event to modify a data point in Chart.js?

Currently using chartjs for a small project and facing some challenges with editing data points. Is there a built-in function in this library that allows me to bind an onclick event for displaying a pop-up and removing the point? This is what I am lookin ...

javascriptchart.jschart.js2chartjs-2.6.0