When running my dashboard locally, Dash successfully loads favicon.ico that is located in the assets folder, however when deploying my tool as an AWS Lambda, the icon is not loaded (not even the default Plotly image is shown). Googling the issue, it seems that many more people struggle with this, however I have not yet found a way to solve that in Dash.
I have explicitly set the location of the assets folder when initializing the app
app = dash.Dash(__name__, assets_folder=...)
Also, when I open up my deployed tool and inspect the header of the web page with the chrome developers tool I see that an attempt is made to load the favicon
I have other resources in the assets folder that do load correctly, so it seems that AWS is just not picking up the icon. Does anyone have an idea on how to solve this issue?
I have an idea that it is related to the file permissions on the AWS lambda. I have an idea for a solution and that is to copy the contents of the assets directory to the /tmp directory. Here is a stackoverflow post that describes this directory a bit more. And then set the assets_folder= key to this directory in the app initializer, app = dash.Dash(...). However, I didn’t find the time yet to test that. If you get around to testing that, let me know.
I gave that a quick go…copied the assets directory and contents to /tmp outside of the lambda handler function, confirmed it copied ok, but sadly still no joy. I am iconless Was worth a try though.
hmm, very unfortunate. Other suggestions I saw floating around was setting up an S3 bucket that contains the favicon, and then load the favicon from that S3 into your Dash application. However I don’t know how to explicitly set the favicon in Dash. The examples I saw, were using Flask or HTML directly.
Investigating further I went into the AWS CloudWatch logs for the Lambda that is running my Dash App. What I saw is that the http GET request for getting the favicon is failing with a UnicodeDecodeError. The traceback is included below.
Traceback (most recent call last):
File "/var/task/lambda_handler.py", line xxx, in lambda_handler
result = awsgi.response(app.server, event, context)
File "/var/task/awsgi/__init__.py", line 173, in response
return sr.response(output)
File "/var/task/awsgi/__init__.py", line 95, in response
rv = super(StartResponse_GW, self).response(output)
File "/var/task/awsgi/__init__.py", line 89, in response
rv.update(self.build_body(headers, output))
File "/var/task/awsgi/__init__.py", line 75, in build_body
converted_output = convert_str(totalbody)
File "/var/task/awsgi/__init__.py", line 12, in convert_str
return s.decode('utf-8') if isinstance(s, bytes) else s
UnicodeDecodeError: 'utf-8' codec can't decode byte 0xff in position 66: invalid start byte
I use awsgi to generate the response for my Dash app:
def lambda_handler(event, context):
result = awsgi.response(app.server, event, context)
return result
Does anybody have an idea what is the cause for this error? Somehow the image format of favicon.ico? Or is there a setting that can be passed to decode the icon with a different codec? Should I use a different package than awsgi to generate my response?
Note: favicon loads correctly when I run my dashboard locally. It’s just AWS that acting difficult.
Finally I was able to solve the issue. I described the solution is much more detail in another post. Have a look there and I hope this saves a lot of future headaches.
In short: The UnicodeDecodeError happened because awsgi.response() decodes everything as utf-8 by default. You have to tell it explicitly to decode your image type as base 64.
Was worth a try though.