Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeError Cannot read property 'points' of undefined. #480

Closed
ndbroadbent opened this issue Apr 27, 2020 · 2 comments · Fixed by #481
Closed

TypeError Cannot read property 'points' of undefined. #480

ndbroadbent opened this issue Apr 27, 2020 · 2 comments · Fixed by #481

Comments

@ndbroadbent
Copy link
Contributor

ndbroadbent commented Apr 27, 2020

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

My app is crashing and sending the following error report to Sentry:

Version: Signature Pad v3.0.0-beta.3

TypeError: Cannot read property 'points' of undefined
TypeError: Cannot read property 'points' of undefined
  at _strokeUpdate(./node_modules/signature_pad/dist/signature_pad.m.js:278:43)
  at _strokeEnd(./node_modules/signature_pad/dist/signature_pad.m.js:298:14)
  at HTMLDocument._handleMouseUp(./node_modules/signature_pad/dist/signature_pad.m.js:141:22)
    _strokeUpdate(event) {
        const x = event.clientX;
        const y = event.clientY;
        const point = this._createPoint(x, y);
        const lastPointGroup = this._data[this._data.length - 1];
=>      const lastPoints = lastPointGroup.points;
        const lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
        const isLastPointTooClose = lastPoint ? point.distanceTo(lastPoint) <= this.minDistance : false;
        const color = lastPointGroup.color;
        if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
            const curve = this._addPoint(point);

...

       this._handleMouseUp = (event) => {
            if (event.which === 1 && this._mouseButtonDown) {
                this._mouseButtonDown = false;
=>              this._strokeEnd(event);
            }
        };

I've found the source code here: https://github.com/szimek/signature_pad/blob/master/src/signature_pad.ts#L271-L275

    const lastPointGroup = this._data[this._data.length - 1];
    const lastPoints = lastPointGroup.points;

Not sure how this happened, and I also can't reproduce it on my computer. Sorry I don't have any more information yet, but I'll try to add some more context to the error reports if it happens again.

@ndbroadbent
Copy link
Contributor Author

I think I've figured out a possible way that this could be caused. My application calls clear(), and this resets this._data to []. Sometimes this is called asynchronously after data is updated. If someone is in the middle of drawing a signature, then each _strokeUpdate event will crash with this error.

this._data[this._data.length - 1]
// this._data.length == 0
=> this._data[-1]
=> null

I'm still not 100% sure where this is being triggered in my app, but it might be nice to protect against this case.

@ndbroadbent
Copy link
Contributor Author

Fixed in #481

szimek added a commit that referenced this issue Jul 15, 2020
Fix #480 - Fix race condition / edge case in _strokeUpdate where this._data can sometimes be []
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant