@sentry/nextjs
Version:
Official Sentry SDK for Next.js
270 lines (232 loc) • 8.93 kB
JavaScript
import { GLOBAL_OBJ, parseSemver, suppressTracing, logger } from '@sentry/core';
import * as stackTraceParser from 'stacktrace-parser';
import { DEBUG_BUILD } from './debug-build.js';
const globalWithInjectedValues = GLOBAL_OBJ
;
/**
* Event processor that will symbolicate errors by using the webpack/nextjs dev server that is used to show stack traces
* in the dev overlay.
*/
async function devErrorSymbolicationEventProcessor(event, hint) {
// Filter out spans for requests resolving source maps for stack frames in dev mode
if (event.type === 'transaction') {
event.spans = event.spans?.filter(span => {
const httpUrlAttribute = span.data?.['http.url'];
if (typeof httpUrlAttribute === 'string') {
return !httpUrlAttribute.includes('__nextjs_original-stack-frame'); // could also be __nextjs_original-stack-frames (plural)
}
return true;
});
}
// Due to changes across Next.js versions, there are a million things that can go wrong here so we just try-catch the
// entire event processor. Symbolicated stack traces are just a nice to have.
try {
if (hint.originalException && hint.originalException instanceof Error && hint.originalException.stack) {
const frames = stackTraceParser.parse(hint.originalException.stack);
const nextjsVersion = globalWithInjectedValues.next?.version || '0.0.0';
const parsedNextjsVersion = nextjsVersion ? parseSemver(nextjsVersion) : {};
let resolvedFrames
;
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
if (parsedNextjsVersion.major > 15 || (parsedNextjsVersion.major === 15 && parsedNextjsVersion.minor >= 2)) {
const r = await resolveStackFrames(frames);
if (r === null) {
return event;
}
resolvedFrames = r;
} else {
resolvedFrames = await Promise.all(
frames.map(frame => resolveStackFrame(frame, hint.originalException )),
);
}
if (event.exception?.values?.[0]?.stacktrace?.frames) {
event.exception.values[0].stacktrace.frames = event.exception.values[0].stacktrace.frames.map(
(frame, i, frames) => {
const resolvedFrame = resolvedFrames[frames.length - 1 - i];
if (!resolvedFrame?.originalStackFrame || !resolvedFrame.originalCodeFrame) {
return {
...frame,
platform: frame.filename?.startsWith('node:internal') ? 'nodejs' : undefined, // simple hack that will prevent a source mapping error from showing up
in_app: false,
};
}
const { contextLine, preContextLines, postContextLines } = parseOriginalCodeFrame(
resolvedFrame.originalCodeFrame,
);
return {
...frame,
pre_context: preContextLines,
context_line: contextLine,
post_context: postContextLines,
function: resolvedFrame.originalStackFrame.methodName,
filename: resolvedFrame.originalStackFrame.file || undefined,
lineno: resolvedFrame.originalStackFrame.lineNumber || undefined,
colno: resolvedFrame.originalStackFrame.column || undefined,
};
},
);
}
}
} catch (e) {
return event;
}
return event;
}
async function resolveStackFrame(
frame,
error,
) {
try {
if (!(frame.file?.startsWith('webpack-internal:') || frame.file?.startsWith('file:'))) {
return null;
}
const params = new URLSearchParams();
params.append('isServer', String(false)); // doesn't matter since it is overwritten by isAppDirectory
params.append('isEdgeServer', String(false)); // doesn't matter since it is overwritten by isAppDirectory
params.append('isAppDirectory', String(true)); // will force server to do more thorough checking
params.append('errorMessage', error.toString());
Object.keys(frame).forEach(key => {
params.append(key, (frame[key ] ?? '').toString());
});
let basePath = process.env._sentryBasePath ?? globalWithInjectedValues._sentryBasePath ?? '';
// Prefix the basepath with a slash if it doesn't have one
if (basePath !== '' && !basePath.match(/^\//)) {
basePath = `/${basePath}`;
}
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 3000);
const res = await suppressTracing(() =>
fetch(
`${
// eslint-disable-next-line no-restricted-globals
typeof window === 'undefined' ? 'http://localhost:3000' : '' // TODO: handle the case where users define a different port
}${basePath}/__nextjs_original-stack-frame?${params.toString()}`,
{
signal: controller.signal,
},
).finally(() => {
clearTimeout(timer);
}),
);
if (!res.ok || res.status === 204) {
return null;
}
const body = await res.json();
return {
originalCodeFrame: body.originalCodeFrame,
originalStackFrame: body.originalStackFrame,
};
} catch (e) {
DEBUG_BUILD && logger.error('Failed to symbolicate event with Next.js dev server', e);
return null;
}
}
async function resolveStackFrames(
frames,
) {
try {
const postBody = {
frames: frames
.filter(frame => {
return !!frame.file;
})
.map(frame => {
// https://github.com/vercel/next.js/blob/df0573a478baa8b55478a7963c473dddd59a5e40/packages/next/src/client/components/react-dev-overlay/server/middleware-turbopack.ts#L129
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
frame.file = frame.file.replace(/^rsc:\/\/React\/[^/]+\//, '').replace(/\?\d+$/, '');
return {
file: frame.file,
methodName: frame.methodName ?? '<unknown>',
arguments: [],
lineNumber: frame.lineNumber ?? 0,
column: frame.column ?? 0,
};
}),
isServer: false,
isEdgeServer: false,
isAppDirectory: true,
};
let basePath = process.env._sentryBasePath ?? globalWithInjectedValues._sentryBasePath ?? '';
// Prefix the basepath with a slash if it doesn't have one
if (basePath !== '' && !basePath.match(/^\//)) {
basePath = `/${basePath}`;
}
const controller = new AbortController();
const timer = setTimeout(() => controller.abort(), 3000);
const res = await suppressTracing(() =>
fetch(
`${
// eslint-disable-next-line no-restricted-globals
typeof window === 'undefined' ? 'http://localhost:3000' : '' // TODO: handle the case where users define a different port
}${basePath}/__nextjs_original-stack-frames`,
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
signal: controller.signal,
body: JSON.stringify(postBody),
},
).finally(() => {
clearTimeout(timer);
}),
);
if (!res.ok || res.status === 204) {
return null;
}
const body = await res.json();
return body.map(frame => {
return {
originalCodeFrame: frame.value.originalCodeFrame,
originalStackFrame: frame.value.originalStackFrame,
};
});
} catch (e) {
DEBUG_BUILD && logger.error('Failed to symbolicate event with Next.js dev server', e);
return null;
}
}
function parseOriginalCodeFrame(codeFrame)
{
const preProcessedLines = codeFrame
// Remove ASCII control characters that are used for syntax highlighting
.replace(
// eslint-disable-next-line no-control-regex
/[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g, // https://stackoverflow.com/a/29497680
'',
)
.split('\n')
// Remove line that is supposed to indicate where the error happened
.filter(line => !line.match(/^\s*\|/))
// Find the error line
.map(line => ({
line,
isErrorLine: !!line.match(/^>/),
}))
// Remove the leading part that is just for prettier output
.map(lineObj => ({
...lineObj,
line: lineObj.line.replace(/^.*\|/, ''),
}));
const preContextLines = [];
let contextLine = undefined;
const postContextLines = [];
let reachedContextLine = false;
for (const preProcessedLine of preProcessedLines) {
if (preProcessedLine.isErrorLine) {
contextLine = preProcessedLine.line;
reachedContextLine = true;
} else if (reachedContextLine) {
postContextLines.push(preProcessedLine.line);
} else {
preContextLines.push(preProcessedLine.line);
}
}
return {
contextLine,
preContextLines,
postContextLines,
};
}
export { devErrorSymbolicationEventProcessor };
//# sourceMappingURL=devErrorSymbolicationEventProcessor.js.map