Everything I learned debugging my first Box app
Tags: node, sdk, videos, code
Published: 2023-09-28 17:36:13

---
title: Everything I learned debugging my first Box app
published: true
description: I learned a couple of tricks while using the Box SDK for Node.js and I am sharing them with you, using video and code to illustrate concepts
tags: nodejs, SDK, videos, code
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ke458w8cfuoy9rxbcs1a.gif
# Use a ratio of 100:42 for best results.
# published_at: 2023-08-08 14:42 +0000
---
<!-- wp:paragraph -->
<p>Writing your first Box app is sort of magical; in a couple of hours, you can go from having nothing to integrating with a bulletproof cloud filesystem.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Wondering how I did it?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Well, strap in because we're about to take a magical tour through the Box SDK and navigate through the ocean that is its first developer experience.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">What we're trying to do?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>I will show you how to overcome the most common issues with the Box Node.js SDK, when building something for the first time.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By the end of this article, you'll be a certified Box ninja, able to effortlessly chop, kick, and grab data from Box with Javascript. </p>
![ninja](https://media4.giphy.com/media/3ohhwtQGinneVw1FLy/200.gif)
<p>
The Box SDK provides a sweet wrapper around the Box API, making incorporating fancy file features into your node apps simple.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Like most beautiful things in life, however, there are some gotchas when getting started that you will learn by reading this article, and you will be glad that you did.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By the way, I used <a href="https://dashcam.io">Dashcam</a> - the best screen recorder for developers - to take video clips of the flow and bugs discussed below!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Issue #1: Misconfigured Authorization Callback</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Problem:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When developing your Box app, after creating an Oauth2 authentication page, you might encounter an error saying <strong>Redirect URI mismatch,</strong> as shown below:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe2b1822b6230060e38376?share=4CJ1LTqGnADN0Qith82i8A"><img src="https://replayable-api-production.herokuapp.com/replay/64fe2b1822b6230060e38376/gif?shareKey=4CJ1LTqGnADN0Qith82i8A" alt="URI mismatch"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Solution:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To solve this, please ensure that you have configured the redirect URI on the Box Developer platform to match the one URL in your code. This is the URL within your application that will receive OAuth 2.0 credentials and <a href="https://app.box.com/developers/console/">can be configured within the configuration tab of your app here</a></p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe2b7922b6230060e38377?share=Lodd0ck43YAmcP5MqYQPA"><img src="https://replayable-api-production.herokuapp.com/replay/64fe2b7922b6230060e38377/gif?shareKey=Lodd0ck43YAmcP5MqYQPA" alt="Solution to URI mismatch"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Issue #2: Wrong token</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Problem:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When trying to retrieve information (after successful authentication) with the Box API, I am hitting an error about the token being improperly formatted, as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">Error occurred: AssertionError [ERR_ASSERTION]: tokenInfo is improperly formatted. Properties required: accessToken, refreshToken, accessTokenTTLMS and acquiredAtMS.</code></pre>
<!-- /wp:code -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe309022b6230060e38378?share=IsT3K3ZvV69342H2XMleg"><img src="https://replayable-api-production.herokuapp.com/replay/64fe309022b6230060e38378/gif?shareKey=IsT3K3ZvV69342H2XMleg" alt="Error: tokenInfo improperly formatted"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Solution:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This error is caused by your secrets data: <code>CLIENT_ID, CLIENT_SECRET, SECRETKEY</code> need to be defined as strings.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Double-check and ensure that your token is wrapped in quotes in your <strong>.env</strong> file to prevent this error!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Issue #3: Creating items - lack of permissions</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Problem:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you try to create a folder or a file with the Box API you might encounter an API response similar to the below one and the file/folder does not get created.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">An error occurred Error: Unexpected API Response [403 Forbidden | .0a9157099d2d6c5f27336708e21f80f90]</code></pre>
<!-- /wp:code -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe3f0ddaac9d00614ffa16?share=AAtkeHDspdFXWZquEdoWw"><img src="https://replayable-api-production.herokuapp.com/replay/64fe3f0ddaac9d00614ffa16/gif?shareKey=AAtkeHDspdFXWZquEdoWw" alt="403 Forbidden - when creating a folder"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Solution:</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To recover from this error, provide a higher auth scope to your app by navigating to the developer console and ensuring the <strong>"Write all files and folders stored in Box"</strong> is selected. You can see the solution in the video embedded above. <em>Do not forget to restart your app and re-authenticate!</em></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Below, you can see how the same issue happens when trying to upload a file:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe4806daac9d00614ffa18?share=l7iZfxdMbAhdbpaweOWSw"><img src="https://replayable-api-production.herokuapp.com/replay/64fe4806daac9d00614ffa18/gif?shareKey=l7iZfxdMbAhdbpaweOWSw" alt="Upload a file: 403 Forbidden"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Issue #4: Issues with webhook</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This is a fun one because it contains multiple levels of problems into one!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Problem A):</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Using the Box API, you can modify files and folders and create a webhook that alert you when certain actions occur. You can create a webhook through the API, but sometimes you will face the following error when attempting to set it up</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">Unexpected API Response [403 Forbidden | .0738507f87ab4740283c35d3701e5d9ad]</code></pre>
<!-- /wp:code -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe50c1302ad00061eaf8d4?share=nrz2SH1fPDIwg3Ex5LuU9A"><img src="https://replayable-api-production.herokuapp.com/replay/64fe50c1302ad00061eaf8d4/gif?shareKey=nrz2SH1fPDIwg3Ex5LuU9A" alt="403 Forbidden - Webhooks"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Solution A)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Most likely, you haven't given your Box App the permission to create webhooks.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This setting differs from the ones that let you create files/folders.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>See here:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe519222b6230060e3837b?share=757Del92j4UT3S9W7pXCw"><img src="https://replayable-api-production.herokuapp.com/replay/64fe519222b6230060e3837b/gif?shareKey=757Del92j4UT3S9W7pXCw" alt="Webhook: Fix permissions before creating a webhook"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Problem B)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When creating a webhook, even after having given your Box App the right permissions, you are facing a 400 error like the one below:</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">Unexpected API Response [400 Bad Request | nqr3b4hhsa30fy93.0a89df5b6bfbff030bc864b4d4c81e393] bad_request - Bad Request</code></pre>
<!-- /wp:code -->

<!-- wp:image {"linkDestination":"custom"} -->
<figure class="wp-block-image"><a href="https://app.dashcam.io/replay/64fe529b302ad00061eaf8d5?share=MdSJgZ22S5Z6Qr36YWO8oA"><img src="https://replayable-api-production.herokuapp.com/replay/64fe529b302ad00061eaf8d5/gif?shareKey=MdSJgZ22S5Z6Qr36YWO8oA" alt="Webhooks - Bad Request 400 - Missing httpS"/></a></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Solution B)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The Box API requires you to create a webhook that uses SSL: The notification URL specified in the address parameter must be a valid URL starting with <strong>HTTPS</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example using Node.js</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">const result = await client.webhooks.create(
        '1303381221506', //my file id
        client.itemTypes.FILE,
        'https://some-endpoint-webhook.mydomain.com',
        [
            client.webhooks.triggerTypes.FILE.RENAMED,
            client.webhooks.triggerTypes.FILE.DOWNLOADED
        ])</code></pre>
