How do I debug a saga?

Question

How can I debug this problem? I can find no information to follow.

I have the following saga:

    export function* generateSoftwareLicenseCode({distributor, licenseType, duration}: GenerateSoftwareLicenseCodeAction) {
        const username = getUsername();
        const jwtToken = yield call(getJwtToken, username);
    
        const link = new HttpLink({
            uri: getGraphqlEndpointUrl,
            headers: {
                'x-api-key': getApiKey(),
                'Authorization': jwtToken,
            },
        });
        const client = new ApolloClient({
            link: link,
            cache: new InMemoryCache(),
        });
    
        try {
            yield put(setStatusMessage('Generating license code...', 'info'));
    
            yield client.mutate({
                /* tslint:disable */
                mutation: gql`
                    }
                    mutation licensemutation($distributor: String!, licenceType: String!, duration: String, userId: String) {
                        addLicenseCodeOneTimeUsage(distributor: $distributor, licenseType: $licenseType, duration: $duration, userId: $userId) {
                            code
                        }
                    }
                `,
                /* tslint:enable */
                variables: {
                    userId: username,
                    distributor: distributor,
                    licenseType: licenseType,
                    duration: duration,
                },
            });
            const doneMessage = 'License code successfully generated';
            yield put(generateSoftwareLicenseCodeSucceeded(doneMessage));
        } catch (error) {
            const errors = error.networkError.result.errors;
            yield put(generateSoftwareLicenseCodeFailed(filterErrorMessage(errors)));
        }
    }

    export function* softwareLicenseCodesSagas() {
        const generateSoftwareLicenseCodeWatcher = yield takeLatest(GENERATE_SOFTWARE_LICENSE_CODE_ACTION, generateSoftwareLicenseCode);
        yield take(LOCATION_CHANGE);
        yield put(clearMessages());
        yield cancel(generateSoftwareLicenseCodeWatcher);
    }

The try block throws an error. The error in the catch block is undefined.

The console shows uncaught at at at at b TypeError: Cannot read property 'result' of undefined

Stepping through the code takes me though a bunch of library code that I don't understand.

Stoa

just write debugger in js code, where you want to pause code execution. – Fairtrade

Answer 1

If this saga is being executed within the browser, you can use the debugger to pause the executing and inspect variables as you normally would. If it is on the server, console.log will work just fine.

In terms of the error, it is best practice to always use the redux-saga call method when yielding executed functions within a saga. Therefore, you should change it to be:

    yield call(client.mutate, options)

Lecythus

@vijay don't think that is an appropriate scenario to downvote given (a) it does work (b) you could have asked a clarifying question beforehand and I would have done my best to elaborate. – Lecythus

Answer 2

    yield alert('your debug message here');

It is not the most pro way to debug but for something quick and easy it will work. Remember if something is failing before, the flow of execution will finish and it is no going to reach the alert, take into account that.

Viridis

Answer 3

This is due to a known open issue with ApolloClient where error.networkError.result is being returned as undefined.

https://github.com/apollographql/apollo-link/issues/855

However, you can work around it by changing the line in your catch block to this.

const errors = error.networkError?.result?.errors || [];

Now that still doesn't explain why you're getting a network error in the first place, but at least the try-catch will work.

Krupp