Importing in sentry.client/server.js causes Error: Aborted because ... is not accepted error

[larsqa]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which package are you using?

@sentry/nextjs

SDK Version

7.21.0

Framework Version

Next.js v12.3.0

Link to Sentry event

No response

Steps to Reproduce

My Next.js project contains:

• /sentry.server.config.js
• /sentry.client.config.js
• /sentry.common.config.js <- my custom file having rules/hooks that both the server and client config share

With the /sentry.common.config.js file, my terminal now throws: Error: Aborted because ./sentry.common.config.js is not accepted errors.

I'd guess that sentry reserves the right for all sentry.*.config.js files, where * must be an accepted name and the file itself must initialize a sentry config.

I fail to find the above assumption in the documentation and am curious as to how else I then should create this common file? Furthermore, I've found several feature request issues asking for the possibility of moving the config files in folders and not pollute the root directory. However, having a whole /sentry directory just for this single common config file seems unnecessary too.

Expected Result

N/A

Actual Result

N/A

[lforst]

Can you please share the entire error message?

[larsqa]

Error: Aborted because ./sentry.common.config.js is not accepted is the entire message. There is no stack trace or more context.

[lforst]

I cannot reproduce the problem with the instructions you provided. Please provide a minimal reproduction example.

My suspicion is that this is not a problem with the SDK but rather a limitation by Webpack/Next.js depending on what you do in sentry.common.config.js.

[larsqa]

In my sentry.common.config.js am i defining the beforeSend and beforeSendTransaction hook to be used for the client and server config.

E.g.

/**
 * beforeSend Hook with data scrubbing
 * @param {Event} event Sentry Event object available in the beforeSend hook
 * @returns {Event} Modified event with scrubbed data
 */
export const beforeSend = (event) => {
    const exception = scrubData(event.exception, keyBlacklist, scrubCallback);

    // breadcrumbs only uses sentry properties, not dynamic properties from our codebase.No need to apply a list of blacklisted properties
    const breadcrumbs = scrubData(event.breadcrumbs, null, scrubCallback);
    const request = scrubData(event.request, keyBlacklist, scrubCallback);

    return {
        ...event,
        exception,
        breadcrumbs,
        request,
    };
};

/**
 * beforeSendTransaction Hook with data scrubbing
 * @param {Event} event Sentry Event object available in the beforeSend hook
 * @returns {Event} Modified event with scrubbed data
 */
export const beforeSendTransaction = (event) => {
    // spans contain performance data which may include raw urls.
    // Here, we must lookout for url values, e.g. "/[email protected]" or "/phone-number/reserve/9281929" and remove personal information
    const spans = scrubData(event.spans, null, scrubCallback);
    const breadcrumbs = scrubData(event.breadcrumbs, null, scrubCallback); // breadcrumbs only uses sentry properties, no need to apply a list of blacklisted properties
    const request = scrubData(event.request, keyBlacklist, scrubCallback);
    return {
        ...event,
        spans,
        breadcrumbs,
        request,
    };
};

Where scrubData is a method that traverses through all nested objects/array elements, and looks for blacklisted key names or applies data scrubbing on the primitive value.

[lforst]

Unfortunately, this doesn't help debugging the issue you're describing. Please provide a minimal reproduction example we can clone or use a small Stackblitz example we can look at.

[larsqa]

Do you have a Stackblitz boilerplate that uses Next.js and Sentry?

[lforst]

Sadly no.

[larsqa]

I think i narrowed it down a bit further.

1. /sentry.common.config.js has

export const beforeSend = (event) => event;

2. /sentry.client.config.js imports the method and uses it

import * as Sentry from "@sentry/nextjs";
import { beforeSend } from "sentry.common.config";

Sentry.init({
    // ...
    beforeSend,
});

3. Run npm run dev, visit some pages, and trigger a hot reload by adding a comment inside /sentry.client.config.js and saving it.
4. The exception appears, followed by a stack trace:

Error: Aborted because ./sentry.client.config.js is not accepted
Update propagation: ./sentry.client.config.js
    at a (http://localhost:3000/_next/static/chunks/webpack.js?ts=1670335173897:1:9294)
    at http://localhost:3000/_next/static/chunks/webpack.js?ts=1670335173897:1:4052
    at Array.map (<anonymous>)

[lforst]

Ok I can reproduce now. Thank you! Putting this on our backlog.

[larsqa]

Great! Any idea why this happens? ESM/CJS issue?

[lforst]

Not atm, most likely some webpack shenanigans.

[ForeshadowRU]

Any updates on this? I'm having the same issue

[lforst]

@ForeshadowRU what SDK version are you on?

[lforst]

I think this is fixed in the newest SDK + Next.js version. Feel free to ping us if that is not the case!