<!-- /wp:code -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Problem C)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>When you create a webhook for a specific item, you cannot create a second webhook that is associated with it. You will otherwise face the following error.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code class="">Unexpected API Response [409 Conflict | 7ejx8thhsa6jg839.05e8c637b1ef2870c7ff9ae16cfddaac8] conflict - Bad Request</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>This means that we’re going to figure out another way…</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Solution C)</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The solution is to retrieve the existing webhook for this file/folder and then edit it. <a href="https://github.com/box/box-node-sdk/blob/main/docs/webhooks.md#get-all-webhooks-information">More information is available from this Github repository</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can also delete it first and then re-create it. There is no other way to modify an existing webhook at this moment.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>By the way - here's a <a href="https://developer.box.com/guides/webhooks/triggers/">comprehensive list of actions the Box platform can send you a webhook for</a></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Conclusion</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This article showed you some of the most common issues and how to solve them with the support of video clips and error logs.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This should help you overcome these initial blocks to your developer experience when using the Box SDK for Node.js.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Getting started is pretty straightforward. The documentation is clear and has many examples- making it easy to get started. However if you face any issues, you can jump on the <a href="https://forum.box.com/">Box community forums</a> and ask for help. Their developer relations team is constantly monitoring it and ready to help you get rolling with any technical, SDK or API question! Alternatively reach out to the unofficial community on <a href="https://stackoverflow.com/questions/tagged/box-api">Stackoverflow</a>!</p>
<!-- /wp:paragraph -->