null is not an object (this._cacheContext.translate / this._cacheContext.setTransform)

[andrejslogins]

My apologies, writing the first issue for fabric.js (as well as 2nd time diving into this codebase internally) that is rather hard to reproduce.
I'm currently investigating this and plan to create a PR for it unless somebody has some cool insight that could help.

Version

5.1.0

Information about environment:

Browser:
Which browsers?
Chrome 95 (Both macOS and Windows),
Mobile safari 15.3
Would be safe to assume other browsers as well

Summary
_updateCacheCanvas in some cases gets called without having _cacheContext
(src/shapes/object.class.js)

This has not happened for me personally (not on my device), but this is one of the biggest things sentry caches for some of the users in one of the projects I'm part of.

Error Message & Stack Trace

Error for .translate

TypeError: null is not an object (evaluating 'this._cacheContext.translate')
  at _updateCacheCanvas(/build/main.2ad6c39eea318ff1a50f.js:1:156023)
  at _createCacheCanvas(/build/main.2ad6c39eea318ff1a50f.js:1:154290)
  at renderCache(/build/main.2ad6c39eea318ff1a50f.js:1:160204)
  at _drawClipPath(/build/main.2ad6c39eea318ff1a50f.js:1:161702)
  at drawObject(/build/main.2ad6c39eea318ff1a50f.js:1:161554)
  at renderCache(/build/main.2ad6c39eea318ff1a50f.js:1:160313)
  at render(/build/main.2ad6c39eea318ff1a50f.js:1:159936)
  at _renderObjects(/build/main.2ad6c39eea318ff1a50f.js:1:102354)
  at renderCanvas(/build/main.2ad6c39eea318ff1a50f.js:1:101647)
  at renderAll(/build/main.2ad6c39eea318ff1a50f.js:1:123910)
  at renderAndReset(/build/main.2ad6c39eea318ff1a50f.js:1:100833)
  at renderAndReset([native code])
  at i(/build/main.2ad6c39eea318ff1a50f.js:1:1262561)
  at ? (/build/polyfills.a4bf941f0f8d5c4b9264.js:1:35310)
  at onInvokeTask(/build/main.2ad6c39eea318ff1a50f.js:1:1124990)
  at runTask(/build/polyfills.a4bf941f0f8d5c4b9264.js:1:6605)
  at invokeTask(/build/polyfills.a4bf941f0f8d5c4b9264.js:1:12288)

Error for .setTransform

TypeError: null is not an object (evaluating 'this._cacheContext.setTransform')
  at _updateCacheCanvas(/build/main.4b27a5eed4e0f36bd96a.js:1:155767)
  at isCacheDirty(/build/main.4b27a5eed4e0f36bd96a.js:1:162004)
  at renderCache(/build/main.4b27a5eed4e0f36bd96a.js:1:160224)
  at render(/build/main.4b27a5eed4e0f36bd96a.js:1:159936)
  at _renderObjects(/build/main.4b27a5eed4e0f36bd96a.js:1:102354)
  at renderCanvas(/build/main.4b27a5eed4e0f36bd96a.js:1:101647)
  at renderAll(/build/main.4b27a5eed4e0f36bd96a.js:1:123910)
  at renderAndReset(/build/main.4b27a5eed4e0f36bd96a.js:1:100833)
  at renderAndReset([native code])
  at i(/build/main.4b27a5eed4e0f36bd96a.js:1:1262561)
  at ? (/build/polyfills.a4bf941f0f8d5c4b9264.js:1:35310)
  at onInvokeTask(/build/main.4b27a5eed4e0f36bd96a.js:1:1124990)
  at runTask(/build/polyfills.a4bf941f0f8d5c4b9264.js:1:6605)
  at invokeTask(/build/polyfills.a4bf941f0f8d5c4b9264.js:1:12288)

Expected Behavior

Error does not get thrown

Actual Behavior

Error gets thrown

[andrejslogins]

Added a PR #7694
This likely should fix the issue by adding additional checks for the _cacheContext

[ShaMan123]

Do you now when it happens? Is it production env or dev?
For example react in dev mode will throw something similar if you have an animation that didn't clean up. Basically if you have a memory leak.
I don't know if it's a bug or not but better to investigate thoroughly.
What is invokeTask that from the stack trace?

[andrejslogins]

This happens on production @ShaMan123 , we're running an angular app with rxjs, and this supposedly happens for us when initialising.
We're not really using animations from fabric.js, as we usually just parse the svg and present it to the user (as well as having some handlers on moving/scaling/rotating, etc)

As for onInvokeTask, this seems to be coming internally from angular, based on change detection.
We're using observable pattern there, though i doubt that should be the cause for any of those issues

[andrejslogins]

I'm happy to help out with other issues that we're also receiving for production on sentry, will likely create issues for those as well.

[ShaMan123]

I am not familiar with those frameworks בתאריך יום ו׳, 18 בפבר׳ 2022, 10:48, מאת Andrejs ***@***.***

…

: I'm happy to help out with other issues that we're also receiving for production on sentry, will likely create issues for those as well. — Reply to this email directly, view it on GitHub <#7693 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AIGAW4JKBQJWF2TK6TLCWVLU3YBVNANCNFSM5OVDT6VQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you were mentioned.Message ID: ***@***.***>

[andrejslogins]

I am not familiar with those frameworks בתאריך יום ו׳, 18 בפבר׳ 2022, 10:48, מאת Andrejs @.***
…
: I'm happy to help out with other issues that we're also receiving for production on sentry, will likely create issues for those as well. — Reply to this email directly, view it on GitHub <#7693 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIGAW4JKBQJWF2TK6TLCWVLU3YBVNANCNFSM5OVDT6VQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub. You are receiving this because you were mentioned.Message ID: @.***>

I don't see a reason why they should be related to the internal issue though.

Basically rxjs is letting us use observables to calculate values - angular is not really doing anything else than rendering the <canvas> element here

It's not like I'm explicitly trying to access _cacheContext for the objects

[asturur]

i m not sure how the error happens, but since we use both canvas and context, adding the check for both is fine.

[andrejslogins]

Thank you!