Integrate stacktrace and fingerprint of an error from a privileged/isolated context

[GaurangTandon]

Problem Statement

I have a privileged/isolated JavaScript context in my application. It uses IPC to inform the main JavaScript context of any errors. I cannot add Sentry to my privileged context. So, Sentry is only enabled in the main context.

I am sending the error details via IPC from the privileged context, and then doing captureException(new Error(errorMessage)) in the main context. This notifies me of errors, but it doesn't work well in general.

The primary issue is that the stack trace is from another file (in privileged context), and I have it in a string variable (stackTraceStr) in a different file (in the main context). I am not able to tell Sentry to parse the stackTraceStr intelligently as the actual/real stack trace. If Sentry would be able to do that, that would solve both my problems (lack of proper fingerprinting and lack of a proper stacktrace)

I am allowed to upload the sourcemaps for the privileged context source files to Sentry. But I need an API call, for example: scope.setStackTrace(stackTraceStr) (and, if Sentry can't parse the files automatically, scope.setFiles(filePathList)) to indicate to Sentry what is the real stack trace it should be looking at.

I hope it makes sense.

Solution Brainstorm

No response

┆Issue is synchronized with this Jira Epic by Unito

[getsantry]

Assigning to @getsentry/support for routing, due by Monday, February 6th at 17:00 (yyz). ⏲️

[getsantry]

Routing to @getsentry/ingest for triage, due by Wednesday, February 8th at 16:21 (vie). ⏲️

[getsantry]

Routing to @getsentry/team-web-sdk-frontend for triage, due by Tuesday, February 7th at 5:00 pm (sfo). ⏲️

[Lms24]

Hi @GaurangTandon, can you provide a sample of how such an error message would look? IIUC, the problem is that the stack trace is basically just a string that's inside of error.message, while error.stack is undefined, right? If you're using sentry.io, would you mind posting a link to a sample event so we can have a glance at how it currently looks?

You're using the @sentry/node SDK, right? Our stack parser should pick up and parse the stack trace, if error.stack is defined.

[GaurangTandon]

I'm using @sentry/javascript. Here's an error on Sentry.io. For context, here's the IPC listener I am using:

// msg == { error: string, extraData: { stack: string, type: string } }
switch (...) {
      case 'reportError':
        const capturedError = new Error(msg.error);
        const extraData = msg.extraData;
        withScope((scope) => {
          if (extraData) {
            scope.setExtras(extraData);
          }

          const fingerprint = ['{{ default }}', msg.error];
          if (extraData) {
            if (extraData.stack) {
              fingerprint.push(stack);
            }
            if (extraData.type) {
              fingerprint.push(extraData.type);
            }
          }
          scope.setFingerprint(fingerprint);
          scope.setTag('context', 'privileged');
          captureException(capturedError);
        });
        break;
}

The privileged context will send a message like this:

   window.addEventListener('error', function (e) {
      const extraData = {};
      extraData.message = e.error.message;
      extraData.stack = e.error.stack;
      const message = e.error.message;
      promiseSendMessage({ request: 'reportError', error, extraData });
   });

I hope this gives complete context.

[AbhiPrasad]

Hey @GaurangTandon, why not just use the privileged context's stack when you call captureException? Like with capturedError.stack = extraData.stack.

If you want to maintain the call stack of the IPC listener, you can take advantage of https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Error/cause.

window.addEventListener('error', function (event) {
  const { error } = event;
  const { name, message, stack } = error;
  promiseSendMessage({ request: 'reportError', error, name, message, stack  });
});

switch (...) {
      case 'reportError':
        const { name, message, stack  } = msg;
        const capturedError = new Error(message);
        capturedError.stack = stack;
        capturedError.name = name;

        withScope((scope) => {
          scope.setTag('context', 'privileged');

          const mainProcessError = new Error('reportError with ' + message);
          mainProcessError.source = capturedError
          captureException(mainProcessError);
        });
        break;
}

[GaurangTandon]

@AbhiPrasad Thanks for the suggestion. I'll try it and get back to you tomorrow.

[GaurangTandon]

@AbhiPrasad Your suggestion works really well and solves two of my big problems: automatic fingerprinting and intelligently parsed stack traces.

The stack traces are almost there, but not quite, for example, they look like this (sample sentry link):

Is it possible to see the contextual code instead of "No additional details are available for this frame"?

[AbhiPrasad]

@GaurangTandon it seems that the sourcemap is not applying. Maybe change the upload so it adds the /deploy/extension prefix?

See: https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/#verify-artifact-names-match-stack-trace-frames

[AbhiPrasad]

You can run the sentry-cli sourcemaps explain EVENT_ID where EVENT_ID is something like fdfd1337e3964cd6a4d11f35357a4c43 to debug why sourcemaps were not applied to an event.

[GaurangTandon]

Hey @AbhiPrasad , I spent a lot of time looking through this (went through all the troubleshooting steps) and I could not fix this issue.

I did try with a bunch of different url-prefix options, and none of them worked. Note that I don't think --url-prefix is the issue, because in that Sentry event, you can see that the first/primary error had its stack trace resolved correctly. But the second error did not have its stack trace resolved. The first file is built using webpack and the second is built using terser, could that be an issue?

On using sourcemaps explain, I get the error: "[missing context line]". I have validated my sourcemaps locally with Mozilla's source-map package as well, and they are able to resolve the exact symbol name perfectly.

Can I get some more pointers on this? Or, if this is beyond the scope of this issue, should I raise a support call for guidance on this? Let me know.

[AbhiPrasad]

I would recommend reaching out to Sentry support for this @GaurangTandon - they will be able to help you investigate in more detail!

[GaurangTandon]

For future internet travellers, I solved the issue of "[missing context line]" by switching from terser to webpack. I tried different terser source map options but none of them had worked. Webpack worked first try with this command:

webpack --mode=production ./path/to/file.js --output-path ./path/to/dist --output-filename file.js --devtool source-map

[chadwhitacre]

Sorry for the bot fail close. Seems to actually be closed though now. 🐭

[GaurangTandon]

No problem @chadwhitacre Yes this issue is solved now 🙂