Can't configure Sentry for a Figma plugin code (running inside an Electron isolated context) #680
Comments
|
The Electron SDK is designed to work in Electron apps where you control the full app code. Figma is an Electron app but it looks like Figma plugins have their own sandboxed runtime which is nothing like that of plain Electron. For example, the Electron SDK uses Electrons IPC to communicate between the browser and main process code. Figma supports something similar via it's own API's but this SDK was never designed to use them. It looks like there are other restrictions which might limit many other features of the SDK. Have you tried using the Sentry browser SDK in your front end and the Node SDK in your backend? |
I did and it didn't work either. I checked the API docs to see if I could call the API directly to create events but didn't an endpoint for that. Is there documentation on how to manually talk to Sentry using plain javascript? Here's everything I have access to from the plugin main thread in the sandbox: {
"clearInterval": "ƒ innerRealmSafeFunction(...innerRealmArgs)",
"clearTimeout": "ƒ innerRealmSafeFunction(...innerRealmArgs)",
"console": "{log: ƒ, error: ƒ, assert: ƒ, info: ƒ, warn: ƒ, …}",
"fetch": "ƒ innerRealmSafeFunction(...innerRealmArgs)",
"figma": "{apiVersion: '1.0.0', getStyleById: ƒ, moveLocalPaintStyleAfter: ƒ, moveLocalTextStyleAfter: ƒ, moveLocalGridStyleAfter: ƒ, …}",
"setInterval": "ƒ innerRealmSafeFunction(...innerRealmArgs)",
"setTimeout": "ƒ innerRealmSafeFunction(...innerRealmArgs)",
"Infinity": "Infinity",
"Array": "ƒ Array()",
"ArrayBuffer": "ƒ ArrayBuffer()",
"Boolean": "ƒ Boolean()",
"DataView": "ƒ DataView()",
"Date": "ƒ Date()",
"Error": "ƒ Error()",
"EvalError": "ƒ EvalError()",
"Float32Array": "ƒ Float32Array()",
"Float64Array": "ƒ Float64Array()",
"Function": "ƒ ()",
"Int8Array": "ƒ Int8Array()",
"Int16Array": "ƒ Int16Array()",
"Int32Array": "ƒ Int32Array()",
"Intl": "Intl {getCanonicalLocales: ƒ, supportedValuesOf: ƒ, DateTimeFormat: ƒ, NumberFormat: ƒ, Collator: ƒ, …}",
"JSON": "JSON {Symbol(Symbol.toStringTag): 'JSON', parse: ƒ, stringify: ƒ}",
"Map": "ƒ Map()",
"Math": "Math {abs: ƒ, acos: ƒ, acosh: ƒ, asin: ƒ, asinh: ƒ, …}",
"NaN": "NaN",
"Number": "ƒ Number()",
"Object": "ƒ Object()",
"Promise": "ƒ Promise()",
"Proxy": "ƒ Proxy()",
"RangeError": "ƒ RangeError()",
"ReferenceError": "ƒ ReferenceError()",
"Reflect": "Reflect {defineProperty: ƒ, deleteProperty: ƒ, apply: ƒ, construct: ƒ, get: ƒ, …}",
"RegExp": "ƒ RegExp()",
"Set": "ƒ Set()",
"String": "ƒ String()",
"Symbol": "ƒ Symbol()",
"SyntaxError": "ƒ SyntaxError()",
"TypeError": "ƒ TypeError()",
"URIError": "ƒ URIError()",
"Uint8Array": "ƒ Uint8Array()",
"Uint8ClampedArray": "ƒ Uint8ClampedArray()",
"Uint16Array": "ƒ Uint16Array()",
"Uint32Array": "ƒ Uint32Array()",
"WeakMap": "ƒ WeakMap()",
"WeakSet": "ƒ WeakSet()",
"alert": "ƒ innerRealmSafeFunction(...innerRealmArgs)",
"decodeURI": "ƒ decodeURI()",
"decodeURIComponent": "ƒ decodeURIComponent()",
"encodeURI": "ƒ encodeURI()",
"encodeURIComponent": "ƒ encodeURIComponent()",
"escape": "ƒ escape()",
"eval": "ƒ eval()",
"isFinite": "ƒ isFinite()",
"isNaN": "ƒ isNaN()",
"parseFloat": "ƒ parseFloat()",
"parseInt": "ƒ parseInt()",
"undefined": "undefined",
"unescape": "ƒ unescape()"
} |
|
One way to make it work I guess is to send the error in a message (via Figma's messaging API) and have the UI forward it to Sentry. If that's the way to go, I would love some guidance on how to neither lose nor mess up event information (especially regarding error location) |
|
@svallory you might unfortunately have to directly construct event objects, serialize them across the wire and then call |
|
@AbhiPrasad this got sent way down in our priority list back then. But now, with the official launch coming up, we'll soon start working on a Figma plugin SDK which will include several packages. We've already created a test runner, RPC, and typed message bus. We'll just need to extract them into publishable packages. All written in pure ECMAScript and able to run anywhere. I would love to include a figma-sentry package to the mix! Is that something that could interest Sentry? I mean to the point of allocating a developer to work with me on this. I'm pretty much an expert on Figma plugin dev now, after all these months and with someone that knows the Sentry API and either sentry-electron or (probably more appropriate) sentry-javascript package, I think we could create that package pretty fast. Also, I can do most of the coding, mostly what I need is a guide through the codebase, so I don't have to study all of it. I think that's good marketing for Sentry. In fact, Figma's plugin development experience is in desperate need of some tools to improve DX. Specially for complex plugins. Also, if it runs on Figma, it'll probably run on any other javascript plugin env out there, like Coda plugins and Notion integrations |
|
Hey @svallory! A separate package sounds like a great idea! Ping me on the Sentry discord @AbhiPrasad and I'm happy to hop on a call to walk through things! Interested in your architecture and the constraints of the figma environment. |
|
@svallory I'm curious if you were able to handle the stacktrace issues reported here getsentry/sentry-javascript#8860? |
Awesome! I'll definitely do that. :)
I haven't had that issue since we did not add Sentry to our product yet. But from a quick look, during development, enabling Figma's "Developer VM" should fix it. I'm not a 100% sure that is fixable for stacks captured in production, but if it is, there are only two options:
In fact, I don't remember if I ever got source maps to work without embedding them |
I have a feeling that this might be the only way - but might have to run this in a worker for performance reasons. |
|
I am also looking into how to debug figma plugin JS error in production and not having luck! Here is what I have tried so far. Uncaught Error: failing
at o (<anonymous>:1:14147)
at e (<anonymous>:1:14176)
at Object.__ (<anonymous>:1:14196)
at X (<anonymous>:1:11332)
at Array.forEach (<anonymous>)
at Xo (<anonymous>:1:11019)I renamed Uncaught Error: failing
at o (<ui.js>:1:14147)
at e (<ui.js>:1:14176)
at Object.__ (<ui.js>:1:14196)
at X (<ui.js>:1:11332)
at Array.forEach (<ui.js>)
at Xo (<ui.js>:1:11019)I then run it through stacktracify which spits out this Uncaught Error: failing
at [unknown] (../src/ui.tsx:1:0)
at render (../src/ui.tsx:21:15)
at [unknown] (<stdin>:2:21)
at [unknown] (../node_modules/preact/hooks/src/index.js:507:1)
at Array.forEach
at clearTimeout (../node_modules/preact/hooks/src/index.js:443:2)So it got the file name correct the original file name was indeed called Here is what import { render } from "@create-figma-plugin/ui";
import { h } from "preact";
import { useEffect } from "preact/hooks";
function Plugin() {
const mysecondfunc = () => {
throw new Error("failing");
};
const myfirstfunc = () => {
mysecondfunc();
};
useEffect(() => {
myfirstfunc();
}, []);
return <h1>hello</h1>;
}
export default render(Plugin);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 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 |
|
@svallory thank you for the offer! @figma-plugin-sdk sounds interesting! As someone who builds lots of figma plugins I am always looking to improve my workflow! |
|
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! |
|
Subscribing to this thread, as I'd also like to see a sentry package for Figma plugins. |
|
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 |
|
Here you go @iamtekeste what was missing:
Some extras (just for fun):
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 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. |
|
We're continuing the chat about this on discord: https://discord.com/channels/621778831602221064/1179816276009439302 |
|
This is technically off topic for the thread here, but looking at the original error you posted: I've run into this myself, the cause being that Sentry seems to be compiled for es6. Figma doesn't support the spread operator, so it's failing to parse the Sentry code. Using Sentry with Figma seems to also require some additional configuration to transpile it so it can even be used. |
Is there an existing issue for this?
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:
Expected Result
Figma does not crash and errors are sent to Sentry
Actual Result
Here's the error I'm getting:
The text was updated successfully, but these errors were encountered: