sentry-electron: Can't configure Sentry for a Figma plugin code (running inside an Electron isolated context)

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)

Electron SDK Version

Unknown, I’m using Figma 116.9.6

Electron Version

22.3.5

What platform are you using?

MacOS

Link to Sentry event

No response

Steps to Reproduce

I’m not that familiar with Electron, but simply importing a sentry package on the code side of my Figma plugin breaks Figma itself.

This documentation page has an explanation on how plugins run inside of Figma.

I had no problems setting up Sentry on the UI part of the plugin which runs inside an iframe.

Here’s my rollup config that builds the code that runs on the ssandbox:

import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { sentryRollupPlugin } from "@sentry/rollup-plugin";

export default [
  // CODE.JS
  // The part that communicates with Figma directly
  // Runs in a sandboxed environment (isolated context in electron)
  // with no access to Node, the DOM, or any of the node/browser APIs
  {
    input: "src/code/init.ts",
    output: {
      file: "dist/code.js",
      format: "iife",
      name: "code",
      sourcemap: true,
    },
    plugins: [
      typescript(),
      resolve({
        browser: true,
        moduleDirectories: ["node_modules"],
      }),
      commonjs({ transformMixedEsModules: true, typescript: true }),
      // production && terser(),
      // Put the Sentry rollup plugin after all other plugins
      sentryRollupPlugin({
        org: "toki-labs",
        project: "cva-code",

        // Auth tokens can be obtained from https://sentry.io/settings/account/api/auth-tokens/
        // and need `project:releases` and `org:read` scopes
        authToken: "xxxxxxxxxxxx",
      })
    ],
  }
]

Expected Result

Figma does not crash and errors are sent to Sentry

Actual Result

Here’s the error I’m getting:

00:24:17.803 figma_app.min.js.br:5 Error: Syntax error on line 2380: Unexpected token ...
    at sHo (figma_app.min.js.br:1628:98)
    at async figma_app.min.js.br:1758:6222
(anonymous) @ figma_app.min.js.br:5
vef @ figma_app.min.js.br:1758
await in vef (async)
(anonymous) @ figma_app.min.js.br:1758
(anonymous) @ figma_app.min.js.br:1758
runLastPlugin @ figma_app.min.js.br:2409
_FigmaApp_runLastPlugin @ compiled_wasm.js.br:2
$wasm-function[12721] @ compiled_wasm.wasm.br:0xa5d952
$wasm-function[19997] @ compiled_wasm.wasm.br:0xc1b6a8
$wasm-function[1022] @ compiled_wasm.wasm.br:0x21a75
$wasm-function[18831] @ compiled_wasm.wasm.br:0xbfea0a
$wasm-function[8628] @ compiled_wasm.wasm.br:0x662bca
$wasm-function[29734] @ compiled_wasm.wasm.br:0xfd09e1
$wasm-function[3412] @ compiled_wasm.wasm.br:0x1a2cc7
$wasm-function[26663] @ compiled_wasm.wasm.br:0xd6f638
(anonymous) @ compiled_wasm.js.br:2
wrappedCallback @ compiled_wasm.js.br:2
r @ figma_app.min.js.br:16

About this issue

Original URL
State: open
Created a year ago
Comments: 19 (6 by maintainers)

Most upvoted comments

Here you go @iamtekeste

what was missing:

esbuild option sourcemap should be set to "inline"
added the keepNames: true to show original function names when minifying (optional)

Some extras (just for fun):

Added a --show-config option you can pass to build-figma-plugin to show build config
esbuild.base.config to share common config options among main and ui
esbuild.mergeConfigs.js to merge all config objects (CFP <|-- base.config <|-- build-figma-plugin.(main|ui).js)
added support for --esb-* CLI options so any esbuild option in the root level can be overridden via command line
configured npm scripts for each scenario: build, build:with-maps, build:show-config, and watch

Remember to enable the Developer VM!

Here’s the PR with the changes

And if you want to debug in VS Code navigating through the original code, read this article I wrote a while ago

╭─ ~/projects/fun/figma-sourcemaps-issue on main !3 ?4 
╰─❯ pnpm run build:with-maps --show-config

> @ build:with-maps /Users/svallory/projects/fun/figma-sourcemaps-issue
> build-figma-plugin --typecheck --minify --esb-keep-names --esb-sourcemap=inline "--show-config"

info Typechecking...
success Typechecked in 1.677s
info Building...

///////////////////////////////////////////////////////////////
    esbuild configuration for main.js
===============================================================

{
  bundle: true,
  logLevel: 'silent',
  minify: true,
  outfile: '/Users/svallory/projects/fun/figma-sourcemaps-issue/build/main.js',
  platform: 'neutral',
  plugins: [],
  // ...
  target: 'es2017',
  sourcemap: 'inline',
  keepNames: true
}

///////////////////////////////////////////////////////////////


///////////////////////////////////////////////////////////////
    esbuild configuration for ui.js
===============================================================

{
  bundle: true,
  jsxFactory: 'h',
  jsxFragment: 'Fragment',
  loader: {
    '.gif': 'dataurl',
    '.jpg': 'dataurl',
    '.png': 'dataurl',
    '.svg': 'dataurl'
  },
  logLevel: 'silent',
  minify: true,
  outfile: '/Users/svallory/projects/fun/figma-sourcemaps-issue/build/ui.js',
  plugins: [
    { name: 'preact-compat', setup: [Function: setup] },
    { name: 'css-modules', setup: [Function: setup] }
  ],
  // ...
  target: 'chrome58',
  sourcemap: 'inline',
  keepNames: true
}

///////////////////////////////////////////////////////////////

success Built in 0.674s

svallory on Nov 30, 2023

I could use any help or other approaches you can recommend!

Hey @iamtekeste,

This is a wild guess, but looking at the result you are getting from stacktracify, I think you are missing source maps. Here’s why:

Method e was correctly unminified to render, so the source maps for your code is there. But methods from packages were not. You may want to check what’s in your source map using the source-map package or by modifying the stacktracify code to log some stuff, e.g. by uncommenting this line to show the source content.

There are too many variables to list. E.g. what bundler are you using, are you using IIFE, are the source maps embedded in the files, etc. So, if you want (and can) to create a repo and share your files (or some demo files) all take a look at it. I’ve already created a Figma test runner and an RPC lib that will be part of @figma-plugin-sdk, and I think adding production debug helpers would be an awesome addition.

Btw, If Sentry wants to sponsor it, I can make a sentry-figma-plugin package instead of a generic one XD

svallory on Nov 14, 2023

@svallory amazing work, this going to improve my debugging workflow by a lot! Hit me up whenever you setup your sponsorship page so I can contribute a little bit.

iamtekeste on Nov 30, 2023

Hey, @iamtekeste! I’m so sorry. I don’t know how I missed your response. Are you still having issues with the sourcemaps? I’ll take a look at your repo now

@AbhiPrasad I never pinged you because the monitoring got sent back to backlog and launching v2 was more important. We’ll launch it this week though, so I’ll ping you now

svallory on Nov 29, 2023

Subscribing to this thread, as I’d also like to see a sentry package for Figma plugins.

cameronmcefee on Nov 28, 2023

We should try to see if we can get someone from figma to help here. @iamtekeste I’m fairly certain the issue is also with sourcemaps. Sentry has a guide for verifying if sourcemaps are working, you can follow this part of the Sentry docs for it.

@svallory were you able to get the discord going okay? still available there to chat!

As an aside:

We do offer sponsorships for open source projects (gave away 500k recently)!

Happy to ask to get your name/GH org added to our yearly fund for the extra help here!

AbhiPrasad on Nov 20, 2023